2012-08-24 15 views
7

Çalıştığım bir site için twitter bootstrap kullanmak istiyorum. Bu site, sayfanın belirli bölümlerinde kullanılmak üzere önceden ayarlanmış bir şablon gerektirir.Stil Sayfası'nı bir etikete ve descendents'a sınırla

Eğer twitter önyükleme stil sayfasını eklediysem, orijinal şablonu bozar.

ben tek yön css düzenlemek ve eklemektir biliyorum

<html> 
<link href="original stylsheet.css"> 
<link href="bootstrap.css"> 
... 
... 
<div class="header"> 
original stlesheet to be used here 
</div> 
<div class="mycontent"> 
bootstrap css to work for all descendents of my content 
</div> 

harici bootstrap.cc stil dahil ancak yalnızca class = "İçeriğim'e" nin soyundan olan etiketleri üzerinde çalışmak yapmak istiyorum. Her etiketden önce mycontent. Eğer yanlış yolu kullanan

<html> 
<link rel="original stylsheet.css"> 
<link rel="bootstrap.css"> 
... 
... 
<div class="header"> 
original stlesheet to be used here 
</div> 
<div class="mycontent"> 
bootstrap css to work for all descendents of my content 
</div> 

i kodunuzu görebileceğiniz bir akıllı çözüm, şöyle

+0

, orijinal biçembentten önce önyükleme ekleyin. – Will

+0

, çoğu için çalışır .... Ama orijinal stil sayfasında –

cevap

4

Dürbünlü CSS

ile çözmek olacaktır umut denemelisiniz.

<div> 
    <style scoped> 
    /* your css here */ 
    <style> 
    <!-- content --> 
</div> 

Bu tarayıcı desteği yoksun, ama bir polyfill vardır: jQuery Scoped CSS plugin.

Ek okuma: Saving the Day with Scoped CSS.


Güncel tarayıcı desteği: stiller bootstrap olanlar geçersiz böylece http://caniuse.com/#feat=style-scoped

+0

altında sadece öğeleri etkilemek için bu aradığımı en yakın olanı! Teşekkür ederiz –

0

olmadığını Ama merak ettim.
sonra <style> sadece üst eleman için de geçerlidir, <link href="bootstrap.css">
Ben scope nitelik varsa senin sorunun bu

+0

mevcut olmayan bootstrap bir değişiklik varsa bu başarısız olur. Bu bir yazım hatası oldu ... benim soru hala duruyor ... extrenal stil sayfası istiyorum mycontent –

İlgili konular