Bootstrap

นั่งร้าน

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

หัวขึ้น! เอกสารเหล่านี้มีไว้สำหรับ v2.3.2 ซึ่งไม่ได้รับการสนับสนุนอย่างเป็นทางการอีกต่อไป ลองดู Bootstrap เวอร์ชันล่าสุด!

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

ต้องใช้ 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และJonathan Nealที่สนับสนุน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>

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

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

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

เลย์เอาต์

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

ให้เค้าโครงความกว้างคงที่ทั่วไป (และตอบสนองทางเลือก) ที่มี only<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 มองเห็นได้ มองเห็นได้

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

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

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

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

ปรากฏบน...

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

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

ซ่อนบน...

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

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