ฉันจะแทนที่สไตล์ Bootstrap CSS ได้อย่างไร

234

ฉันต้องแก้ไขbootstrap.cssเพื่อให้พอดีกับเว็บไซต์ของฉัน ฉันรู้สึกดีกว่าที่จะสร้างcustom.cssไฟล์แยกต่างหากแทนที่จะแก้ไขbootstrap.cssโดยตรงเหตุผลหนึ่งที่ควรbootstrap.cssได้รับการอัปเดตฉันจะพยายามรวมการแก้ไขทั้งหมดของฉันอีกครั้ง ฉันจะเสียสละเวลาโหลดสำหรับสไตล์เหล่านี้ แต่มันเล็กน้อยสำหรับสไตล์ที่ฉันกำลังเอาชนะ

ฉันจะแทนที่bootstrap.cssเพื่อที่ฉันจะลบสไตล์ของสมอ / คลาส? ตัวอย่างเช่นหากฉันต้องการลบกฎการจัดแต่งทรงผมทั้งหมดสำหรับ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;
}

ฉันสามารถลบได้ทั้งหมดbootstrap.cssแต่ถ้าความเข้าใจเกี่ยวกับแนวปฏิบัติที่ดีที่สุดในการเอาชนะ CSS นั้นถูกต้องฉันควรทำอย่างไร

เพื่อความชัดเจนฉันต้องการลบสไตล์ของตำนานทั้งหมดและใช้ค่า CSS ของพาเรนต์ ดังนั้นเมื่อรวมคำตอบของปราณาแล้วฉันจะทำสิ่งต่อไปนี้หรือไม่?

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;
}

(ฉันหวังว่าจะมีวิธีการทำสิ่งต่อไปนี้ :)

legend {
  clear: all;
}

html css twitter-bootstrap

— อเล็กซ์
แหล่งที่มา

491

การใช้!importantไม่ใช่ตัวเลือกที่ดีเนื่องจากคุณจะต้องการแทนที่สไตล์ของคุณเองในอนาคต นั่นทำให้เรามีความสำคัญ CSS

โดยพื้นฐานแล้วตัวเลือกทุกตัวมี 'น้ำหนัก' เป็นตัวเลขของตัวเอง:

100 คะแนนสำหรับรหัส
10 คะแนนสำหรับคลาสและคลาสเรียนเทียม
1 จุดสำหรับตัวเลือกแท็กและองค์ประกอบแบบหลอก
หมายเหตุ: หากองค์ประกอบนั้นมีการกำหนดสไตล์แบบอินไลน์ที่ชนะโดยอัตโนมัติ (1,000 คะแนน)

ในบรรดาเบราว์เซอร์สไตล์ตัวเลือกสองแบบจะเลือกแบบที่มีน้ำหนักมากกว่าเสมอ การสั่งซื้อสไตล์ชีทของคุณนั้นสำคัญเมื่อลำดับความสำคัญเท่ากันนั่นคือเหตุผลที่มันไม่ง่ายที่จะแทนที่ Bootstrap

ตัวเลือกของคุณคือการตรวจสอบแหล่งที่มาของ Bootstrap ค้นหาว่ามีการกำหนดสไตล์เฉพาะบางอย่างอย่างไรและคัดลอกตัวเลือกนั้นเพื่อให้องค์ประกอบของคุณมีลำดับความสำคัญเท่ากัน แต่เราปล่อยความหวาน Bootstrap ทั้งหมดในกระบวนการ

วิธีที่ง่ายที่สุดในการเอาชนะสิ่งนี้คือการกำหนด ID เพิ่มเติมให้กับหนึ่งในองค์ประกอบรูทบนหน้าของคุณเช่นนี้ <body id="bootstrap-overrides">

ด้วยวิธีนี้คุณสามารถนำหน้าตัวเลือก CSS ใด ๆ ที่มี ID ของคุณเพิ่มน้ำหนัก 100 คะแนนให้กับองค์ประกอบทันทีและแทนที่คำจำกัดความ 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
แหล่งที่มา

เนื่องจาก ID สามารถใช้ได้เพียงครั้งเดียวทำไมไม่สร้าง#bootstrap-overridesคลาส?

— chharvey

2

@chharvey: เพราะคุณจะต้องคำนวณให้ดีขึ้น ถ้ามันเป็นคลาสในตัวอย่างนี้มันจะเป็น prio 11 และถ้านิยาม css น่าจะเป็นหลังจาก bootstrap.css เราก็คงจะดี อย่างไรก็ตามนี่จะค่อนข้างใกล้เคียงและตั้งเป็นรหัสซึ่งช่วยเพิ่มเวลาอันยิ่งใหญ่ให้กับ Prio เราไม่ต้องกังวลกับการคำนวณ Prio และการทดสอบอย่างหนักว่าเราจะทำถูกต้องหรือไม่ ง่ายกว่าด้วยรหัสถ้าคุณต้องการเขียนทับค่าเริ่มต้นอย่างแน่นอน

