Bootstrap

นั่งร้าน

Bootstrap สร้างขึ้นบนกริด 12 คอลัมน์ เลย์เอาต์ และส่วนประกอบ

การตั้งค่าส่วนกลาง

ต้องใช้ HTML5 doctype

Bootstrap ใช้ประโยชน์จากองค์ประกอบ HTML และคุณสมบัติ CSS บางอย่างที่ต้องใช้ประเภทเอกสาร HTML5 รวมไว้ที่จุดเริ่มต้นของโครงการทั้งหมดของคุณ

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

วิชาการพิมพ์และลิงค์

Bootstrap ตั้งค่าการแสดงผลแบบโกลบอล ตัวพิมพ์ และสไตล์ลิงก์ โดยเฉพาะอย่างยิ่ง เรา:

  • ลอกออกmarginตามร่างกาย
  • ตั้งbackground-color: white;อยู่บนbody
  • ใช้@baseFontFamily, @baseFontSize, และ@baseLineHeightคุณลักษณะเป็นฐานการพิมพ์ของเรา
  • กำหนดสีลิงค์สากลผ่าน@linkColorและใช้ลิงค์ที่ขีดเส้นใต้เท่านั้นบน:hover

รูปแบบเหล่านี้สามารถพบได้ในscaffolding.less

รีเซ็ตผ่าน Normalize

ด้วย Bootstrap 2 บล็อกการรีเซ็ตแบบเก่าได้ถูกทิ้งให้ใช้งานNormalize.cssซึ่งเป็นโปรเจ็กต์ของNicolas Gallagherที่ขับเคลื่อนHTML5 Boilerplateด้วย ในขณะที่เราใช้ Normalize ส่วนใหญ่ในreset.less ของ เรา เราได้ลบองค์ประกอบบางอย่างสำหรับ Bootstrap โดยเฉพาะ

ระบบกริดเริ่มต้น

ตัวอย่างตารางสด

ระบบกริด Bootstrap เริ่มต้นใช้12 คอลัมน์ทำให้คอนเทนเนอร์กว้าง 940px โดยไม่เปิดใช้งานคุณสมบัติตอบสนอง เมื่อเพิ่มไฟล์ CSS ที่ตอบสนอง ตารางจะปรับให้กว้าง 724px และ 1170px ขึ้นอยู่กับวิวพอร์ตของคุณ ด้านล่างของวิวพอร์ต 767px คอลัมน์จะกลายเป็นแบบไหลและซ้อนกันในแนวตั้ง

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML กริดพื้นฐาน

สำหรับเค้าโครงสองคอลัมน์อย่างง่าย ให้สร้าง a .rowและเพิ่มจำนวน.span*คอลัมน์ที่เหมาะสม เนื่องจากตารางนี้เป็นตาราง 12 คอลัมน์ แต่ละคอลัมน์จึง.span*ครอบคลุม 12 คอลัมน์ดังกล่าว และควรรวมกันได้ไม่เกิน 12 สำหรับแต่ละแถว (หรือจำนวนคอลัมน์ในพาเรนต์)

  1. < คลาสdiv = "แถว" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

จากตัวอย่างนี้ เรามี.span4และ.span8ทำให้มีทั้งหมด 12 คอลัมน์และเป็นแถวที่สมบูรณ์

คอลัมน์ออฟเซ็ต

ย้ายคอลัมน์ไปทางขวาโดยใช้.offset*คลาส แต่ละชั้นจะเพิ่มระยะขอบด้านซ้ายของคอลัมน์โดยทั้งคอลัมน์ ตัวอย่างเช่น.offset4ย้าย.span4มากกว่าสี่คอลัมน์

4
3 ออฟเซ็ต 2
3 ออฟเซ็ต 1
3 ออฟเซ็ต 2
6 ออฟเซ็ต 3 
  1. < คลาสdiv = "แถว" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

เสาทำรัง

