Bagaimana saya bisa menimpa stylings di Twitter Bootstrap? Sebagai contoh, saya saat ini menggunakan kelas .sidebar yang memiliki aturan CSS 'float: left;' Bagaimana saya bisa mengubah ini sehingga ia pergi ke kanan? Saya menggunakan HAML dan SASS tetapi saya relatif baru dalam pengembangan web.
Jawaban:
Tambahkan kelas Anda sendiri, mis:, <div class="sidebar right"></div>dengan CSS as
.sidebar.right {
float:right
} Semua tips ini akan berfungsi, tetapi cara yang lebih sederhana adalah memasukkan stylesheet Anda setelah gaya Bootstrap.
Jika Anda memasukkan css ( site-specific.css) setelah Bootstrap's ( bootstrap.css), Anda bisa mengesampingkan aturan dengan mendefinisikan ulang.
Misalnya, jika ini adalah cara Anda memasukkan CSS ke dalam <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />Anda cukup memindahkan bilah sisi ke kanan dengan menulis (di site-specific.cssfile Anda ):
.sidebar {
float: right;
}Maafkan kurangnya HAML dan SASS, saya tidak cukup mengenal mereka untuk menulis tutorial di dalamnya.
!importantadalah bahwa Anda tidak akan pernah bisa menimpanya lagi di masa mendatang.
Site.cssdibundel dan terdaftar di Bundle.configdan diberikan secara fisik setelah bootstrap.css tetapi gaya masih tidak diganti. Saya harus mengambil site.cssreferensi dari bundel modernizer dan secara manual meletakkannya setelah bootstrap.css(dan tekan Ctrl + F5 setelah debugging untuk menghapus cache)
Jawabannya adalah Kekhususan CSS. Anda harus lebih "spesifik" di CSS Anda agar dapat mengesampingkan properti cstr bootstrap.
Misalnya Anda memiliki kode sampel untuk menu bootstrap di sini:
<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>Di sini, Anda perlu mengingat hierarki kekhususan. Bunyinya seperti ini:
Jadi, untuk hal di atas jika css Anda memiliki sesuatu seperti ini:
.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 */Jadi, bahkan jika Anda telah menetapkan .navbar asetelah .navbar ul li aitu masih akan menimpa dengan warna merah, bukan hijau karena spesifisitasnya lebih (13 poin).
Jadi, pada dasarnya yang perlu Anda lakukan adalah menghitung poin untuk elemen yang ingin Anda ubah css, melalui elemen inspeksi di browser Anda. Di sini, bootstrap telah menetapkan css untuk elemen sebagai
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}Jadi, bahkan jika css Anda sedang memuat sedang dimuat setelah bootstrap.css yang memiliki baris berikut:
.navbar-nav li a {
color: red;
}masih akan dirender sebagai # 999. Untuk mengatasi ini, bootstrap memiliki 22 poin (hitung sendiri). Jadi yang kita butuhkan adalah sesuatu yang lebih dari itu. Jadi, saya telah menambahkan ID khusus ke elemen yaitu home-menu-container dan home-menu. Sekarang css berikut akan berfungsi:
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */Selesai
Anda dapat merujuk ke tautan MDN ini .
blockquotegaya di Bootstrap CSS. Anehnya, itu salah untuk blockquote normal tetapi terlihat tepat dan <ul> dalam blockquote. Kuncinya adalah memperbarui CSS untuk dimiliki blockquote p, yang memberi prioritas cukup. <ul> melakukan ini untuk bagian halaman lainnya.
Anda dapat menimpa kelas CSS dengan membuatnya "lebih spesifik".
Anda naik pohon HTML, dan menentukan elemen induk:
div.sidebar { ... } lebih spesifik daripada .sidebar { ... }
Anda dapat mencapai BODY jika Anda perlu:
body .sidebar { ... } akan menimpa hampir apa pun.
Lihat panduan praktis ini: http://css-tricks.com/855-specifics-on-css-specificity/
Jika Anda ingin menimpa css apa pun dalam penggunaan bootstrap! Penting
Katakanlah di sini adalah kelas header halaman dalam bootstrap yang memiliki margin 40px di atas, klien saya tidak menyukainya dan dia ingin 15 di atas dan 10 di bawah saja
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}Jadi saya menambahkan kelas di file site.css saya dengan nama yang sama seperti ini
.page-header
{
padding-bottom: 9px;
margin: 15px 0 10px 0px !important;
}Catat! Penting dengan margin saya, yang akan menimpa margin bootstarp kelas-header kelas.
Datang terlambat, tapi saya pikir itu bisa menggunakan jawaban lain.
Jika Anda menggunakan sass, Anda sebenarnya dapat mengubah variabel sebelum Anda mengimpor bootstrap. http://twitter.github.com/bootstrap/customize.html#variables
Ubah salah satunya, seperti:
$bodyBackground: red;
@import "bootstrap";Atau jika tidak ada variabel yang tersedia untuk apa yang ingin Anda ubah, Anda dapat mengganti gaya atau menambahkan sendiri.
Kelancangan:
@import "bootstrap";
/* override anything manually, like rounded buttons */
.btn {
border-radius: 0;
}Lihat juga ini: Struktur Aset SCSS yang Tepat dalam Rel
Saya tahu ini adalah pertanyaan lama tapi tetap saja, saya menemukan masalah yang sama dan saya menyadari bahwa kode css "tidak berfungsi" dalam bootstrapOverload.cssfile saya ditulis setelah media queries. ketika saya memindahkannya di atas kueri media, ia mulai berfungsi.
Kalau-kalau ada orang lain yang menghadapi masalah yang sama