การปรับแต่งเทมเพลต Bootstrap CSS

ฉันเพิ่งเริ่มใช้ Bootstrap จาก Twitter และฉันสงสัยว่า 'แนวทางปฏิบัติที่ดีที่สุด' สำหรับการปรับแต่งคืออะไร ฉันต้องการพัฒนาระบบที่จะใช้ประโยชน์จากพลังทั้งหมดของเทมเพลต css (Bootstrap หรืออื่น ๆ ) แก้ไขได้อย่างสมบูรณ์ (และง่าย) มีความยั่งยืน (กล่าวคือ - เมื่อ Bootstrap เวอร์ชันถัดไปออกจาก Twitter ฉันจะไม่ '' ต้องเริ่มต้นใหม่

ตัวอย่างเช่นฉันต้องการเพิ่มภาพพื้นหลังในการนำทางด้านบน ดูเหมือนว่าจะมี 3 วิธีในการดำเนินการนี้:

1. ปรับเปลี่ยนคลาส. topbar ใน bootstrap.css ฉันไม่ชอบสิ่งนี้เป็นพิเศษเพราะฉันจะมีรายการ. topbar จำนวนมากและฉันไม่จำเป็นต้องแก้ไขด้วยวิธีเดียวกันทั้งหมด
2. สร้างคลาสใหม่ด้วยภาพพื้นหลังของฉันและใช้ทั้งสองสไตล์ (ใหม่และ bootstrap กับองค์ประกอบของฉัน) สิ่งนี้อาจสร้างความขัดแย้งของรูปแบบซึ่งสามารถหลีกเลี่ยงได้โดยการแยกคลาส. topbar ออกเป็นคลาสแยกจากนั้นใช้เฉพาะส่วนที่คลาสที่กำหนดเองของฉันไม่ได้เหยียบ อีกครั้งสิ่งนี้ต้องใช้งานมากกว่าที่ฉันคิดว่าควรจำเป็นและในขณะที่มีความยืดหยุ่น แต่ก็ไม่อนุญาตให้ฉันอัปเดต bootstrap.css ได้อย่างง่ายดายเมื่อ Twitter ออกงวดถัดไป
3. ใช้ตัวแปรใน. LESS เพื่อให้ได้การปรับแต่ง สิ่งนี้ดูเหมือนจะเป็นแนวทางที่ดี แต่ไม่ได้ใช้ฉันไม่มีข้อกังวลเกี่ยวกับการรวบรวม css บนไคลเอนต์และเกี่ยวกับความยั่งยืนของโค้ด

แม้ว่าฉันจะใช้ Bootstrap แต่คำถามนี้สามารถสรุปได้กับเทมเพลต css ใด ๆ

ขอบคุณล่วงหน้าสำหรับการป้อนข้อมูล

สิ่งที่ดีที่สุดที่ควรทำคือ

1. แยก twitter-bootstrap จาก github และโคลนในเครื่อง

พวกเขากำลังเปลี่ยนไลบรารี / เฟรมเวิร์กอย่างรวดเร็ว (มันแตกต่างกันภายในบางคนชอบไลบรารีฉันก็บอกว่ามันเป็นเฟรมเวิร์กเพราะเปลี่ยนเลย์เอาต์ของคุณจากเวลาที่คุณโหลดบนเพจของคุณ) ดี ... การปลอม / การโคลนจะช่วยให้คุณสามารถดึงเวอร์ชันใหม่ที่กำลังจะมาถึงได้อย่างง่ายดาย

2. อย่าแก้ไขไฟล์ bootstrap.css

มันจะทำให้ชีวิตของคุณซับซ้อนขึ้นเมื่อคุณต้องการอัพเกรด bootstrap (และคุณจะต้องทำ)

3. สร้างไฟล์ css ของคุณเองและเขียนทับเมื่อใดก็ตามที่คุณต้องการเนื้อหา bootstrap ดั้งเดิม

หากพวกเขาตั้งค่าแถบด้านบนด้วยสมมติว่าcolor: black;แต่คุณทำให้มันเป็นสีขาวให้สร้างตัวเลือกใหม่ที่เฉพาะเจาะจงสำหรับแถบด้านบนนี้และใช้กฎนี้กับแถบด้านบนเฉพาะ <table class="zebra-striped mycustomclass">สำหรับตารางตัวอย่างเช่นมันจะเป็น หากคุณประกาศไฟล์ css ของคุณหลังจากbootstrap.cssนั้นสิ่งนี้จะเขียนทับสิ่งที่คุณต้องการ

อัปเดต 2019 - Bootstrap 4

ฉันกำลังทบทวนคำถามการปรับแต่ง Bootstrap สำหรับ 4.x ซึ่งตอนนี้ใช้SASSแทน LESS โดยทั่วไปมี 2 วิธีในการปรับแต่ง Bootstrap ...

1. การแทนที่ CSS อย่างง่าย

วิธีหนึ่งในการปรับแต่งคือการใช้ CSS เพื่อแทนที่ Bootstrap CSS สำหรับความสามารถในการบำรุงรักษาการปรับแต่ง CSS จะถูกใส่ไว้ในcustom.cssไฟล์แยกต่างหากเพื่อให้ส่วนที่bootstrap.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">

เพียงเพิ่มการเปลี่ยนแปลงที่จำเป็นใน CSS ที่กำหนดเอง ตัวอย่างเช่น...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

ก่อนหน้า ( bootstrap.css)

หลัง (ด้วยcustom.css)

เมื่อทำการปรับแต่งคุณควรเข้าใจCSS จำเพาะ แทนที่ความcustom.cssจำเป็นในการใช้ตัวเลือกที่เฉพาะเจาะจงเช่นเดียวกับbootstrap.css.

หมายเหตุมีความจำเป็นต้องใช้ไม่ได้!importantใน CSS ที่กำหนดเองถ้าคุณกำลังเอาชนะหนึ่งในชั้นเรียน Bootstrap ยูทิลิตี้ ความจำเพาะของ CSS ใช้ได้กับคลาส CSS หนึ่งเพื่อแทนที่อีกคลาสหนึ่ง

2. ปรับแต่งโดยใช้ SASS

ถ้าคุณคุ้นเคยกับSASS (และคุณควรจะใช้วิธีนี้) คุณสามารถปรับแต่ง Bootstrap custom.scssกับของคุณเอง มีส่วนหนึ่งในเอกสาร Bootstrapที่อธิบายถึงเรื่องนี้อย่างไรก็ตามเอกสารไม่ได้อธิบายวิธีใช้ตัวแปรที่มีอยู่ในcustom.scssไฟล์. ตัวอย่างเช่นลองเปลี่ยนสีพื้นหลังของร่างกายเป็น#eeeeeeและเปลี่ยน / แทนที่สีprimaryตามบริบทสีน้ำเงินเป็น$purpleตัวแปรของ Bootstrap ...

/* custom.scss */    

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

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

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

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

นอกจากนี้ยังทำงานเพื่อสร้างชั้นเรียนที่กำหนดเองใหม่ ยกตัวอย่างเช่นที่นี่ฉันจะเพิ่มpurpleสีรูปแบบซึ่งจะสร้างทั้งหมด CSS สำหรับbtn-purple, text-purple, bg-purple, alert-purpleฯลฯ ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

ด้วย SASS คุณต้อง@import bootstrap หลังจากปรับแต่งเพื่อให้ใช้งานได้! เมื่อคอมไพล์ SASS เป็น CSS ( ต้องทำโดยใช้คอมไพเลอร์ SASS node-sass, gulp-sass, npm webpack เป็นต้น ) CSS ที่ได้คือ Bootstrap ที่กำหนดเอง หากคุณไม่คุ้นเคยกับ SASS คุณสามารถปรับแต่ง Bootstrap โดยใช้เครื่องมือเช่นตัวสร้างธีมที่ฉันสร้างขึ้น

Custom Bootstrap Demo (SASS)

หมายเหตุ: แตกต่างจาก 3.x Bootstrap 4.x ไม่มีเครื่องมือปรับแต่งอย่างเป็นทางการ อย่างไรก็ตามคุณสามารถดาวน์โหลดกริดเฉพาะ CSSหรือใช้เครื่องมือสร้างแบบกำหนดเอง 4.xอื่นเพื่อสร้าง Bootstrap 4 CSS ใหม่ได้ตามต้องการ

ที่เกี่ยวข้อง:
วิธีการขยาย / แก้ไข (ปรับแต่ง) Bootstrap 4 ด้วย SASS
จะเปลี่ยนสีหลักของ bootstrap ได้อย่างไร?
วิธีสร้างชุดรูปแบบสีใหม่ใน Bootstrap 4 ด้วย sass
วิธีปรับแต่ง Bootstrap

ฉันคิดว่าวิธีที่ต้องการอย่างเป็นทางการในตอนนี้คือการใช้ Less และแทนที่ bootstrap.css แบบไดนามิก (โดยใช้ less.js) หรือ recompile bootstrap.css (โดยใช้ Node หรือ Less compiler)

จากเอกสาร Bootstrapนี่คือวิธีการแทนที่สไตล์ bootstrap.css แบบไดนามิก:

ดาวน์โหลด Less.js ล่าสุดและรวมพา ธ ไปยังมัน (และ Bootstrap) ในไฟล์<head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

ในการคอมไพล์ไฟล์ .less อีกครั้งเพียงแค่บันทึกและโหลดหน้าของคุณใหม่ Less.js รวบรวมและจัดเก็บไว้ในที่จัดเก็บในตัวเครื่อง

หรือถ้าคุณต้องการรวบรวม bootstrap.css ใหม่แบบคงที่ด้วยสไตล์ที่กำหนดเองของคุณ (สำหรับสภาพแวดล้อมการใช้งานจริง):

ติดตั้งเครื่องมือบรรทัดคำสั่ง LESS ผ่าน Node และรันคำสั่งต่อไปนี้:

$ lessc ./less/bootstrap.less > bootstrap.css

เนื่องจากคำตอบของ Pabluez ในเดือนธันวาคมจึงมีวิธีที่ดีกว่าในการปรับแต่ง Bootstrap

ใช้: Bootswatchเพื่อสร้าง bootstrap.css ของคุณ

Bootswatch สร้าง Twitter Bootstrap ปกติจากเวอร์ชันล่าสุด (สิ่งที่คุณติดตั้งในไดเรกทอรี bootstrap) แต่ยังนำเข้าการปรับแต่งของคุณ ทำให้ง่ายต่อการใช้ Bootstrap เวอร์ชันล่าสุดในขณะที่ยังคงรักษา CSS แบบกำหนดเองโดยไม่ต้องเปลี่ยนแปลงอะไรเกี่ยวกับ HTML ของคุณ คุณสามารถเปิดไฟล์ boostrap.css

คุณสามารถใช้เทมเพลต bootstrap ได้จาก

http://www.initializr.com/

ซึ่งรวมถึงไฟล์ bootstrap .less ทั้งหมด จากนั้นคุณสามารถเปลี่ยนตัวแปร / อัปเดตไฟล์น้อยได้ตามที่คุณต้องการและมันจะรวบรวม css โดยอัตโนมัติ เมื่อปรับใช้คอมไพล์ไฟล์ less ไปยัง css

ตัวเลือกที่ดีที่สุดในความคิดของฉันคือการรวบรวมไฟล์ LESS ที่กำหนดเองซึ่งรวมถึง bootstrap.less, ไฟล์ variable.less ที่กำหนดเองและกฎของคุณเอง:

1. โคลน bootstrap ในโฟลเดอร์รูทของคุณ: git clone https://github.com/twbs/bootstrap.git
2. เปลี่ยนชื่อเป็น "bootstrap"
3. สร้างไฟล์ package.json: https://gist.github.com/jide/8440609
4. สร้าง Gruntfile.js: https://gist.github.com/jide/8440502
5. สร้างโฟลเดอร์ "less"
6. คัดลอก bootstrap / less / parameters.less ลงในโฟลเดอร์ "less"
7. เปลี่ยนเส้นทางแบบอักษร: @icon-font-path: "../bootstrap/fonts/";
8. สร้างไฟล์ style.less ที่กำหนดเองในโฟลเดอร์ "less" ซึ่งนำเข้า bootstrap.less และไฟล์ variable.less ที่กำหนดเองของคุณ: https://gist.github.com/jide/8440619
9. วิ่ง npm install
10. วิ่ง grunt watch

ตอนนี้คุณสามารถปรับเปลี่ยนตัวแปรได้ตามที่คุณต้องการแทนที่กฎ bootstrap ในไฟล์ style.less ที่กำหนดเองของคุณและหากวันใดคุณต้องการอัปเดต bootstrap คุณสามารถแทนที่โฟลเดอร์ bootstrap ทั้งหมดได้!

แก้ไข: ฉันสร้าง Boilerplate Bootstrap โดยใช้เทคนิคนี้: https://github.com/jide/bootstrap-boilerplate

ฉันเพิ่งเขียนโพสต์เกี่ยวกับวิธีที่ฉันทำที่Udacityในช่วงสองสามปีที่ผ่านมา วิธีนี้หมายความว่าเราสามารถอัปเดต Bootstrap ได้ทุกเมื่อที่เราต้องการโดยไม่ต้องรวมความขัดแย้งทิ้งงาน ฯลฯ

โพสต์นี้มีตัวอย่างในเชิงลึกมากขึ้น แต่แนวคิดพื้นฐานคือ:

• เก็บสำเนา bootstrap ที่บริสุทธิ์และเขียนทับไว้ภายนอก
• แก้ไขไฟล์หนึ่งไฟล์ (variable.less ของ bootstrap) เพื่อรวมตัวแปรของคุณเอง
• สร้างไฟล์ไซต์ของคุณเป็น @include bootstrap.less แล้วทำการแทนที่ของคุณ

นี่หมายถึงการใช้ LESS และรวบรวมลงใน CSS ก่อนที่จะส่งไปยังลูกค้า (ฝั่งไคลเอ็นต์น้อยถ้าจู้จี้จุกจิกและฉันมักจะหลีกเลี่ยง) แต่เป็นสิ่งที่ดีอย่างมากสำหรับการบำรุงรักษา / ความสามารถในการอัพเกรดและการรวบรวม LESS นั้นง่ายมาก . รหัส github ที่เชื่อมโยงมีตัวอย่างที่ใช้คำราม แต่มีหลายวิธีในการบรรลุสิ่งนี้แม้กระทั่ง GUI หากนั่นคือสิ่งที่คุณต้องการ

เมื่อใช้วิธีนี้ปัญหาตัวอย่างของคุณจะมีลักษณะดังนี้:

• เปลี่ยนสีแถบนำทางด้วย @ navbar-inverse-bg ในตัวแปรของคุณless (ไม่ใช่ bootstrap's)
• เพิ่มสไตล์แถบนำทางของคุณเองใน bootstrap_overrides.less ของคุณโดยเขียนทับสิ่งที่คุณต้องการในขณะที่คุณไป
• ความสุข.

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

บล็อกโพสต์ด้วยการเดินผ่านเป็นที่นี่

ตัวอย่างโค้ดบน GitHub เป็นที่นี่

ใช้ LESS กับ Bootstrap ...

นี่คือเอกสาร Bootstrap สำหรับวิธีใช้ LESS

(พวกเขาย้ายไปตั้งแต่คำตอบก่อนหน้านี้)