หากต้องการซ้อนเนื้อหาของคุณด้วยกริดเริ่มต้น ให้เพิ่มคอลัมน์ใหม่.rowและชุดของ.span*คอลัมน์ภายในคอลัมน์ที่มี.span*อยู่ แถวที่ซ้อนกันควรมีชุดของคอลัมน์ที่รวมกันเป็นจำนวนคอลัมน์ของพาเรนต์

คอลัมน์ระดับ 1
ระดับ 2
ระดับ 2 
  1. < คลาสdiv = "แถว" > 
  2.   < คลาสdiv = "span9" > 
  3.     คอลัมน์ระดับ 1
  4.     < คลาสdiv = "แถว" > 
  5.       <div class = "span6" > ระดับ 2 </div> 
  6.       <div class = "span3" > ระดับ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ระบบกริดของไหล

ตัวอย่างกริดของเหลวสด

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML กริดของเหลวพื้นฐาน

สร้างแถว "ของเหลว" โดยเปลี่ยน.rowเป็น.row-fluid. คลาสคอลัมน์ยังคงเหมือนเดิม ทำให้ง่ายต่อการพลิกระหว่างกริดแบบตายตัวและกริดแบบไหล

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

การชดเชยของไหล

ดำเนินการในลักษณะเดียวกับการชดเชยระบบกริดแบบตายตัว: เพิ่ม.offset*ไปยังคอลัมน์ใดก็ได้เพื่อชดเชยด้วยคอลัมน์จำนวนมากนั้น

4
4 ออฟเซ็ต 4
3 ออฟเซ็ต 3
3 ออฟเซ็ต 3
6 ออฟเซ็ต 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

การทำรังของไหล

การซ้อนด้วยกริดแบบไหลแตกต่างกันเล็กน้อย: จำนวนคอลัมน์ที่ซ้อนกันไม่ควรตรงกับจำนวนคอลัมน์ของผู้ปกครอง แต่จะมีการรีเซ็ตคอลัมน์ที่ซ้อนกันแต่ละระดับเนื่องจากแต่ละแถวใช้พื้นที่ 100% ของคอลัมน์หลัก

ของเหลว 12
ของเหลว 6
ของเหลว 6 
  1. <div class = "row-fluid" > 
  2.   < คลาสdiv = "span12" > 
  3.     ของเหลว 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > ของเหลว 6 </div> 
  6.       <div class = "span6" > ของเหลว 6 </div> 
  7.     </div>
  8.   </div>
  9. </div>

เลย์เอาต์

เค้าโครงคงที่

จัดเตรียมเลย์เอาต์ความกว้างคงที่ทั่วไป (และตอบสนองทางเลือก) ที่<div class="container">จำเป็น เท่านั้น

  1. <body>
  2.   < คลาสdiv = "คอนเทนเนอร์" > 
  3.     ...
  4.   </div>
  5. </body>

เลย์เอาต์ของไหล

สร้างหน้าสองคอลัมน์แบบไหลได้ — ยอด<div class="container-fluid">เยี่ยมสำหรับแอปพลิเคชันและเอกสาร

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     < คลาสdiv = "span2" > 
  4.       <!--เนื้อหาแถบด้านข้าง-->
  5.     </div>
  6.     < คลาสdiv = "span10" > 
  7.       <!--เนื้อหาเนื้อหา-->
  8.     </div>
  9.   </div>
  10. </div>

การออกแบบที่ตอบสนอง

เปิดใช้งานคุณสมบัติตอบสนอง

เปิด CSS ที่ตอบสนองในโปรเจ็กต์ของคุณโดยใส่เมตาแท็กที่เหมาะสมและสไตล์ชีตเพิ่มเติมใน<head>เอกสารของคุณ หากคุณได้รวบรวม Bootstrap จากหน้าปรับแต่ง คุณจะต้องรวมเมตาแท็กเท่านั้น

  1. < ชื่อ เมตา = เนื้อหา"วิวพอร์ต" = "ความกว้าง=ความกว้างของอุปกรณ์ มาตราส่วนเริ่มต้น=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

