Bootstrap และ Foundation เป็นสองกรอบส่วนหน้าโปรดของฉันโดยเฉพาะอย่างยิ่งบนต้นแบบสำหรับเว็บไซต์ที่พัฒนาอย่างรวดเร็ว พวกเขาทั้งหมดให้ส่วนประกอบพร้อมใช้งานเร่งขั้นตอนการทำงานของฉัน ยกเว้นความแตกต่างเล็กน้อยลักษณะพื้นฐานส่วนใหญ่ของพวกเขาดูเหมือนจะคล้ายกัน
ในบทความนี้ฉันจะแนะนำการก่อสร้างขั้นพื้นฐานของกริดของพวกเขา ก่อนอื่นฉันจะแสดงให้คุณเห็นว่าพวกเขาถูกสร้างขึ้นอธิบายองค์ประกอบหลักของพวกเขาและวิธีที่พวกเขาแสดงความแตกต่างกับขนาดของหน้าจอที่แตกต่างกัน จากนั้นฉันจะช่วยคุณเพิ่มความรู้ผ่านการฝึกฝนตัวอย่างในชีวิตจริง
มาเริ่มกันเถอะ!
การเปรียบเทียบ 1: การเปรียบเทียบการสืบค้นสื่อ
ก่อนที่จะวิเคราะห์โครงสร้างแรสเตอร์ของ Bootstrap และ Foundation ลองมาดูจุดพักที่พวกเขาจัดเตรียมไว้สำหรับการตอบสนอง นี่คือสิ่งที่แต่ละเฟรมจัดเตรียมไว้เพื่อตั้งค่าจำนวน Rasters ที่มีอยู่
Bootstrap ระบุจุดพักการสืบค้นสื่อของสื่อ 4 PX แสดงดังนี้:
มูลนิธิมีการสืบค้นสื่อที่ใช้ EM 5 ตัว พวกเขาจะแสดงในตารางต่อไปนี้:
เพื่อให้คุณมีวิธีทำความเข้าใจว่าการสอบถามสื่อทำงานอย่างไรฉันขอแนะนำให้คุณตรวจสอบการสาธิตของ Bootstrap และการสาธิตพื้นฐานที่เกี่ยวข้อง แต่ถ้าคุณยังสับสนส่วนต่อไปจะอธิบายทุกอย่าง
หมายเหตุ: หน้าจอตาข่ายและหน้าจอขนาดใหญ่สุด ๆ ถูกปิดใช้งานโดยค่าเริ่มต้น หากคุณต้องการใช้พวกเขาคุณต้อง "ยกเลิก" และตั้งค่าของตัวแปรทั้งสอง $ integr-xl-html-grid-classes และ $ integr-xl-html-block-grid-classes เป็น TRUE คุณสามารถค้นหาตัวแปรเหล่านี้ได้ในส่วน _settings.scss
การเปรียบเทียบ 2: โครงสร้างกริด
ทั้ง Bootstrap และ Foundation ให้ตาราง 12 คอลัมน์แรกที่เคลื่อนไหวซึ่งประกอบด้วยแถวและคอลัมน์ คอลัมน์ซ้อนกันเป็นแถว ผลรวมของคอลัมน์ในแต่ละแถวคือ 12 คอลัมน์ แถวสามารถซ้อนกันในคอลัมน์
เฟรมเวิร์กทั้งสองนี้มีคลาสที่กำหนดไว้ล่วงหน้ามากมายที่คุณสามารถใช้เพื่อตั้งค่าขนาดของคอลัมน์ ดังที่ได้กล่าวไว้ข้างต้น Bootstrap มีจุดพักการสืบค้นสื่อ 4 ตัวและฐานรากประกอบด้วย 5 สำหรับแต่ละกริดพวกเขามีคำนำหน้าคลาสที่แตกต่างกันซึ่งสามารถใช้ในการตั้งค่าขนาดคอลัมน์ (ดูสองตารางด้านบน)
เส้นกริด Bootstrap ยังต้องใช้องค์ประกอบที่ห่อหุ้มด้วย สิ่งนี้ควรมีคลาสคอนเทนเนอร์หรือคอนเทนเนอร์ฟลูอิด คลาสคอนเทนเนอร์ในองค์ประกอบมีค่าคงที่และค่าของมันขึ้นอยู่กับหน้าต่าง (ดูตารางแรกด้านบน) ในขณะที่คลาสคอนเทนเนอร์-ฟลูอิดในองค์ประกอบขยายไปถึงความกว้างทั้งหมดของหน้าต่างเบราว์เซอร์
การเปรียบเทียบ 3: คอลัมน์! = 12?
เป็นไปได้ว่าจำนวนคอลัมน์ในระบบกริดไม่เท่ากับ 12 ในกรณีนี้ bootstrap จะลอยคอลัมน์สุดท้ายไปทางซ้ายและรองพื้นจะลอยไปทางขวา หากคุณต้องการแทนที่พฤติกรรมเริ่มต้นของรากฐานให้เพิ่มคลาส. end ในคอลัมน์สุดท้าย
การเปรียบเทียบ 4: คลาสการทำงาน
เฟรมเวิร์กทั้งสองให้ชั้นเรียนเพิ่มเติมที่ช่วยให้คุณกำหนดตาข่ายได้อย่างยืดหยุ่น
คลาสที่มองเห็นได้ช่วยให้คุณเลือกที่จะแสดงหรือซ่อนเนื้อหาบนหน้าจอที่มีขนาดเฉพาะ คลาสออฟเซ็ตช่วยให้คุณสามารถตั้งศูนย์คอลัมน์ที่ไม่สมบูรณ์หรือปรับระยะห่างระหว่างพวกเขา แน่นอนว่ามีคลาสอื่น ๆ ที่สามารถระบุลำดับของคอลัมน์ตามอุปกรณ์ต่าง ๆ
เปรียบเทียบห้า: บล็อกกริด
นอกเหนือจากกริดเริ่มต้นแล้วมูลนิธิยังรองรับคุณสมบัติแรสเตอร์อื่น ได้แก่ บล็อกกริด ช่วยให้คุณสร้างคอลัมน์ที่มีขนาดเท่ากันด้วยเครื่องหมายที่เล็กที่สุด หากต้องการใช้ให้กำหนดแถวเป็นองค์ประกอบ UL และคอลัมน์ในแถวเป็นองค์ประกอบ LI จากนั้นระบุขนาดของคอลัมน์โดยใช้คลาสที่เกี่ยวข้องกับองค์ประกอบ UL (ดูตารางที่สองด้านบนสำหรับรายละเอียด)
ในเวลานี้คุณอาจสงสัยว่าอะไรคือความแตกต่างระหว่างกริดปกติและบล็อกกริด? ลองดูความแตกต่างสองประการระหว่างกัน:
ซึ่งแตกต่างจากกริดเริ่มต้น (บล็อกกริด) แต่ละแถวมีความกว้างสูงสุดที่ใช้ดังนั้นหน้าต่างเบราว์เซอร์ทั้งหมดจะถูกครอบคลุมเสมอ
บล็อกตาข่ายสามารถใช้ในโครงการที่มีขนาดเท่ากันเท่านั้น
ใช้กริด
ตอนนี้เรามีความเข้าใจที่ดีเกี่ยวกับกริดของสองเฟรมเวิร์กนี้มาดูกันว่าเราจะใช้มันเพื่อสร้างหน้า bootstrap และหน้าพื้นฐานที่สอดคล้องกันได้อย่างไร
ภาพหน้าจอต่อไปนี้แสดงเค้าโครงแรกที่เรากำลังจะสร้าง:
เริ่มต้นด้วย bootstrap เรากำหนดองค์ประกอบด้วยคลาสคอนเทนเนอร์ ตามที่กล่าวไว้ก่อนหน้านี้คลาสนี้จะตั้งค่าความกว้างคงที่สำหรับองค์ประกอบนี้ตามขนาดของหน้าจอ (ดูตารางใน Bootstrap สำหรับรายละเอียด) จากนั้นเราเพิ่มองค์ประกอบด้วยแถวคลาสลงไป
ตอนนี้เราพร้อมที่จะตั้งค่าคอลัมน์ของเรา สำหรับหน้าจอขนาดใหญ่เราต้องการ 4 คอลัมน์ที่มีขนาดเท่ากัน ดังนั้นเราจึงกำหนดองค์ประกอบ DIV 4 รายการแต่ละรายการด้วยคลาส COL-LG-3 อย่างไรก็ตามสำหรับอุปกรณ์ขนาดเล็กและขนาดกลางเราชอบที่จะมีสองคอลัมน์ในแต่ละแถว ด้วยเหตุนี้เราจึงใช้คลาส COL-SM-6 ในที่สุดสำหรับหน้าจอพิเศษขนาดเล็กเราต้องการให้คอลัมน์เรียงซ้อนกัน นี่เป็นพฤติกรรมเริ่มต้นของการย้ายเฟรมเวิร์กแรกดังนั้นจึงไม่จำเป็นต้องกำหนดคลาส COL-XS-12
HTML ของมันมีลักษณะเช่นนี้:
<div> <div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <!
มาดูรากฐานต่อไป
ตาข่ายของรองพื้นคล้ายกับตาข่ายของ bootstrap มาก แต่มันง่ายกว่าเล็กน้อย ก่อนอื่นเราต้องกำหนดองค์ประกอบด้วยคลาสแถวซึ่งจะมีคอลัมน์ของเรา คลาสนี้ตั้งค่าความกว้างสูงสุดขององค์ประกอบเป็น 62.5Rem (1000px) ต่อไปเราเพิ่มคอลัมน์ เพื่อให้บรรลุสิ่งนี้เราระบุว่าแต่ละองค์ประกอบ DIV มีคลาสคอลัมน์หรือคอลัมน์จากนั้นใช้คลาสแรสเตอร์ที่เกี่ยวข้อง (ดูตารางในรากฐานด้านบนสำหรับรายละเอียด) เพื่อตั้งค่าความกว้าง ในทำนองเดียวกันสำหรับอุปกรณ์ขนาดเล็กเราไม่จำเป็นต้องกำหนดคลาส Small-12
นี่คือ HTML จาก Foundation Raster :
<div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <!
ในขณะนี้ฉันคิดว่าคุณเริ่มคุ้นเคยกับระบบกริดของสองเฟรมเวิร์กนี้มากขึ้น แต่บางทีอีกตัวอย่างหนึ่งอาจช่วยให้คุณเข้าใจได้ชัดเจนยิ่งขึ้น
ในตัวอย่างถัดไปเราจะสร้างส่วนท้าย แผนภาพต่อไปนี้แสดงสไตล์ที่เราต้องการ:
ที่นี่เราจะเลือกเลย์เอาต์ที่แตกต่างกันเพื่อเปรียบเทียบกับตัวอย่างก่อนหน้า สำหรับหน้าจอที่มีหน้าจอกลางขึ้นไป (หรือหน้าจอที่มีหน้าจอขนาดเล็กขึ้นไปในกริด bootstrap) เราต้องการแสดงสามคอลัมน์ อย่างไรก็ตามเราสังเกตเห็นว่ามีแถวซ้อนกันในคอลัมน์สุดท้าย ประกอบด้วยสองคอลัมน์ เราจะกำหนดความกว้างของพวกเขาเป็นครึ่งหนึ่งของความกว้างแถวในอุปกรณ์ทั้งหมด ในที่สุดเราปรับการมองเห็นภาพที่ปรากฏในแถวซ้อนกัน
นี่คือรหัสใน bootstrap:
<div> <div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <div> <a href = "#"> <p> มาพบและสนทนา </p> <i> </i> </a> </div> <! </div> <!-.col-sm-4-> </div> <!-.Row-> </div> <!-.Container->
นี่คือรหัสสำหรับรากฐาน:
<div> <div> <!-เนื้อหา-> </div> <div> <!-เนื้อหา-> </div> <div> <ul> <li> <a href = "#"> <p> มาพบและสนทนา </p> <i> </i> </a> </li> <li> .Row ->
หมายเหตุ: หากคุณต้องการแทนที่บล็อกตาข่ายเราสามารถใช้ตาข่ายเริ่มต้นของ Foundation เพื่อสร้างแถวซ้อนกัน
สรุปแล้ว
หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับระบบ Bootstrap Grid คุณสามารถตรวจสอบบทความนี้: "Bootstrap ต้องเรียนรู้เกี่ยวกับทุกวัน (เลย์เอาต์)"
ในที่สุดในบทความนี้ฉันแนะนำโครงสร้างตาข่ายของ Bootstrap และ Foundation จากนั้นเราเห็นในโครงการจริงวิธีการใช้กริดของพวกเขา อย่างที่คุณเห็นกริดทั้งหมดมีความคล้ายคลึงกันและสามารถกำหนดได้เพิ่มเติม
ฉันหวังว่าคุณจะชอบบทความนี้ บางทีคุณสามารถใช้สิ่งที่คุณได้เรียนรู้กับโครงการของคุณ สำหรับเนื้อหา bootstrap เพิ่มเติมโปรดติดตาม: "การสอนการเรียนรู้ bootstrap" ขอบคุณสำหรับการอ่าน
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น