Cara menimpa penataan di Twitter Bootstrap

128

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.

css twitter-bootstrap John
sumber
Lihat juga: stackoverflow.com/questions/8596794/…
Zim

Jawaban:

41

Tambahkan kelas Anda sendiri, mis:, <div class="sidebar right"></div>dengan CSS as

.sidebar.right { 
    float:right
}
motoxer4533
sumber
1
Bukan praktik yang baik: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes
Damjan Pavlica
2
@DamjanPavlica Jujur? Anda masih peduli dengan IE 6? Belum lagi, saya pikir, bootstrap menggunakan rantai.
Błażej Michalik
233

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.

citelao
sumber
7
@ClaudiuConstantin Saya tidak melihat alasan mengapa tidak. Aturan praktis adalah gaya kedua akan selalu mengalahkan yang pertama jika keduanya memiliki tingkat spesifisitas yang sama. Selama gaya Anda datang setelah itu akan menimpa.
citelao
3
@ Kreker Itu mungkin ada hubungannya dengan spesifisitas. Anda dapat membacanya di sini (artikel lama), tetapi pada dasarnya .sidebar.rightlebih spesifik daripada .sidebar. Itu mungkin masalahnya. Gunakan inspektur web untuk mencari tahu apa yang menimpanya.
citelao
2
@ Kreker yup, itu idenya. Masalahnya !importantadalah bahwa Anda tidak akan pernah bisa menimpanya lagi di masa mendatang.
citelao
5
Saya 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)
atconway
1
Ini mungkin bekerja tetapi itu bukan praktik terbaik untuk produksi. Muat 1 stylesheet per situs kecuali ada alasan besar untuk tidak melakukannya. #sitespeed
Ben Racicot
58

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:

  • Berikan elemen dengan id yang disebutkan 100 poin
  • Berikan elemen dengan kelas yang disebutkan 10 poin
  • Berikan elemen sederhana satu poin 1

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 .

kaizer1v
sumber
1
Bagaimana jika mereka terikat?
Bingung
2
Tidak masalah, misalnya '.abc.xyz' berarti, ada elemen dengan kelas 'abc' dan 'xyz' - masih akan menganggapnya sebagai elemen tunggal dengan kelas. Jadi, 10 poin. Hal yang sama berlaku untuk ID.
kaizer1v
1
Ditulis dengan baik! Terima kasih!
GobSmack
1
Ini trik untuk saya. Saya mengalami kesulitan menunggang 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.
Adam Wuerl
20

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/

Diodeus - James MacFarlane
sumber
Ini sebenarnya jawaban terbaik
CodyBugstein
9

Anda bisa memastikan file css Anda mem-parsing SETELAH boostrap.css, seperti:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">

Gothburz
sumber
6

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.

Ali Adravi
sumber
luar biasa! ini yang aku inginkan. Terima kasih
Gisway
2
Perhatikan bahwa menggunakan! Important agak anti-pola. Baca lebih lanjut di sini: james.padolsey.com/css/dont-use-important
mayatron
3

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

AJcodez
sumber
2

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

md1hunox
sumber