1. สร้างสภาพแวดล้อมการพัฒนา bootstrap
1. ดาวน์โหลด bootstrap, http://www.bootcss.com/
2. ดาวน์โหลด jQuery และการเข้าถึง http://code.jquery.com/jquery-2.0.3.min.js โดยตรงผ่าน IE
3. นำเข้าไฟล์ Bootstrap และ JSS ของ JSS, CSS และแท็ก <Meta> ของ. Viewport ในหน้า HTML แท็กนี้สามารถแก้ไขได้เพื่อแสดงบนอุปกรณ์มือถือส่วนใหญ่เช่นถ้า LT IE 9 ... สำหรับความเข้ากันได้ด้านล่าง IE9
เทมเพลตมีดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0" name = "viewport"/> <title> assert title ที่นี่ </title> <link href = "css/bootstrap.min IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/responfering <! [endif]-> <script src = "js/jQuery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </head>
ii. ระบบกริด
1. Boostrap แยกเดสก์ท็อปออกเป็นตารางที่มีคอลัมน์ 12 แถว * n สำหรับเค้าโครงซึ่งเป็นแกนหลักของ boostrap
2.. Row ใช้เพื่อแบ่งระดับแถวและต้องรวมอยู่ภายใต้. container
3. COL-XX-* ดำเนินการแบ่งระดับคอลัมน์ดังแสดงในรูปด้านล่าง
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div> <div> <div> 5 </div> </div> 6 </div> </div> </div> </div>
4. คอลัมน์ออฟเซ็ต ดำเนินการผ่าน COL-XX-OFTSET-*
<div> <div> <div> 1 </div> <div> 2 </div> </div> 3 </div> <div> 4 </div> </div> <div> 5 </div> </div> 6 </div> </div> 7 </div> </div> </div>
5. การเรียงลำดับคอลัมน์ สามารถทำได้โดย. col-xx-push-* และ. col-xx-pull-* เพื่อใช้การเรียงลำดับคอลัมน์ซ้ายหรือขวา
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div> <div> 5 </div> </div> 6 </div> </div> 7 </div> </div> </div> </div>
6. คอลัมน์ทำรัง และแถวรังใน col.
<div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> <div> <div> <div> 5 </div> </div> 6 </div> </div> </div> </div> </div> </div> </div> </div>
หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น