Bagaimana saya bisa mengesampingkan gaya CSS Bootstrap?

234

Saya perlu memodifikasi bootstrap.cssagar sesuai dengan situs web saya. Saya merasa lebih baik untuk membuat custom.cssfile terpisah daripada memodifikasi bootstrap.csssecara langsung, salah satu alasannya adalah bahwa harus bootstrap.cssmendapatkan pembaruan, saya akan menderita mencoba memasukkan kembali semua modifikasi saya. Saya akan mengorbankan beberapa waktu muat untuk gaya ini, tetapi diabaikan untuk beberapa gaya yang saya timpa.

Bagaimana cara mengganti bootstrap.cssagar saya menghapus gaya jangkar / kelas? Misalnya, jika saya ingin menghapus semua aturan gaya untuk legend:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

Saya hanya bisa menghapus semua itu bootstrap.css, tetapi jika pemahaman saya tentang praktik terbaik tentang menimpa CSS benar, apa yang harus saya lakukan?

Agar jelas, saya ingin menghapus semua gaya legenda dan menggunakan nilai-nilai CSS orangtua. Jadi, menggabungkan jawaban Pranav, akankah saya melakukan yang berikut?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(Saya berharap ada cara untuk melakukan sesuatu seperti yang berikut ini :)

legend {
  clear: all;
}
html  css  twitter-bootstrap 
— Alex
sumber

Jawaban:

491

Menggunakan !importantbukanlah pilihan yang baik, karena Anda kemungkinan besar ingin mengganti gaya Anda sendiri di masa depan. Itu membuat kami dengan prioritas CSS.

Pada dasarnya, setiap pemilih memiliki 'bobot' numeriknya sendiri:

  • 100 poin untuk ID
  • 10 poin untuk kelas dan kelas semu
  • 1 poin untuk pemilih tag dan elemen semu
  • Catatan: Jika elemen memiliki gaya inline yang secara otomatis menang (1000 poin)

Di antara dua browser gaya selektor akan selalu memilih yang lebih berat. Urutan stylesheet Anda hanya penting ketika prioritas genap - itu sebabnya tidak mudah untuk menimpa Bootstrap.

Pilihan Anda adalah memeriksa sumber Bootstrap, mencari tahu bagaimana tepatnya gaya tertentu didefinisikan, dan menyalin pemilih itu sehingga elemen Anda memiliki prioritas yang sama. Tapi kami agak kehilangan semua rasa manis Bootstrap dalam prosesnya.

Cara termudah untuk mengatasinya adalah dengan menetapkan ID arbitrer tambahan ke salah satu elemen root pada halaman Anda, seperti ini: <body id="bootstrap-overrides">

Dengan cara ini, Anda bisa mengawali pemilih CSS dengan ID Anda, langsung menambahkan 100 poin bobot ke elemen, dan mengabaikan definisi Bootstrap:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}
— smugglerFlynn
sumber
karena ID hanya dapat digunakan satu kali, mengapa tidak membuat #bootstrap-overrideskelas?
— chharvey
2
@ Chharvey: karena pada akhirnya Anda harus menghitung lebih baik. jika itu adalah kelas dalam contoh ini akan menjadi prio 11 dan jika definisi css akan setelah bootstrap.css maka kita akan baik-baik saja. Namun ini akan sangat dekat dan menetapkannya sebagai id yang meningkatkan prio waktu, kita tidak perlu khawatir tentang menghitung prio dan menguji sekeras apakah kita selalu benar. lebih mudah dengan id jika Anda ingin menimpa default secara definitif.
— hogan
hanya membuat hari saya. saya tahu ini dan masih terjebak mencoba mencari tahu mengapa gaya saya tidak ditafsirkan.
— hogan
3
Apakah poin yang Anda sebutkan (100 untuk id, 10 untuk kelas / kelas semu, 1 untuk pemilih tag / elemen semu) literal, atau apakah Anda hanya membuat nilai-nilai itu untuk contoh ini?
— Kyle Vassella
2
Penjelasan Anda baik, masuk akal sebagai cara untuk menjelaskannya kepada seseorang yang baru mengenal css, tetapi menyesatkan. Nama yang benar untuk apa yang Anda sebutkan adalah css specificityyang mendefinisikan "bobot" dari setiap pemilih css. Berikut ini beberapa perincian tentang hal itu: css-tricks.com/specifics-on-css-specificity/…
— Adriano
85

Di bagian kepala html Anda tempat custom.css Anda di bawah bootstrap.css.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Kemudian di custom.css Anda harus menggunakan pemilih yang sama persis untuk elemen yang ingin Anda timpa. Dalam hal legenditu hanya tinggal legenddi custom.css Anda karena bootstrap belum punya penyeleksi yang lebih spesifik

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

Tetapi dalam kasus h1misalnya Anda harus mengurus pemilih yang lebih spesifik seperti .jumbotron h1karena

h1 {
  line-height: 2;
  color: #f00;
}

tidak akan menimpa

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

Berikut ini adalah penjelasan spesifik tentang penyeleksi css yang perlu Anda pahami untuk mengetahui dengan pasti aturan gaya mana yang akan diterapkan pada suatu elemen. http://css-tricks.com/specifics-on-css-specificity/

Yang lainnya hanyalah masalah salin / tempel dan edit gaya.

— Markus Kottländer
sumber
28

