CDN을 사용하여 div 전용 부트 스트랩을 적용 할 수 있습니까?

Question

나는 트위터 부트 스트랩을 사용하여 일부 내용으로 div를 디자인했다. 이제 다른 사용자가이 스 니펫을 페이지에 복사하여 붙여 넣을 수 있도록이 페이지의 미리보기를 생성하고 싶습니다. 그러나 문제는 모든 사람들이 부트 스트랩을 사용할 것이라고 보장 할 수 없으므로이 스 니펫은 비 부트 스트랩 사이트에서 작동하지 않습니다.

일부 맞춤 CSS 클래스도 추가했습니다. 스타일 태그를 사용하여 스 니펫과 함께 스타일을 추가 할 수 있습니다. 부트 스트랩 스타일을 같은 방식으로 추가하려면 거대한 크기가됩니다.

특정 div에 부트 스트랩 CDN을 사용할 수 있습니까? 부트 스트랩 스타일은 해당 페이지의 다른 부분에 영향을 미치지 않습니다. 다른 방법이 있습니까? 여기

은 조각이다 : (?를 iframe을 시도) 난 당신이 단지 DIV에 스타일을 적용 할 수 없습니다 원인은 CDN이 할 수 있다고 생각하지 않습니다

<div id="login-form"> 
    <div class="row row-padded"> 
     <div class="col-md-7"> 
      <form role="form"> 
       <div id="title" class="section-header login-form-label">Login</div> 
       <div class="form-group"> 
        <label for="exampleInputEmail1" class="login-form-label">Email address</label> 
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputPassword1" class="login-form-label">Password</label> 
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
       </div> 

       <button type="button" class="btn btn-primary" id="primary-button-text">Primary</button> 

       <div><a href="#" class="">Forgot password?</a></div> 
       <div><a href="#" class="" id="register-link-text">New here? Create an Account</a></div> 

      </form> 
     </div> 
    </div> 

Answer 1

.

최소한의 CSS를 컴파일하고 div에 적용 해보십시오.

Github에서 최신 버전의 Bootstrap을 다운로드하십시오.

복사합니다처럼 적은에서 # 로그인 양식의 서브 클래스에 사용하는 모든 부트 스트랩 클래스 :

#login-form .row {.row;} 

최신 복사, bootstrap.less의 끝이 줄을 추가하고이 파일을 컴파일 결과 CSS의 라인은 예를 들어 #login-form

내가 사용 :

#login-form .row {.row;} 
#login-form .col-md-7 {.col-md-7; 
    float: left; 
    width: percentage((7/@grid-columns)); 
} 
#login-form .form-group {.form-group} 
#login-form .btn {.btn;} 
#login-form .btn-primary {.btn-primary;} 
#login-form .form-control {.form-control;} 

이 난을 발생합니다 N :

#login-form .row:after{clear:both} 
#login-form .row:before,#login-form .row:after{content:" ";display:table;} 
#login-form .row:after{clear:both} 
#login-form .col-md-7{position:relative;min-height:1px;padding-left:15px;padding-right:15px;float:left;width:58.333333333333336%} 
#login-form .form-group{margin-bottom:15px} 
#login-form .btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.428571429;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}#login-form .btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} 
#login-form .btn:hover,#login-form .btn:focus{color:#333;text-decoration:none} 
#login-form .btn:active,#login-form .btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)} 
#login-form .btn.disabled,#login-form .btn[disabled],fieldset[disabled] #login-form .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none} 
#login-form .btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}#login-form .btn-primary:hover,#login-form .btn-primary:focus,#login-form .btn-primary:active,#login-form .btn-primary.active,.open .dropdown-toggle#login-form .btn-primary{color:#fff;background-color:#3276b1;border-color:#285e8e} 
#login-form .btn-primary:active,#login-form .btn-primary.active,.open .dropdown-toggle#login-form .btn-primary{background-image:none} 
#login-form .btn-primary.disabled,#login-form .btn-primary[disabled],fieldset[disabled] #login-form .btn-primary,#login-form .btn-primary.disabled:hover,#login-form .btn-primary[disabled]:hover,fieldset[disabled] #login-form .btn-primary:hover,#login-form .btn-primary.disabled:focus,#login-form .btn-primary[disabled]:focus,fieldset[disabled] #login-form .btn-primary:focus,#login-form .btn-primary.disabled:active,#login-form .btn-primary[disabled]:active,fieldset[disabled] #login-form .btn-primary:active,#login-form .btn-primary.disabled.active,#login-form .btn-primary[disabled].active,fieldset[disabled] #login-form .btn-primary.active{background-color:#428bca;border-color:#357ebd} 
#login-form .form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}#login-form .form-control:-moz-placeholder{color:#999} 
#login-form .form-control::-moz-placeholder{color:#999} 
#login-form .form-control:-ms-input-placeholder{color:#999} 
#login-form .form-control::-webkit-input-placeholder{color:#999} 
#login-form .form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)} 
#login-form .form-control[disabled],#login-form .form-control[readonly],fieldset[disabled] #login-form .form-control{cursor:not-allowed;background-color:#eee} 
textarea#login-form .form-control{height:auto} 

이 코드와이를 참조하십시오 http://jsfiddle.net/gDraJ/

참고 일부 덜 규칙은 ​​(내가 복사하는 방법을 모른다) 미디어 쿼리에 싸여있다. 그래서이 예제에서 내가 사용 : # 로그인 양식 .COL-MD-7 {.COL-MD-7}

#login-form .col-md-7 {.col-md-7; 
    float: left; 
    width: percentage((7/@grid-columns)); 
} 

예상해야한다.

바이올린 예에서 나는 또한 추가

#login-form 
{ 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
     box-sizing: content-box; 
} 

참조 : Twitter's Bootstrap 3 with ShareThis widget 및 Why did Bootstrap 3 switch to box-sizing: border-box?

업데이트를 이론적으로 당신은 또한 #login-form{} 내부 bootstrap.less의 모든 컨텐츠 랩이 컴파일 할 수 있습니다. 결과로 나오는 CSS는 모든 부트 스트랩의 규칙을 # login-form에만 적용합니다. 물론 외부 URL에이 CSS를 제공 할 수 있습니다.

Answer 2

나는 대체 솔루션을 찾는 것이 좋습니다,하지만이 작업을 수행 할 수 있습니다 :

사용 이하 (http://lesscss.org/를) 클라이언트 및 CDN에서 소스 CSS를 사용하는 작은 파일을 만듭니다.

물론 성능은 좋지 않지만 원했던 것처럼 동적으로 작동합니다.