เนื่องจากความต้องการของโครงการฉันวางแผนที่จะเรียนรู้กรอบ bootstrap ได้ดี ฉันเรียนรู้มาก่อนเล็กน้อย เฟรมเวิร์กไม่ใช่เรื่องยากโดยรวม แต่ยังมีอีกหลายสิ่งที่เกี่ยวข้อง หากคุณต้องการเชี่ยวชาญอย่างเชี่ยวชาญคุณยังต้องฝึกฝนมากขึ้น
1. bootstrap คืออะไร?
BS คืออะไร? นั่นคือเครื่องมือเฟรมเวิร์กมาตรฐานที่สร้างขึ้นโดยหน้าส่วนหน้าถูกเขียนขึ้นในสไตล์ CSS.JS และจำเป็นต้องใช้เท่านั้น
ใช้ BS ได้อย่างไร? เอฟเฟกต์ส่วนใหญ่จะเพิ่มขึ้นโดยใช้คลาสที่แตกต่างกันและแต่ละคลาสมีฟังก์ชั่นที่สอดคล้องกัน
ประโยชน์ BS: เพิ่มประสิทธิภาพการพัฒนาทำให้การออกแบบหน้าสวยงามยิ่งขึ้นและสนับสนุนการพัฒนาที่ตอบสนอง ดาวน์โหลดที่อยู่: https://github.com/foreverjiangting/bootstrap
เอกสารการเรียนรู้: http://v3.bootcss.com/getting-started/
2. การออกแบบสไตล์ CSS
1. ตามเอกสาร HTML
Bootstrap หมายถึงองค์ประกอบ HTML บางอย่างดังนั้นส่วนหัวจะต้องเขียนเป็นคอลัมน์ตัวอย่างที่แสดงด้านล่าง
<! doctype html> --- มีการประกาศเอกสาร HTML5 เบราว์เซอร์ทั้งหมดจะเปิดโหมดมาตรฐาน <html> <head> <meta charset = "utf-8"> <meta http-equiv = "view-wide =" view " 3 Meta Tags * ต้อง * ถูกวางไว้ก่อนและเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! ให้การสนับสนุนเค้าโครงที่ตอบสนองได้-> <title> bootstrap </title> [/รหัส] [รหัส] <!-ไฟล์ bootstrap core css ใหม่-> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3 -> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.cs"><!-ไฟล์ jQuery อย่าลืมแนะนำ-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body>
2. เค้าโครงระบบกริด
เนื้อหาเค้าโครงโดยการตั้งค่าแถวและคอลัมน์ Bootstrap ตั้งค่าหน้าเป็น 12 คอลัมน์ เลย์เอาต์โดยการเปลี่ยนจำนวนคอลัมน์เช่นการตั้งค่าคอลัมน์ความกว้างเท่ากันสามคอลัมน์:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> และเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! -> <title> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3 เลย์เอาต์-> <div> <!-หรือคอนเทนเนอร์-ฟลูอิด-> <div>-COL-XS-4: หมายถึงอุปกรณ์ขนาดเล็กที่น้อยกว่า 768px <div> 11 </div>-COL-SM-4: หมายถึงอุปกรณ์> = 768px <div> 22 </div> น้อยกว่า 1200px </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> <div> 33 </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
มีสี่วิธีในการเขียนรูปแบบเครือข่าย CSS ซึ่งส่วนใหญ่ใช้ในความละเอียดของอุปกรณ์ที่แตกต่างกัน
2: แปลคอลัมน์
ใช้ชดเชยกับกระทะ นั่นคือจำนวนคอลัมน์ที่แปล
<div> <!-หรือ container-fluid-> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- หมายถึงด้านขวาของ 33 </div> <div> 11 </div> </div> </div> </div> <div> 33 </div> </div> <div> 11 </div> </div> 22 </div> </div> 33 </div> </div> </div> <!-แปลคอลัมน์->
ผลกระทบมีดังนี้:
33 เนื่องจากทั้งสองคอลัมน์ได้รับการแปลมันไม่สามารถตอบสนองความต้องการของการครอบครอง 4 คอลัมน์ดังนั้นมันจึงถูกบีบเข้าไปในแถวถัดไปและเริ่มครอบครอง 4 คอลัมน์ พูดง่ายๆก็คือมันเทียบเท่ากับการเคลื่อนย้ายบล็อกทั้งหมดที่ถูกต้อง
3: คอลัมน์ซ้อนกัน
นั่นคือคอลัมน์รังในคอลัมน์กริด มาเปรียบเทียบกันเถอะ
<div> <!-หรือ container-fluid-> <div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
ผลกระทบมีดังนี้:
คุณพบปัญหาหรือไม่? เหตุใดจึงไม่มีการกระจายที่เท่ากัน 8 ข้างต้น?
เหตุผล: ลองดูที่คอนโซลดีบั๊ก
.COL-XS-1, .COL-XS-10, .COL-XS-11, .COL-XS-12, .COL-XS-2, .COL-XS-3, .COL-XS-4, .COL-XS-5, .COL-XS-6, .COL-XS-7 Padding-Left: 15px; Padding-Right: 15px; ตำแหน่ง: ญาติ;}
พบว่าการเลื่อนบนซ้ายและการขยายด้านขวาเป็นทั้ง 15px นี่เป็นเพราะช่องว่างระหว่างคอลัมน์มีอิทธิพลต่อทำไม DIV ที่สองจึงไม่มีอิทธิพล? มาสำรวจหลักการของกริดรั้ว
1. "แถว" จะต้องรวมอยู่ใน .container (ความกว้างคงที่) หรือ .container-fluid (ความกว้าง 100%) เพื่อให้การจัดตำแหน่งและช่องว่างภายในที่เหมาะสม
2. สร้างรางน้ำระหว่างคอลัมน์โดยการตั้งค่าคุณสมบัติ padding สำหรับ "คอลัมน์" โดยการตั้งค่า margin ลบสำหรับองค์ประกอบ .row ชุด padding ออฟเซ็ตสำหรับองค์ประกอบ .container
ทางอ้อม "คอลัมน์" ที่มีอยู่ใน padding ว่างของ "แถว"
หมายเหตุ : ในเวลานี้ Row ได้ชดเชยช่องว่างของคอลัมน์ดังนั้นจึงไม่มีค่าการขยาย
4: การเรียงลำดับคอลัมน์
ส่วนใหญ่ใช้ col-xs-push-* col-xs-pull-* (* หมายถึงจำนวน 0-11) วิธีการเข้าใจสองคลาสนี้ได้อย่างไร? ดันหมายถึงการผลัก, ดึงหมายถึงดึง
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
การเรนเดอร์มีดังนี้:
<div> 21 </div> --- บันทึกเป็น div1 <div> 24 </div>-บันทึกเป็น div2
สามารถเข้าใจได้ว่ามันคือการสลับตำแหน่งของทั้งคู่ คุณต้องกด DIV1 ไปที่คอลัมน์ 8 ด้านขวาและคุณต้องดึงคอลัมน์ 4 ทางด้านซ้าย
3. การสตรีมมิ่งกริดเค้าโครง
1. ความกว้างของคอลัมน์ใช้เปอร์เซ็นต์ไม่ใช่พิกเซล
2. เปลี่ยนคลาสแถวเป็นแถว-ฟลูอิด
3. ฟังก์ชั่นพื้นฐานอื่น ๆ นั้นเหมือนกับเค้าโครงคงที่ด้านบนและการตอบสนองการสนับสนุน
4. เมื่อหารคอลัมน์บางอย่างใน bisector เนื่องจากรูปแบบการสตรีมใช้เปอร์เซ็นต์ควรคำนวณตาม 6
// บันทึกสถานการณ์ต่อไปนี้ เมื่อหาร 8 คอลัมน์ทั้งสองข้างมันไม่ได้ถูกตั้งค่าเป็นสอง 4s แต่สอง 6s เนื่องจากมีการแจกแจงแรสเตอร์ 12 คอลัมน์ใน bootstrap <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
ลองมาดูแอปพลิเคชันของการสตรีมการสตรีมและเปรียบเทียบกับเลย์เอาต์คงที่
<!-การสตรีมการสตรีม-> <div> <div> 333 </div> <div> 444 </div> </div> <div> --- ประกาศคลาส container-fluid ซึ่งบ่งชี้ว่าเนื้อหาเป็นรูปแบบการสตรีม, ฟังก์ชั่น: เป็นบล็อกที่มีอยู่ คลาสคอนเทนเนอร์และคอนเทนเนอร์-ฟลูอิดและนี่คือความกว้างของหน้าจอ <div> 333 </div> <div> 444 </div> </div>
เมื่อหน้าจอน้อยกว่า 768px เอฟเฟกต์มีดังนี้:
เมื่อหน้าจอมีขนาดใหญ่กว่า 992px เอฟเฟกต์จะมีดังนี้: ในเวลานี้หนึ่งบรรทัดเป็นพิเศษ
คลาส Row-Fluid (สำคัญมาก) กำหนดว่าเป็นเค้าโครงการไหลหรือไม่ จากนั้นรหัสบล็อกเนื้อหาจะถูกเขียนในลักษณะเดียวกับระบบกริดและยังคงเริ่มจาก COL-MD-1 ถึง COL-MD-12 ซึ่งสอดคล้องกับเปอร์เซ็นต์ที่แตกต่างกันตามลำดับ
4. การออกแบบที่ตอบสนอง
พูดง่ายๆคือรองรับความละเอียด (960px, 1366px, 978px ฯลฯ ) ของอุปกรณ์ต่าง ๆ (โทรศัพท์มือถือพีซี) สำหรับการตอบสนองแบบปรับตัว
<div> <div> 21 </div> <div> 24 </div> </div>
เมื่ออุปกรณ์น้อยกว่า 768px เอฟเฟกต์มีดังนี้:
เมื่ออุปกรณ์> = 992px ผลกระทบมีดังนี้:
ความละเอียดของสองหมวดหมู่ข้างต้นแตกต่างกัน COL-MD-12 หมายความว่าแต่ละคอลัมน์มีหนึ่งแถวนั่นคือ 12 คอลัมน์
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น