Можно ли применить бутстрап только для div, используя CDN?

Question

Я разработал div с некоторым содержимым, используя twitter bootstrap. Теперь я хочу сгенерировать фрагмент этой страницы, чтобы другой пользователь мог просто скопировать этот фрагмент на свою страницу. Но проблема в том, что не гарантируется, что все они будут использовать загрузчик, поэтому этот фрагмент не будет работать на сайте без загрузки.

Я добавил некоторый пользовательский класс css тоже. Я могу добавить этот стиль с помощью фрагмента, используя тег стиля. Если я хочу добавить стиль бутстрапа таким же образом, он будет огромным.

Is можно использовать bootstrap CDN для этого конкретного div? так что стиль бутстрапа не повлияет на другую часть этой страницы. Или есть ли другой подход?

Вот фрагмент кода: (? Попробовать IFRAME)

<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

Я не думаю, что вы можете сделать это с CDN потому что вы не можете применить стиль на DIV только.

Что вы можете сделать, это попытаться скомпилировать требуемый минимум css и применить его к вашему div.

Загрузите последнюю версию Bootstrap из Github.

Скопировать каждый загрузочный класс, который вы будете использовать для подкласса # логин-формы в Less как:

#login-form .row {.row;} 

Добавить эти строки в конец bootstrap.less и компилировать эти файлы, копировать последний строки результирующего КАС, #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;} 

Это приведет к I п:

#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/

Примечания несколько меньше правил обернуты в запросах СМИ (я не знаю, как копировать их). Таким образом, в этом примере я использую:

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

где # Логин форма .col-мкр-7 {.col-мкр-7;} следует ожидать.

В скрипичной примере я также добавить:

#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?

обновления В теории вы также можете обернуть все содержимое bootstrap.less внутри #login-form{} и компилировать это. Полученный CSS будет применять все правила Bootstrap только для # login-form. Конечно, вы можете предоставить этот CSS для внешнего URL-адреса.

Answer 2

я рекомендовал бы найти альтернативное решение, но можно это сделать:

Используйте меньше (http://lesscss.org/) на клиенте, и создать меньше файл, который будет использовать исходный CSS от CDN.

Это, конечно, не так хорошо, но будет работать динамично, как вы хотели.