ในโพสต์นี้ เราจะเห็นเลย์เอาต์ของไซต์ Bootstrap เพื่อแสดงความสามารถอันน่าทึ่งของเฟรมเวิร์กโอเพนซอร์สนี้ ใน บทความก่อนหน้านี้ เราได้ติดตั้งสภาพแวดล้อมการพัฒนาและปลั๊กอินที่จำเป็นเพื่ออำนวยความสะดวกในการทำงานของเรา
โปรดจำไว้ว่าในฐานะผู้จัดการเนื้อหาของ Linux Adictos ไม่อนุญาตให้ฉันใส่โค้ดของตัวอย่างที่ฉันอัปโหลดไปยัง GitHub หากต้องการดาวน์โหลด คุณต้องติดตั้งแพ็คเกจ Git ในการแจกจ่ายของคุณ จากนั้นเขียนคำสั่งต่อไปนี้:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
คุณจะต้องเรียกใช้สองคำสั่งนี้เป็นระยะเพื่อดาวน์โหลดไฟล์ใหม่
กำลังวิเคราะห์รหัส
ตอนนี้ใน file explorer เปิด example2.html ด้วย VSCodium (เปิดด้วยปุ่มขวา) เราเห็นสิ่งต่อไปนี้:
- ในบรรทัดที่ 1 เราบอกเบราว์เซอร์ถึงประเภทของเอกสารเพื่อให้รู้วิธีแสดงผล
- บรรทัดที่ 2 ระบุภาษาของไซต์ซึ่งระบุให้เบราว์เซอร์ทราบถึงวิธีการแสดงอักขระบางตัว และสำหรับเครื่องมือค้นหาภาษาของเนื้อหาที่เอื้อต่อการวางตำแหน่ง ในโค้ดของเรา มีการกำหนดเป็น es แต่มีรูปแบบภูมิภาค เช่น es_ES สำหรับภาษาสเปนจากสเปน หรือ es_AR สำหรับภาษาสเปนจากอาร์เจนตินา
- จากบรรทัดที่ 3 เรามีคอนเทนเนอร์ข้อมูลเมตาอยู่ระหว่างแท็ก Y . ข้อมูลเมตาให้ข้อมูลเกี่ยวกับเอกสาร ในตัวอย่างของเรา:
- บรรทัดที่ 4 ระบุมาตรฐานที่ใช้สำหรับการเข้ารหัสอักขระ บางทีคุณอาจเคยเห็นว่า เครื่องหมายคำถามในเพชรแสดงขึ้นแทนการเน้นเสียงหรือสัญลักษณ์พิเศษ. เนื่องจากเบราว์เซอร์ใช้การเข้ารหัสที่ไม่เหมาะสม คำสั่งในบรรทัดที่ 8 หลีกเลี่ยงสิ่งนี้โดยการประกาศอย่างชัดเจน
- ในบรรทัดที่ 5 เราบอกเบราว์เซอร์ว่าควรปรับให้เข้ากับรูปแบบหน้าจอต่างๆ อย่างไร
- ชื่อที่เราตั้งไว้ในบรรทัดที่ 6 จะแสดงในแถบด้านบนของเบราว์เซอร์และในเครื่องมือค้นหา
- ในบรรทัดที่ 7 เราบอกเบราว์เซอร์ว่าจะค้นหาองค์ประกอบเฟรมเวิร์ก Bootstrap ที่เกี่ยวข้องกับการจัดสไตล์ได้ที่ไหน
- จากบรรทัดที่ 10 คอนเทนเนอร์จะเริ่มขึ้น เนื้อหาประกอบด้วยเนื้อหาของหน้าเว็บและลิงก์ไปยังสคริปต์ Bootstrap ที่จะให้การโต้ตอบกับไซต์ของเรา
- บรรทัดที่ 13 ระบุจุดสิ้นสุดของเอกสาร
เลย์เอาต์ของไซต์ Bootstrap
แนวคิดหลักสำหรับเลย์เอาต์ของไซต์ Bootstrap
ดังที่เราได้กล่าวไว้ในบทความที่แล้ว Bootstrap ใช้แนวทางแรกบนมือถือ เมื่อใช้วิธีนี้ การออกแบบจะเสร็จสิ้นโดยคำนึงถึงขนาดหน้าจอที่เล็กที่สุด จากนั้นจึงเพิ่มเลเยอร์เพื่อปรับให้เข้ากับขนาดที่ตามมา
ที่นี่เราต้องคำนึงถึงสองแนวคิดหลัก:
- เบรกพอยต์
- ปรึกษาสื่อมวลชน.
เบรกพอยต์ระบุความกว้างของหน้าจอที่เลย์เอาต์ถูกแก้ไข, การสืบค้นสื่อใช้พารามิเตอร์รูปแบบตามลักษณะเบราว์เซอร์และระบบปฏิบัติการบางอย่าง กล่าวอีกนัยหนึ่ง เบรกพอยต์แต่ละอันจะมีสไตล์ที่สอดคล้องกัน
Bootstrap มาพร้อมกับจุดพักหกจุดที่กำหนดไว้ล่วงหน้าซึ่งโปรแกรมเมอร์ขั้นสูงสามารถแก้ไขได้ คะแนนเริ่มต้นคือ:
- เล็กพิเศษ: ไม่มีตัวระบุที่ตั้งไว้ล่วงหน้าและใช้กับหน้าจอที่มีความกว้างน้อยกว่า 576 พิกเซล
- เล็ก: ระบุด้วย sm และใช้สำหรับหน้าจอตั้งแต่ 576 พิกเซล
- ปานกลาง: ระบุด้วย md และใช้สำหรับหน้าจอตั้งแต่ 768 พิกเซล
- ความยาว: ระบุว่า lg ใช้สำหรับหน้าจอตั้งแต่ 992 พิกเซล
- ยาวเป็นพิเศษ: มีตัวระบุ lg และใช้สไตล์กับหน้าจอตั้งแต่ 1200 พิกเซล
- ยาวเป็นพิเศษ: ทำเครื่องหมายด้วยตัวระบุ xxl เพื่อใช้การออกแบบกับหน้าจอตั้งแต่ 1400 พิกเซล
ขนาดเหล่านี้ไม่ได้ถูกเลือกอย่างไม่เป็นทางการเนื่องจาก จุดพักแต่ละจุดสามารถมีคอนเทนเนอร์ที่มีความกว้างเป็นทวีคูณของ 12 นอกจากนี้ยังไม่ได้กำหนดเป้าหมายไปยังอุปกรณ์เฉพาะ แต่ปรับให้เข้ากับอุปกรณ์ประเภทต่างๆ และขนาดหน้าจอ
ภายในหน้าจอขนาดต่างๆ เราจะพบตู้คอนเทนเนอร์ สิ่งเหล่านี้มีหน้าที่รับผิดชอบในการโฮสต์ เติม และจัดแนวเนื้อหาของไซต์ในอุปกรณ์หรือหน้าต่างกราฟิกบางอย่าง
;