— โฮแกน

เพิ่งทำวันของฉัน ฉันรู้สิ่งนี้และยังคงติดขัดอยู่พยายามคิดออกว่าทำไมสไตล์ของฉันจึงไม่ถูกตีความ

— โฮแกน

3

คะแนนที่คุณพูดถึง (100 สำหรับรหัส, 10 สำหรับชั้นเรียน / ชั้นเรียนหลอก, 1 สำหรับตัวเลือกแท็ก / องค์ประกอบหลอก) ตามตัวอักษรหรือคุณทำค่าเหล่านั้นขึ้นมาสำหรับตัวอย่างนี้?

— Kyle Vassella

2

คำอธิบายของคุณดีมากมันเป็นเหตุผลที่จะอธิบายให้คนที่เพิ่งรู้จักเป็นคนใหม่ แต่ไม่เข้าใจ ชื่อที่ถูกต้องสำหรับสิ่งที่คุณพูดถึงคือ css specificityซึ่งกำหนด "น้ำหนัก" ของตัวเลือก css แต่ละตัว นี่คือรายละเอียดเพิ่มเติมเกี่ยวกับมัน: css-tricks.com/specifics-on-css-specificity/ …

— Adriano

85

ในส่วนหัวของ html ของคุณวาง custom.css ของคุณด้านล่าง bootstrap.css

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

จากนั้นใน custom.css คุณจะต้องใช้ตัวเลือกเดียวกันสำหรับองค์ประกอบที่คุณต้องการแทนที่ ในกรณีที่legendมันอยู่legendใน custom.css ของคุณเพราะ bootstrap ไม่มีตัวเลือกใด ๆ ที่เฉพาะเจาะจงมากขึ้น

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

แต่ในกรณีh1เช่นคุณต้องดูแลตัวเลือกที่เฉพาะเจาะจงมากขึ้นเช่น.jumbotron h1เพราะ

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

จะไม่แทนที่

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

นี่คือการอธิบายที่เป็นประโยชน์เกี่ยวกับความจำเพาะของตัวเลือก css ซึ่งคุณต้องเข้าใจเพื่อทราบว่ากฎสไตล์จะใช้กับองค์ประกอบใด http://css-tricks.com/specifics-on-css-specificity/

ทุกอย่างอื่นเป็นเพียงเรื่องของการคัดลอก / วางและแก้ไขสไตล์

— Markus Kottländer
แหล่งที่มา

28

ไม่ควรส่งผลกระทบต่อความเร็วในการโหลดมากนักเนื่องจากคุณกำลังเอาชนะส่วนต่างๆของสไตล์ชีทพื้นฐาน

ต่อไปนี้เป็นแนวทางปฏิบัติที่ดีที่สุดที่ฉันติดตามเป็นการส่วนตัว:

โหลด CSS ที่กำหนดเองเสมอหลังจากไฟล์ CSS หลัก (ไม่ตอบสนอง)
หลีกเลี่ยงการใช้ !importantถ้าเป็นไปได้ ที่สามารถแทนที่สไตล์ที่สำคัญบางอย่างจากไฟล์ CSS ฐาน
โหลด bootstrap-responsive.css หลังจาก custom.css ทุกครั้งหากคุณไม่ต้องการสูญเสียข้อความค้นหาสื่อ - ต้องปฏิบัติตาม
ต้องการแก้ไขคุณสมบัติที่ต้องการ (ไม่ใช่ทั้งหมด)

— ราหุลพาติล
แหล่งที่มา

10

เนื่องจากbootstrap-responsive.cssไม่มีอยู่อีกต่อไปสิ่งนี้ยังคงเป็นจริงหรือไม่เกี่ยวข้องอีกต่อไปหรือไม่

— ฌอนวิลสัน

20

ลิงก์ไฟล์ custom.css ของคุณเป็นรายการสุดท้ายใต้ bootstrap.css นิยามลักษณะ Custom.css จะแทนที่ bootstrap.css

html

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

คัดลอกคำจำกัดความลักษณะทั้งหมดของคำอธิบายแผนภูมิใน custom.css และทำการเปลี่ยนแปลง (เช่นขอบล่าง: 5px; - สิ่งนี้จะแทนที่ขอบล่าง: 20px;)

— Paramasivan
แหล่งที่มา

ใช่ฉันทำไปแล้ว ขออภัยคำถามของฉันไม่ชัดเจน คำถามของฉันถามว่าจะทำอย่างไรใน custom.css เพื่อแทนที่สไตล์จาก bootstrap.min.css

— อเล็กซ์

ถ้าฉันใช้ bootstrap-theme.min.css ด้วยล่ะ?

— Quasaur

ทำงานให้ฉันได้แม้กับ min css

— mimi

5

