CDN kullanarak sadece bir div için bootstrap uygulamak mümkün mü?

Question

Bazı içeriklerle twitter bootstrap kullanarak div tasarladım. Şimdi bu sayfanın snippet'ini oluşturmak istiyorum, böylece diğer kullanıcılar bu snippet'i sayfalarına kopyalayıp yapıştırabilir. Ancak sorun, bunların hepsinin bootstrap kullanacağı garanti edilmez, bu yüzden bu snippet önyükleme alanında çalışmayacaktır.

Bazı özel css sınıflarını da ekledim. Bu stili, stil etiketini kullanarak snippet ile ekleyebilirim. Önyükleme stilini aynı şekilde eklemek istersem, bu büyük olur.

Bu özel div için bootstrap CDN kullanmak mümkün mü? Böylece bootstrap tarzı o sayfanın diğer bölümünü etkilemeyecektir. Veya başka bir yaklaşım var mı? İşte

snippet'tir: (? Bir iframe deneyin) Ben sadece div üzerinde stil uygulamak olamaz çünkü sen CDN ile yapabilirsiniz sanmıyorum

<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

.

Yapabilecekleriniz, gereken minimum css'yi derlemeye çalışmak ve bunu divunuzda uygulamaktır.

Github'dan en son Bootstrap sürümünü indirin.

Kopya sizin gibi Less içerisinde giriş-formun bir alt sınıf için kullanacağı her önyükleme sınıf:

#login-form .row {.row;} 

son kopyalamak bootstrap.less sonuna bu satırları ekleyin ve bu dosyaları derlemek Ortaya çıkan CSS çizgiler Örneğin #login-form

i kullanın:

#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;} 

Bu i sonuçlanacaktır 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} 

, kodunuzu bu bakınız: http://jsfiddle.net/gDraJ/

Not bazı daha az kurallar (ben onları kopyalamak için nasıl bilmiyorum) medya sorguları sarılır. Dolayısıyla bu örnekte i kullanın: # giriş formu .col-md-7 {.col-md-7;}

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

beklenmelidir.

keman örnekte ben de ekleyin:

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

See: Twitter's Bootstrap 3 with ShareThis widget ve Why did Bootstrap 3 switch to box-sizing: border-box?

güncelleme Teoride ayrıca #login-form{} içindeki bootstrap.less tüm içeriği sarın ve bu derlemek olabilir. Ortaya çıkan CSS, tüm Bootstrap kurallarını yalnızca # oturum açma formunda uygulayacaktır. Tabii ki bu CSS'yi harici bir URL'ye sağlayabilirsiniz.

Answer 2

Ben alternatif bir çözüm bulma öneriyoruz, ama bunu yapmak mümkündür:

kullanın az (http://lesscss.org/) istemci üzerinde ve CDN kaynak css kullanacak az dosyası oluşturun.

Bu elbette ki iyi bir performansa sahip değil, istediğiniz gibi dinamik olarak çalışacak.