ฉันต้องการเพิ่มคุณสมบัติการออกแบบที่ตอบสนองให้กับเว็บแอปพลิเคชันของฉันโดยใช้ Twitter Bootstrap ฉันแค่ต้องการพฤติกรรมที่ตอบสนองฉันไม่สนใจตัวอักษรส่วนประกอบหรือสิ่งอื่นใดที่รวมอยู่ใน Bootstrap
ฉันได้รับBootstrap เวอร์ชันที่กำหนดเองเพียงแค่เลือกระบบกริด อย่างไรก็ตามเมื่อฉันเพิ่ม CSS ที่สร้างขึ้นในแอปพลิเคชันของฉันสไตล์ทั้งหมดของฉันจะยุ่งเหยิง (ส่วนหัวลิงก์และอื่น ๆ ) เหตุใดจึงเกิดขึ้น ฉันจะรับ Bootstrap CSS ด้วยระบบกริดได้อย่างไร ฉันต้องการหลีกเลี่ยงการแก้ไขไฟล์ Bootstrap ด้วยตนเอง
คำตอบ:
ไปที่http://getbootstrap.com/customize/และสลับเฉพาะสิ่งที่คุณต้องการจากกรอบงาน BS3 จากนั้นคลิก "รวบรวมและดาวน์โหลด" คุณจะได้รับ CSS และ JS ที่คุณเลือก
เปิด CSS และลบทั้งหมดยกเว้นตาราง รวมถึงบางสิ่งที่ทำให้เป็นมาตรฐานด้วย และคุณจะต้องปรับเปลี่ยนรูปแบบทั้งหมดในไซต์ของคุณเป็น box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
กร้าzirafa / บูตตารางเท่านั้น มันมีเพียงตารางบูตและสาธารณูปโภคตอบสนองที่คุณต้องการ (ไม่มีการรีเซ็ตหรืออะไร) และช่วยลดความยุ่งยากซับซ้อนในการทำงานโดยตรงกับไฟล์น้อย
เพียงแค่เลือกGrid systemและ "ยูทิลิตี้ที่ตอบสนอง" จะให้สิ่งนี้แก่คุณ: http://jsfiddle.net/7LVzs/
สร้าง Grunt ด้วยกริด Bootstrap 3.3.5 เท่านั้น:
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
~ 10KB ย่อเล็กสุด
หากคุณต้องการชิ้นส่วนอื่น ๆ จาก Bootstrap เพียงรวมไว้ใน /src/less/bootstrap.less
ฉันขอแนะนำให้ใช้http://getpreboot.com/ของ MDO แทน ตั้งแต่เวอร์ชัน 2 prebootกลับพอร์ตมิกซ์อิน / ตัวแปร LESS ที่ใช้ในการสร้าง Bootstrap 3.0 Grid System และมีน้ำหนักเบากว่าการใช้ตัวสร้าง CSS ในความเป็นจริงถ้าคุณรวมเฉพาะpreboot.lessไม่มีค่าโสหุ้ยเนื่องจากไฟล์ทั้งหมดประกอบด้วย mixins / ตัวแปรดังนั้นจึงใช้ในการคอมไพล์ล่วงหน้าเท่านั้นไม่ใช่ผลลัพธ์สุดท้าย
ดูเหมือนว่าคุณสามารถดาวน์โหลดเฉพาะกริดได้แล้วในคุณสมบัติการดาวน์โหลดใหม่ของ Bootstrap 4s
เป็นเวลานานแล้วที่คำถามนี้ถูกถาม แต่ตอนนี้คุณสามารถละทิ้ง Bootstrap ไปพร้อมกันและใช้ CSS Grid ได้! (ง่ายกว่าเรียบร้อยยืดหยุ่นกว่าและเร็วกว่า) ดูบทความดีๆนี้: หยุดใช้ Bootstrap - สร้างเทมเพลต CSS Grid ที่ใช้งานได้จริงสำหรับ UI ที่ใช้ส่วนประกอบของคุณ
ใน Bootstrap 4 มีไฟล์ที่แยกไว้แล้วใน GitHub คุณสามารถค้นหาได้ที่นี่
https://github.com/twbs/bootstrap/tree/main/dist/css