Bootstrap

นั่งร้าน

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

สไตล์สากลสำหรับการรีเซ็ต CSS การพิมพ์และลิงก์

ต้องใช้ HTML5 doctype

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

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

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

ภายใน ไฟล์ scaffolding.lessเราตั้งค่าการแสดงผลสากล การพิมพ์ และรูปแบบลิงก์ โดยเฉพาะอย่างยิ่ง เรา:

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

รีเซ็ตผ่าน Normalize

ใน Bootstrap 2 การรีเซ็ต CSS แบบดั้งเดิมได้พัฒนาขึ้นเพื่อใช้ประโยชน์จากองค์ประกอบจากNormalize.cssซึ่งเป็นโครงการโดยNicolas Gallagherที่ขับเคลื่อนHTML5 Boilerplateด้วย

การรีเซ็ตใหม่ยังสามารถพบได้ในreset.lessแต่ด้วยองค์ประกอบหลายอย่างที่ถูกลบออกเพื่อความกระชับและความแม่นยำ

ระบบกริดเริ่มต้น12 คอลัมน์พร้อมการบิดตอบสนอง

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

ระบบกริดเริ่มต้นที่ให้ไว้เป็นส่วนหนึ่งของ Bootstrap คือ กริด 12 คอลัมน์ กว้าง940px

นอกจากนี้ยังมีรูปแบบที่ตอบสนองสี่รูปแบบสำหรับอุปกรณ์และความละเอียดต่างๆ: โทรศัพท์ แนวตั้งแท็บเล็ต แนวนอนแท็บเล็ตและเดสก์ท็อปขนาดเล็ก และเดสก์ท็อปแบบจอกว้างขนาดใหญ่

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

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


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

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

เสาทำรัง

ด้วยระบบกริดแบบคงที่ (ที่ไม่ใช่ของไหล) ใน Bootstrap การซ้อนทำได้ง่าย ในการซ้อนเนื้อหาของคุณ เพียงเพิ่มคอลัมน์ใหม่.rowและชุดของ.span*คอลัมน์ภายในคอลัมน์ที่มี.span*อยู่

ตัวอย่าง

แถวที่ซ้อนกันควรมีชุดของคอลัมน์ที่รวมกันเป็นจำนวนคอลัมน์ของพาเรนต์ ตัวอย่างเช่น.span3ควรวางคอลัมน์ที่ซ้อนกันสองคอลัมน์ภายในไฟล์.span6.

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

ระบบกริดของไหล12 คอลัมน์ที่ตอบสนองตามเปอร์เซ็นต์

คอลัมน์ของเหลว

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

เปอร์เซ็นต์ ไม่ใช่พิกเซล

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

แถวของเหลว

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

มาร์กอัป

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

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

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

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

การปรับแต่งกริด

ตัวแปร ค่าเริ่มต้น คำอธิบาย
@gridColumns 12 จำนวนคอลัมน์
@gridColumnWidth 60px ความกว้างของแต่ละคอลัมน์
@gridGutterWidth 20px ช่องว่างเชิงลบระหว่างคอลัมน์

ตัวแปรใน LESS

สร้างขึ้นใน Bootstrap เป็นตัวแปรจำนวนหนึ่งสำหรับปรับแต่งระบบกริดเริ่มต้น 940px ที่บันทึกไว้ด้านบน ตัวแปรทั้งหมดสำหรับกริดถูกเก็บไว้ใน variable.less

วิธีปรับแต่ง

การปรับเปลี่ยนกริดหมายถึงการเปลี่ยน@grid*ตัวแปรสามตัวและการคอมไพล์ Bootstrap เปลี่ยนตัวแปรกริดใน variables.less และใช้หนึ่งในสี่วิธีที่จัดทำเป็นเอกสารเพื่อคอมไพล์ใหม่ หากคุณกำลังเพิ่มคอลัมน์เพิ่มเติม อย่าลืมเพิ่ม CSS สำหรับคอลัมน์ใน grid.less

คอยตอบสนอง

การปรับแต่งกริดจะทำงานที่ระดับเริ่มต้นเท่านั้น นั่นคือกริด 940px เพื่อรักษาลักษณะการตอบสนองของ Bootstrap คุณจะต้องปรับแต่งกริดในแบบตอบสนอง.less

เลย์เอาต์เทมเพลตพื้นฐานในการสร้างหน้าเว็บ

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

เลย์เอาต์กึ่งกลางกว้าง 940px ที่เป็นค่าเริ่มต้นและเรียบง่ายสำหรับเว็บไซต์หรือหน้าเว็บใดๆ ที่จัดทำโดยไฟล์<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 ที่กำหนดเองตามเงื่อนไขหลายประการ เช่น อัตราส่วน ความกว้าง ประเภทการแสดงผล ฯลฯ—แต่มักจะเน้นไปรอบๆmin-widthและmax-width

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

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

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

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

ฉลาก ความกว้างของเค้าโครง ความกว้างของคอลัมน์ ความกว้างของรางน้ำ
สมาร์ทโฟน 480px และต่ำกว่า คอลัมน์ของเหลวไม่มีความกว้างคงที่
สมาร์ทโฟนสู่แท็บเล็ต 767px และต่ำกว่า คอลัมน์ของเหลวไม่มีความกว้างคงที่
แท็บเล็ตแนวตั้ง 768px ขึ้นไป 42px 20px
ค่าเริ่มต้น 980px ขึ้นไป 60px 20px
จอแสดงผลขนาดใหญ่ 1200px ขึ้นไป 70px 30px

ต้องใช้เมตาแท็ก

เพื่อให้แน่ใจว่าอุปกรณ์แสดงหน้าที่ตอบสนองอย่างเหมาะสม ให้ใส่เมตาแท็กของวิวพอร์ต

  1. < ชื่อ เมตา = เนื้อหา"วิวพอร์ต" = "ความกว้าง=ความกว้างของอุปกรณ์ มาตราส่วนเริ่มต้น=1.0" >

การใช้แบบสอบถามสื่อ

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

  1. ใช้เวอร์ชันตอบสนองที่คอมไพล์แล้ว bootstrap-responsive.css
  2. เพิ่ม @import "responsive.less" และคอมไพล์ Bootstrap . อีกครั้ง
  3. แก้ไขและคอมไพล์ react.less ใหม่เป็นไฟล์แยกต่างหาก

ทำไมไม่เพียงแค่รวมมัน? พูดตามตรงไม่ใช่ทุกอย่างต้องตอบสนอง แทนที่จะสนับสนุนให้นักพัฒนานำคุณลักษณะนี้ออก เราคิดว่าควรเปิดใช้งานคุณลักษณะนี้ดีที่สุด

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

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

พวกมันคืออะไร

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

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

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

ตัวอย่างเช่น คุณอาจแสดง<select>องค์ประกอบสำหรับการนำทางบนเลย์เอาต์มือถือ แต่ไม่แสดงบนแท็บเล็ตหรือเดสก์ท็อป

ชั้นเรียนสนับสนุน

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

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

กรณีทดสอบ

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

ปรากฏบน...

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

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

ซ่อนบน...

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

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