Seharusnya tidak terlalu mempengaruhi waktu muat karena Anda mengganti bagian dari stylesheet dasar.

Berikut adalah beberapa praktik terbaik yang saya ikuti secara pribadi:

  1. Selalu muat CSS khusus setelah file CSS dasar (tidak responsif).
  2. Hindari penggunaan !importantjika memungkinkan. Itu dapat menimpa beberapa gaya penting dari file CSS dasar.
  3. Selalu muat bootstrap-responsif.css setelah custom.css jika Anda tidak ingin kehilangan kueri media. - HARUS MENGIKUTI
  4. Lebih suka memodifikasi properti yang diperlukan (tidak semua).
— Rahul Patil
sumber
10
karena bootstrap-responsive.csstidak ada lagi, apakah ini masih berlaku, atau apakah ini tidak relevan lagi?
— Shaun Wilson
20

Tautkan file custom.css Anda sebagai entri terakhir di bawah bootstrap.css. Definisi gaya Custom.css akan menimpa bootstrap.css

Html

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

Salin semua definisi gaya legenda di custom.css dan buat perubahan di dalamnya (seperti margin-bottom: 5px; - Ini akan overrider margin-bottom: 20px;)

— Paramasivan
sumber
Ya, saya sudah melakukannya. Maaf pertanyaan saya tidak jelas. Pertanyaan saya adalah menanyakan apa yang harus dilakukan di custom.css untuk mengganti style dari bootstrap.min.css.
— Alex
Bagaimana jika saya juga menggunakan bootstrap-theme.min.css?
— Quasaur
Bekerja untuk saya, bahkan dengan min css
— mimi
5

Untuk mengatur ulang gaya yang ditentukan legenddalam bootstrap, Anda dapat melakukan hal berikut dalam file css Anda:

legend {
  all: unset;
}

Ref: https://css-tricks.com/almanac/properties/a/all/

Semua properti di CSS me-reset semua properti elemen yang dipilih, kecuali properti direction dan unicode-bidi yang mengontrol arah teks.

Nilai yang mungkin adalah: initial, inherit& unset.

Catatan tambahan: clearproperti digunakan sehubungan dengan float( https://css-tricks.com/almanac/properties/c/clear/ )

— Vivek Athalye
sumber
3

Jika Anda berencana untuk membuat perubahan yang agak besar, mungkin ide yang baik untuk membuatnya langsung di bootstrap itu sendiri dan membangunnya kembali. Kemudian, Anda bisa mengurangi jumlah data yang dimuat.

Silakan lihat Bootstrap di GitHub untuk panduan build.

— Victor Häggqvist
sumber
Bergantung pada sejauh mana penyesuaian yang diperlukan, ini bisa menjadi pilihan paling sederhana. Misalnya, mengubah warna tema apa pun akan memerlukan begitu banyak penggantian sehingga saya lebih suka memilih perubahan templat, dan pembuatan kustom.
— David Kirkland
@alex Sumber Bump dan bangun kembali?
— Victor Häggqvist
3

Lihat https://bootstrap.themes.guide/how-to-customize-bootstrap.html

  1. Untuk Override CSS sederhana, Anda dapat menambahkan custom.css di bawah bootstrap.css

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

  2. Untuk perubahan yang lebih luas, SASS adalah metode yang direkomendasikan.

    • buat custom.scss Anda sendiri
    • impor Bootstrap setelah perubahan di custom.scss

    • Sebagai contoh, mari kita ubah warna latar belakang tubuh menjadi #eeeeee abu-abu terang, dan ubah warna kontekstual primer biru menjadi variabel $ ungu Bootstrap ...

      /* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
— konyak
sumber
2

Agak terlambat tapi yang saya lakukan adalah saya menambahkan kelas ke root divkemudian memperluas setiap elemen bootstrap di stylesheet khusus saya:

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}
<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>
— mr5
sumber
-1
  1. Periksa tombol target di konsol.
  2. Buka tab elemen lalu arahkan kursor ke kode dan pastikan untuk menemukan id atau kelas default yang digunakan oleh bootstrap.
  3. Gunakan jQuery / javascript untuk menimpa gaya / teks dengan memanggil fungsi.

Lihat contoh ini:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });
— Anand Chaudhary
sumber
-1

Saya menemukan bahwa (bootstrap 4) meletakkan CSS Anda sendiri di belakang bootstrap.css dan .js adalah solusi terbaik.

Temukan item yang ingin Anda ubah (periksa elemen) dan gunakan deklarasi yang sama persis maka itu akan menimpa.

Butuh sedikit waktu untuk memikirkan hal ini.

— Henry
sumber
-3

Berikan ID untuk legenda dan terapkan css. Seperti menambahkan id halo ke legenda () css adalah sebagai berikut:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
— Amar Gaur
sumber
-9

Gunakan jquery css, bukan css. . . jquery memiliki prioritas daripada bootstrap css ...

misalnya

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}
— Ajeet Sankhwal
sumber
6
HTML harus digunakan untuk menyediakan struktur, CSS harus digunakan untuk memberikan gaya, dan Javascript (termasuk jQuery) hanya boleh digunakan untuk menyediakan interaktivitas. Menggunakan jQuery untuk mengesampingkan gaya bertentangan dengan prinsip-prinsip arsitektur yang baik, dan akan sangat membingungkan bagi siapa pun yang mencoba mengerjakan kode 6 bulan dari sekarang.
— Stephen R. Smith
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.