เกี่ยวกับ Bootstrap ตอบสนอง

อุปกรณ์ตอบสนอง

คิวรี่สื่ออนุญาตให้ใช้ CSS ที่กำหนดเองตามเงื่อนไขหลายประการ เช่น อัตราส่วน ความกว้าง ประเภทการแสดงผล ฯลฯ—แต่มักจะเน้นไปรอบๆmin-widthและmax-width

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

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

อุปกรณ์ที่รองรับ

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

ฉลาก ความกว้างของเค้าโครง ความกว้างของคอลัมน์ ความกว้างของรางน้ำ
จอแสดงผลขนาดใหญ่ 1200px ขึ้นไป 70px 30px
ค่าเริ่มต้น 980px ขึ้นไป 60px 20px
แท็บเล็ตแนวตั้ง 768px ขึ้นไป 42px 20px
โทรศัพท์ไปยังแท็บเล็ต 767px และต่ำกว่า คอลัมน์ของเหลวไม่มีความกว้างคงที่
โทรศัพท์ 480px และต่ำกว่า คอลัมน์ของเหลวไม่มีความกว้างคงที่ 
  1. /* เดสก์ท็อปขนาดใหญ่ */
  2. @media ( ความกว้างต่ำสุด: 1200px ) { ... }     
  3.  
  4. /* แท็บเล็ตแนวตั้งเป็นแนวนอนและเดสก์ท็อป */
  5. @media ( ความกว้างต่ำสุด: 768px ) และ( ความกว้างสูงสุด: 979px ) { ... }        
  6.  
  7. /* โทรศัพท์แนวนอนเป็นแท็บเล็ตแนวตั้ง */
  8. @media ( ความกว้างสูงสุด: 767px ) { ... }     
  9.  
  10. /* โทรศัพท์แนวนอนและลง */
  11. @media ( ความกว้างสูงสุด: 480px ) { ... }

คลาสยูทิลิตี้ที่ตอบสนอง

เพื่อการพัฒนาที่เป็นมิตรกับอุปกรณ์พกพาที่รวดเร็วขึ้น ให้ใช้คลาสยูทิลิตี้เหล่านี้เพื่อแสดงและซ่อนเนื้อหาตามอุปกรณ์ ด้านล่างนี้คือตารางของคลาสที่มีอยู่และผลกระทบต่อเค้าโครงคิวรีสื่อที่กำหนด (ติดป้ายกำกับโดยอุปกรณ์) สามารถพบได้responsive.lessใน

ระดับ โทรศัพท์767px และต่ำกว่า แท็บเล็ต979px ถึง 768px เดสก์ท็อปค่าเริ่มต้น
.visible-phone มองเห็นได้
.visible-tablet มองเห็นได้
.visible-desktop มองเห็นได้
.hidden-phone มองเห็นได้ มองเห็นได้
.hidden-tablet มองเห็นได้ มองเห็นได้
.hidden-desktop มองเห็นได้ มองเห็นได้

เมื่อใดควรใช้

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

กรณีทดสอบสาธารณูปโภคที่ตอบสนอง

ปรับขนาดเบราว์เซอร์ของคุณหรือโหลดบนอุปกรณ์ต่าง ๆ เพื่อทดสอบคลาสข้างต้น

ปรากฏบน...

เครื่องหมายถูกสีเขียวแสดงว่าคลาสปรากฏในวิวพอร์ตปัจจุบันของคุณ

  • โทรศัพท์✔โทรศัพท์
  • ยาเม็ด✔แท็บเล็ต
  • เดสก์ทอป✔เดสก์ท็อป

ซ่อนบน...

ที่นี่ เครื่องหมายถูกสีเขียวแสดงว่าคลาสถูกซ่อนอยู่ในวิวพอร์ตปัจจุบันของคุณ

  • โทรศัพท์✔โทรศัพท์
  • ยาเม็ด✔แท็บเล็ต
  • เดสก์ทอป✔เดสก์ท็อป