หากต้องการรีเซ็ตสไตล์ที่กำหนดไว้legendใน bootstrap คุณสามารถทำตามในไฟล์ css ของคุณ:

legend {
  all: unset;
}

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

คุณสมบัติทั้งหมดใน CSS รีเซ็ตคุณสมบัติทั้งหมดขององค์ประกอบที่เลือกยกเว้นทิศทางและคุณสมบัติ unicode-bidi ที่ควบคุมทิศทางข้อความ

ค่าที่เป็นไปได้initial, และinheritunset

หมายเหตุด้านข้าง: clearคุณสมบัติถูกใช้ในความสัมพันธ์กับfloat( https://css-tricks.com/almanac/properties/c/clear/ )

— วิเวก Athalye
แหล่งที่มา

3

หากคุณวางแผนที่จะทำการเปลี่ยนแปลงใด ๆ ที่ค่อนข้างใหญ่มันเป็นความคิดที่ดีที่จะทำการเปลี่ยนแปลงโดยตรงใน bootstrap และสร้างใหม่ จากนั้นคุณสามารถลดปริมาณข้อมูลที่โหลดได้

โปรดดูBootstrap บน GitHubสำหรับคำแนะนำในการสร้าง

— วิกเตอร์Häggqvist
แหล่งที่มา

ขึ้นอยู่กับขอบเขตของการปรับแต่งที่จำเป็นซึ่งอาจเป็นตัวเลือกที่ง่ายที่สุด ตัวอย่างเช่นการเปลี่ยนสีของธีมใด ๆ จะต้องมีการแทนที่มากมายที่ฉันอยากจะเลือกสำหรับการเปลี่ยนแปลงเทมเพลตและการสร้างที่กำหนดเอง

— David Kirkland

@alex Bump แหล่งและสร้างใหม่หรือไม่

— Victor Häggqvist

3

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

สำหรับการแทนที่ CSS อย่างง่ายคุณสามารถเพิ่ม custom.css ด้านล่าง bootstrap.css
```
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
```
สำหรับการเปลี่ยนแปลงเพิ่มเติม SASS เป็นวิธีที่แนะนำ
- สร้าง custom.scs ของคุณเอง
- นำเข้า Bootstrap หลังจากการเปลี่ยนแปลงใน custom.scss
- ตัวอย่างเช่นลองเปลี่ยนสีพื้นหลังของร่างกายเป็นสีเทา #eeeeee และเปลี่ยนสีบริบทหลักสีน้ำเงินเป็นตัวแปร $ ม่วงของ 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
แหล่งที่มา

2

ช้าไปหน่อย แต่สิ่งที่ฉันทำก็คือฉันเพิ่มคลาสไปที่รูทdivแล้วขยายองค์ประกอบ bootstrap ทั้งหมดในสไตล์ชีทที่กำหนดเองของฉัน:

.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
แหล่งที่มา

-1

ตรวจสอบปุ่มเป้าหมายบนคอนโซล
ไปที่แท็บองค์ประกอบจากนั้นเลื่อนเมาส์ไปวางเหนือรหัสและอย่าลืมค้นหารหัสเริ่มต้นหรือคลาสที่ใช้โดย bootstrap
ใช้ jQuery / javascript เพื่อเขียนทับสไตล์ / ข้อความโดยเรียกใช้ฟังก์ชัน

ดูตัวอย่างนี้:

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

— อานันท์โชวรี
แหล่งที่มา

-1

ฉันพบว่า (bootstrap 4) วาง CSS ของคุณไว้ข้างหลัง bootstrap.cssและ. js เป็นทางออกที่ดีที่สุด

ค้นหารายการที่คุณต้องการเปลี่ยน (ตรวจสอบองค์ประกอบ) และใช้การประกาศเดียวกันที่แน่นอนจากนั้นจะแทนที่

ฉันใช้เวลาเล็กน้อยในการคิดออก

— เฮนรี่
แหล่งที่มา

-3

ให้ ID กับคำอธิบายแผนภูมิและใช้ css เช่นเดียวกับเพิ่ม id hello to legend () css นั้นเป็น follw:

#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
แหล่งที่มา

-9

ใช้ jquery css แทน css . . jquery มีลำดับความสำคัญมากกว่า bootstrap css ...

เช่น

$(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
แหล่งที่มา

6

ควรใช้ HTML เพื่อจัดทำโครงสร้าง CSS ควรใช้เพื่อจัดเตรียมสไตล์และ Javascript (รวมถึง jQuery) ควรใช้เพื่อให้มีการโต้ตอบเท่านั้น การใช้ jQuery เพื่อลบล้างลักษณะเป็นสิ่งที่ตรงกันข้ามกับหลักการของสถาปัตยกรรมที่ดีและจะสร้างความสับสนให้กับทุกคนที่พยายามทำงานกับโค้ด 6 เดือนนับจากนี้

— สตีเฟ่นอาร์สมิ ธ