Twitter Bootstrap'teki stillerin üzerine nasıl yazabilirim? Örneğin, şu anda 'float: left;' CSS kuralına sahip bir .sidebar sınıfı kullanıyorum. Bunun yerine sağa gitmesi için bunu nasıl değiştirebilirim? HAML ve SASS kullanıyorum ancak web geliştirmede nispeten yeniyim.
Yanıtlar:
<div class="sidebar right"></div>CSS ile kendi sınıfınızı ekleyin, örneğin:
.sidebar.right {
float:right
} Tüm bu ipuçları işe yarayacaktır, ancak daha basit bir yol , Bootstrap stillerinden sonra stil sayfanızı eklemek olabilir .
site-specific.cssBootstrap'in ( ) sonrasına css ( ) ' inizi bootstrap.csseklerseniz, kuralları yeniden tanımlayarak geçersiz kılabilirsiniz.
Örneğin, CSS'yi bu şekilde eklerseniz <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />Kenar çubuğunu ( site-specific.cssdosyanıza) yazarak sağa taşıyabilirsiniz :
.sidebar {
float: right;
}HAML ve SASS eksikliğini affedin, onları öğreticiler yazacak kadar iyi bilmiyorum.
!important, gelecekte onu bir daha asla geçersiz kılamayacak olmanızdır.
Site.csspaketlenmiş ve listelenmiş Bundle.configve sonrasında fiziksel olarak işlenmiş, bootstrap.cssancak stiller hala geçersiz kılınmamış. site.cssReferansı modernleştirici paketinden çıkarmak zorunda kaldım ve bunu manuel olarak bootstrap.css(ve önbelleği temizlemek için bir kez hata ayıklarken Ctrl + F5 tuşlarına basın)
Bunun cevabı CSS Özgüllüğüdür. Bootstrap css özelliklerini geçersiz kılabilmesi için CSS'nizde daha "spesifik" olmanız gerekir.
Örneğin, burada bir önyükleme menüsü için örnek bir kodunuz var:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="home-menu-container" class="collapse navbar-collapse">
<ul id="home-menu" class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
<li><a href="#intro">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">What We Do</a></li>
<li><a href="#process">Our Process</a><br /></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>Burada özgüllük hiyerarşisini hatırlamanız gerekir. Bu böyle devam ediyor:
Öyleyse, yukarıdakiler için css'nizde böyle bir şey varsa:
.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */Yani, tanımlanmış olsa bile .navbar asonrasında .navbar ul li aözgüllük daha (13 puan) olduğundan hala yerine yeşil, kırmızı renk ile geçersiz kılma gidiyor.
Dolayısıyla, temelde yapmanız gereken tek şey, tarayıcınızdaki inspect elementi aracılığıyla css'yi değiştirmek istediğiniz elementin puanlarını hesaplamaktır. Burada bootstrap, eleman için css'ini şu şekilde belirtmiştir:
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}Bu nedenle, css'iniz yükleniyor olsa bile, aşağıdaki satıra sahip bootstrap.css'den sonra yükleniyor:
.navbar-nav li a {
color: red;
}yine de # 999 olarak görüntülenecek. Bunu çözmek için bootstrap'in 22 puanı vardır (kendiniz hesaplayın). Yani tek ihtiyacımız olan bundan daha fazlası. Böylelikle ana menü kapsayıcı ve ana menü gibi öğelere özel kimlikler ekledim. Şimdi aşağıdaki css çalışacak:
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */Bitti.
Bu MDN bağlantısına başvurabilirsiniz .
blockquoteBootstrap CSS'deki stili aşmakta sorun yaşıyordum . Garip bir şekilde, normal blok alıntılar için yanlıştı, ancak bir blok alıntı içinde ve <ul> için doğru görünüyordu. Anahtar, CSS'mi güncelliyordu blockquote p, bu da yeterince öncelik verdi. <ul> bunu sayfanın diğer bölümü için yapıyordu.
Bir CSS sınıfını "daha spesifik" hale getirerek üzerine yazabilirsiniz.
HTML ağacında yukarı çıkarsınız ve ana öğeleri belirtirsiniz:
div.sidebar { ... } şundan daha spesifik .sidebar { ... }
Gerekirse BODY'ye kadar gidebilirsiniz:
body .sidebar { ... } neredeyse her şeyi geçersiz kılar.
Şu kullanışlı kılavuza bakın: http://css-tricks.com/855-specifics-on-css-specificity/
Önyükleme sırasında herhangi bir css'nin üzerine yazmak istiyorsanız kullanın!
Diyelim ki, bootstrap'ta üstte 40px kenar boşluğu olan sayfa başlığı sınıfı, müşterim bundan hoşlanmıyor ve sadece üstte 15 ve altta 10 olmasını istiyor
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}Ben de site.css dosyama şu şekilde aynı isimde class ekledim
.page-header
{
padding-bottom: 9px;
margin: 15px 0 10px 0px !important;
}Bootstarp sayfa başlığı sınıf marjının marjının üzerine yazacak!
Bu kadar geç geldi, ama sanırım başka bir cevap kullanabilir.
Sass kullanıyorsanız, bootstrap'i içe aktarmadan önce değişkenleri gerçekten değiştirebilirsiniz. http://twitter.github.com/bootstrap/customize.html#variables
Bunlardan herhangi birini değiştirin, örneğin:
$bodyBackground: red;
@import "bootstrap";Alternatif olarak, değiştirmek istediğiniz şey için bir değişken yoksa, stilleri geçersiz kılabilir veya kendi stilinizi ekleyebilirsiniz.
Sass:
@import "bootstrap";
/* override anything manually, like rounded buttons */
.btn {
border-radius: 0;
}Ayrıca şuna bakın: Raylarda Uygun SCSS Varlık Yapısı
Bu eski bir soru olduğunu biliyorum ama yine de benzer bir sorun üzerinde geldi ve benim benim "çalışmıyor" css kod fark bootstrapOverload.cssdosyanın sonra yazılmıştır media queries. medya sorgularının üzerine taşıdığımda çalışmaya başladı.
Sadece başka birinin aynı problemle karşılaşması durumunda