Bootstrap 4 พร้อมการฝึกอบรมบรรณาธิการ การจัดเรียงบล็อกแบบปรับตัวเรียงกันเป็นแถว

ขึ้นอยู่กับจำนวนดาวบน GitHub

หากคุณต้องการเชี่ยวชาญ Bootstrap โดยเฉพาะเวอร์ชันล่าสุดที่สี่ เนื้อหานี้ได้เตรียมไว้สำหรับคุณโดยเฉพาะ ที่นี่ โดยใช้ตัวอย่างแบบ end-to-end เล็กๆ น้อยๆ ที่สามารถเข้าใจได้จริงภายในครึ่งชั่วโมง พื้นฐานของ Bootstrap จะถูกสาธิตให้เห็น เมื่อคุณเข้าใจแล้ว คุณจะสามารถทำอะไรบางอย่างของคุณเองได้โดยใช้เฟรมเวิร์กนี้

ข้อกำหนดเบื้องต้น เนื้อหานี้มุ่งเป้าไปที่นักพัฒนาเว็บมือใหม่ที่มีความเข้าใจพื้นฐานเกี่ยวกับ HTML, CSS และ jQuery

นี่คือเว็บไซต์หน้าเดียวที่เราจะพูดถึงการสร้างโดยใช้ Bootstrap

โครงการสำเร็จรูปที่สร้างโดยใช้ Bootstrap

Npm ติดตั้งบูตสแตรป
Bootstrap สามารถเชื่อมต่อกับเพจได้โดยใช้เครือข่ายการจัดส่งเนื้อหา เมื่อต้องการทำเช่นนี้ เพิ่มการเชื่อมโยงต่อไปนี้ลงในแท็ก:

สามารถดาวน์โหลด Bootstrap เวอร์ชันล่าสุดได้จากที่นี่และใช้งานในเครื่อง

โครงสร้างโครงการควรมีลักษณะดังรูปต่อไปนี้

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

• Bootstrap 4 ถูกเขียนขึ้นใหม่โดยใช้เทคโนโลยี flexbox ในขณะที่ Bootstrap 3 ใช้เทคโนโลยี float หากคุณไม่คุ้นเคยกับ flexbox โปรดดูแหล่งข้อมูลนี้
• CSS ของ Bootstrap 4 ใช้หน่วย rem ในขณะที่ก่อนหน้านี้ใช้หน่วย px คุณสามารถดูความแตกต่างได้
• ส่วนประกอบบางอย่าง เช่น แผง ได้ถูกถอดออกแล้ว คุณสามารถดูรายละเอียดเกี่ยวกับการเปลี่ยนแปลงที่เกิดขึ้นใน Bootstrap 4 ได้

ในความเป็นจริง Bootstrap 4 มีสิ่งใหม่มากมายเมื่อเทียบกับ Bootstrap 3 หากคุณต้องการ คุณสามารถทำความคุ้นเคยกับนวัตกรรมเหล่านี้ได้ ขณะนี้เรากำลังเริ่มทำงานในโครงการด้านการศึกษาของเรา Bootstrap Grid System ระบบ Bootstrap Grid ได้รับการออกแบบมาเพื่อสร้างเค้าโครงหน้า ทำให้การพัฒนาเว็บไซต์แบบตอบสนองเป็นเรื่องง่าย ใน Bootstrap เวอร์ชันใหม่ ชื่อคลาสจะไม่เปลี่ยนแปลง (ควรสังเกตว่าไม่มี class.xs อยู่แล้ว)

ตารางแบ่งออกเป็น 12 คอลัมน์ โครงสร้างนี้ได้รับการกำหนดค่าตามความต้องการของนักพัฒนา และเป็นพื้นฐานของเค้าโครงหน้า

ในการใช้ตาราง Bootstrap คุณต้องเพิ่มคลาส .row ให้กับองค์ประกอบหลักของหน้า เมื่อตั้งค่าขนาดขององค์ประกอบที่ซ้อนกัน คลาสต่อไปนี้จะถูกใช้ (แทนที่จะใช้เครื่องหมายดอกจันที่ส่วนท้ายของชื่อคลาส จะมีการระบุจำนวนคอลัมน์ของตารางพื้นฐาน 12 คอลัมน์ที่องค์ประกอบเฉพาะควรใช้):

• col-lg-* - คลาสที่ใช้สำหรับเพจสำหรับอุปกรณ์หน้าจอขนาดใหญ่ เช่น แล็ปท็อป
• col-md-* - คลาสสำหรับเพจที่ออกแบบมาสำหรับอุปกรณ์หน้าจอขนาดกลาง เช่น แท็บเล็ต
• col-sm-* - คลาสสำหรับเพจที่ออกแบบมาสำหรับหน้าจอขนาดเล็ก เช่น ที่พบในสมาร์ทโฟน

แถบนำทาง แถบนำทางใน Bootstrap ถูกสร้างขึ้นโดยใช้คลาส .navbar อันที่จริงมันเป็น wrapper ที่วางองค์ประกอบที่สร้างแถบนำทางไว้ ด้านล่างคือแผงที่เราจะสร้างตอนนี้ ตั้งอยู่ที่ด้านบนของหน้าและไม่หายไปเมื่อเลื่อน

แถบนำทาง

ดังนั้น เพื่อให้แถบนำทางปรากฏบนหน้าเว็บ เราจะเพิ่มแท็กใน index.html ด้วยคลาส .navbar ซึ่งภายในนั้นจะใช้คลาสอื่น เช่น .navbar-brand , .navbar-toggler และ .nav -item เราสร้างองค์ประกอบพิเศษและโครงสร้างของระบบนำทางไซต์ คลาส .fixed-top ช่วยให้คุณสามารถแก้ไขแถบนำทางที่ด้านบนของหน้าได้ นี่คือเค้าโครงแถบนำทาง:

บ้าน

• เกี่ยวกับ
• ผลงาน
• ทีม
• โพสต์
• ติดต่อ

ตอนนี้เรามาสร้างไฟล์ main.css และเชื่อมต่อกับเพจโดยวางไฟล์ต่อไปนี้ในแท็กไฟล์ index.html:

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

Navbar( พื้นหลัง:#F97300; ) .nav-link , .navbar-brand( color: #f4f4f4; cursor: pointer; ) .nav-link( margin-right: 1em !important; ) .nav-link:hover( พื้นหลัง : #f4f4f4; color: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( พื้นหลัง:#fff !important; )
ตาราง Bootstrap ใหม่ใช้ flexbox ดังนั้นคุณจึงจำเป็นต้องใช้คุณสมบัติที่เหมาะสมเพื่อจัดแนวเนื้อหา ตัวอย่างเช่น ในการวางเมนูแถบนำทางทางด้านขวา คุณต้องใช้คุณสมบัติ justify-content และตั้งค่าเป็น flex-end:

Navbar-ยุบ ( ปรับเนื้อหา: flex-end; )
หากต้องการปรับแต่งสีพื้นหลังของแถบนำทาง คุณสามารถใช้คลาส .bg-light (พื้นหลังสีอ่อน), .bg-dark (พื้นหลังสีเข้ม) และ .bg-primary (สีพื้นหลังหลัก) เราใช้การตั้งค่าต่อไปนี้:

Bg-dark( สีพื้นหลัง:#343a40!important ) .bg-primary( สีพื้นหลัง:#343a40!important )

ส่วนหัวของหน้า แท็กต่อไปนี้ใช้เพื่ออธิบายส่วนหัวของหน้า:

มาเตรียมโครงร่างส่วนหัวของหน้ากัน เราต้องการให้ครอบคลุมความสูงทั้งหมดของหน้าต่าง ดังนั้น jQuery จึงมีประโยชน์ตรงนี้ มาสร้างไฟล์ main.js และเชื่อมต่อกับ index.html ก่อนแท็กปิด:

มาเพิ่มสิ่งต่อไปนี้ในไฟล์ main.js:

$(document).ready(function())( $(".header").height($(window).height()); ))
เป็นความคิดที่ดีที่จะวางภาพพื้นหลังสวยๆ ไว้ในส่วนหัวของหน้า มาทำแบบนี้:

/*สไตล์ส่วนหัว*/ .header( ภาพพื้นหลัง: url("../images/headerback.jpg"); การแนบพื้นหลัง: แก้ไขแล้ว; ขนาดพื้นหลัง: ปก; ตำแหน่งพื้นหลัง: กึ่งกลาง; )
นี่คือสิ่งที่เราลงเอยด้วย

ส่วนหัวของหน้าพร้อมภาพพื้นหลัง

สำหรับตอนนี้ ส่วนหัวของไซต์ดูว่างเปล่าเล็กน้อย ดังนั้นเรามาเพิ่มองค์ประกอบให้กับมัน โดยกำหนดคลาส .overlay ซึ่งจะนำไปสู่การสร้างบล็อกที่อยู่ด้านบนของภาพพื้นหลังของส่วนหัว มาเปลี่ยนส่วนของไฟล์ index.html ที่เราอธิบายส่วนหัวดังนี้:

จากนั้นใน main.css ให้เพิ่มข้อมูลต่อไปนี้:

ภาพซ้อนทับ (ตำแหน่ง: สัมบูรณ์; ความสูงขั้นต่ำ: 100%; ความกว้างขั้นต่ำ: 100%; ซ้าย: 0; บน: 0; พื้นหลัง: rgba (244, 244, 244, 0.79); )
ตอนนี้เรามาเพิ่มคำอธิบายของโครงการที่ส่วนหัวกัน เราจะวางมันไว้ในองค์ประกอบใหม่ด้วยคลาส .containter นี่คือคลาสตัวช่วยสำหรับเฟรมเวิร์ก Bootstrap ที่ออกแบบมาเพื่อจัดวางเนื้อหาตามความต้องการของเลย์เอาต์แบบตอบสนอง มาร์กอัปจะเปลี่ยนแปลงไปอย่างไรในขั้นตอนนี้:

ตอนนี้เรามาเพิ่มองค์ประกอบอื่นที่นี่ ซึ่งเราจะกำหนด class.description:

▍ สวัสดี ยินดีต้อนรับสู่เว็บไซต์อย่างเป็นทางการของฉัน

Cillum dolore eu fugiat nulla pariatur. ยกเว้น occaecat cupidatat ไม่ภูมิใจ, sunt ใน culpa qui officia deserunt mollit anim id est laborum.

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

Buttons Bootstrap มีคลาสมากมายสำหรับปุ่ม คุณสามารถดูตัวอย่างการออกแบบปุ่มได้ อย่างที่คุณเห็นในตัวอย่างมาร์กอัปจากส่วนก่อนหน้า เราเพิ่มคลาส .btn และองค์ประกอบ btn-โครงร่างรอง

ตอนนี้มาตั้งค่าสไตล์สำหรับคลาสคำอธิบาย:

คำอธิบาย ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 30%; ระยะขอบ: อัตโนมัติ; การขยาย: 2em; ) .คำอธิบาย h1( สี:#F97300 ; ) .คำอธิบาย p( สี:#666; ขนาดตัวอักษร: 20px; ความกว้าง: 50%; ความสูงบรรทัด: 1.5; .ปุ่มคำอธิบาย ( border:1px solid #F97300; พื้นหลัง:#F97300; color:#fff; )
ส่วนหัวของหน้าจะมีลักษณะดังนี้หลังจากทำตามขั้นตอนข้างต้นแล้ว:

ส่วนหัวของหน้าที่มีคำอธิบายของโครงการเกี่ยวกับ Section First มาดูกันว่าเราต้องการสร้างอะไร นี่คือส่วนหนึ่งของหน้าพร้อมข้อมูลเกี่ยวกับนักพัฒนาเว็บ

เกี่ยวกับส่วน

ที่นี่เราจะใช้ความสามารถกริดของ Bootstrap เพื่อสร้างเค้าโครงส่วนสองส่วน มาเริ่มต้นด้วยการเพิ่ม class.row ให้กับองค์ประกอบหลักของส่วน:

ส่วนแรกของเลย์เอาต์จะอยู่ทางด้านซ้ายโดยจะมีรูปถ่าย ส่วนที่สองทางด้านขวามีคำอธิบาย

มาร์กอัปทางด้านซ้ายของส่วนนี้มีลักษณะดังนี้:

// ด้านซ้าย เอส.เว็บ นักพัฒนา
และนี่คือสิ่งที่จะเกิดขึ้นหลังจากเพิ่มคำอธิบายทางด้านขวาของเค้าโครงที่นี่:

นักพัฒนา S.Web ▍D.John

Ipsum dolor นั่ง amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. เริ่มต้นด้วยการใช้ขั้นต่ำ veniam, การออกกำลังกายแบบ nostrud, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ใน reprehenderit ใน voluptate velit esse cillum dolore eu fugiat nulla pariatur. ยกเว้น occaecat คิวปิดัตโน

สังเกตการตั้งค่าความกว้างของคอลัมน์โดยใช้คลาส col-lg-* , col-md-* และ col-sm-* ที่อธิบายไว้ข้างต้น

นี่คือสไตล์สำหรับทั้งหมดนี้:

เกี่ยวกับ ( ระยะขอบ: 4em 0; การขยาย: 1em; ตำแหน่ง: ญาติ; ) .เกี่ยวกับ h1( สี:#F97300; ระยะขอบ: 2em; ) .เกี่ยวกับ img( ความสูง: 100%; ความกว้าง: 100%; รัศมีเส้นขอบ: 50% ) .about span( จอแสดงผล: บล็อก; สี: #888; ตำแหน่ง: สัมบูรณ์; ซ้าย: 115px; ) .about .desc( padding: 2em; border-left:4px solid #10828C; ) .about .desc h3( color: #10828C; ) .about .desc p( line-height:2; color:#888; )

ส่วนพอร์ตโฟลิโอ ตอนนี้เรามาดูส่วนที่จะแสดงพอร์ตโฟลิโอของนักพัฒนา โดยจะมีแกลเลอรี่ผลงาน

ส่วนผลงาน

เมื่อสร้างเลย์เอาต์ของส่วนนี้ จะใช้หลักการเดียวกันกับการทำงานกับกริดที่เรากล่าวถึงข้างต้น:

ผลงาน
การเพิ่มคลาส .img-fluid ให้กับแต่ละรูปภาพทำให้รูปภาพตอบสนองได้

แต่ละองค์ประกอบในแกลเลอรีของเราบนหน้าจอขนาดกลางและขนาดใหญ่จะมี 4 คอลัมน์ (โปรดจำไว้ว่า - คลาส col-sm-12 ใช้สำหรับอุปกรณ์ที่มีหน้าจอขนาดเล็ก คลาส col-md-4 ใช้สำหรับหน้าจอขนาดกลาง col-lg-4 - สำหรับอุปกรณ์ที่มีหน้าจอขนาดใหญ่) ด้วยเหตุนี้ บนหน้าจอขนาดใหญ่และขนาดกลาง องค์ประกอบหนึ่งจะคิดเป็นประมาณ 33.3% ขององค์ประกอบคอนเทนเนอร์ บนอุปกรณ์ขนาดเล็ก แต่ละองค์ประกอบจะครอบครองทั้งหน้าจอ (12 คอลัมน์)

จัดแต่งทรงผมแกลเลอรีผลงาน:

/*พอร์ตโฟลิโอ*/ .portfolio( ส่วนต่าง: 4em 0; ตำแหน่ง: สัมพันธ์; ) .พอร์ตโฟลิโอ h1( color:#F97300; ระยะขอบ: 2em; ) .พอร์ตโฟลิโอ img( ความสูง: 15rem; ความกว้าง: 100%; ส่วนต่าง: 1em; )

ส่วนบล็อกและการทำงานกับการ์ด เรามาพูดถึงการสร้างส่วนที่มีประกาศเนื้อหาจากบล็อกที่ดูแลโดยนักพัฒนาเว็บแบบมีเงื่อนไขของเรา

ส่วนบล็อก

ในการสร้างส่วนนี้ เราจำเป็นต้องมีการ์ดที่เรียกว่า (การ์ดในคำศัพท์ Bootstrap)

หากต้องการสร้างการ์ด คุณต้องรวมองค์ประกอบไว้ในโครงร่างและเพิ่มคลาส .card เข้าไป คุณสามารถใช้คลาสต่อไปนี้เพื่อกำหนดค่าองค์ประกอบการ์ดต่างๆ:

• .card-header: ส่วนหัว
• .card-body: เนื้อหาหลัก
• .card-title: ชื่อเรื่อง
• .card-ส่วนท้าย: ส่วนท้าย
• .card-image: รูปภาพ

มาร์กอัป HTML สำหรับส่วนนี้จะมีลักษณะดังนี้:

บล็อก ชื่อโพสต์

มีความภาคภูมิใจ อยู่ใน culpa qui officia deserunt mollit anim id est laborum

อ่านเพิ่มเติม ชื่อโพสต์

มีความภาคภูมิใจ อยู่ใน culpa qui officia deserunt mollit anim id est laborum

อ่านเพิ่มเติม ชื่อโพสต์

มีความภาคภูมิใจ อยู่ใน culpa qui officia deserunt mollit anim id est laborum

อ่านเพิ่มเติม
ต่อไปนี้เป็นรูปแบบสำหรับการ์ด:

บล็อก ( ระยะขอบ: 4em 0; ตำแหน่ง: ญาติ; ) .blog h1( color:#F97300; ระยะขอบ: 2em; ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( width: 100%; ความสูง: 12em; ) .blog .card-title( color:#F97300; ) .blog .card-body( padding: 1em; )
นี่คือลักษณะของหน้าเดียวของเราหลังจากสร้างส่วนบล็อก:

หน้าหลังจากเพิ่มส่วนบล็อกส่วนทีม ส่วนนี้จะมีข้อมูลเกี่ยวกับทีมงานโครงการ

ส่วนทีม

ในการสร้างส่วนนี้ เราจะใช้ตาราง โดยแบ่งพื้นที่ว่างระหว่างรูปภาพเท่าๆ กัน แต่ละภาพ (บนหน้าจอขนาดใหญ่และขนาดกลาง) จะใช้พื้นที่ 3 คอลัมน์ตาราง ซึ่งคิดเป็น 25% ของพื้นที่ทั้งหมด

นี่คือมาร์กอัป HTML สำหรับส่วนนี้:

ทีมงานของเรา ซาร่า ผู้จัดการ คริส เอส.เอ็นกินเนอร์ นักพัฒนาส่วนหน้าของ Layla เจ.จิราษฎร์ ผู้จัดการทีม
และนี่คือสไตล์:

ทีม( ระยะขอบ: 4em 0; ตำแหน่ง: ญาติ; ) .team h1( color:#F97300; ระยะขอบ: 2em; ) .team .item( ตำแหน่ง: ญาติ; ) .team .des( พื้นหลัง: #F97300; สี: #fff ; การจัดตำแหน่งข้อความ: กึ่งกลาง; เส้นขอบ-ล่าง-ซ้าย-รัศมี: 93%; การเปลี่ยนแปลง:.3s ความง่ายในการออก
มาตกแต่งส่วนนี้ด้วยภาพเคลื่อนไหวที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือรูปภาพ ควรมีลักษณะเหมือนภาพด้านล่าง

ภาพเคลื่อนไหวเมื่อวางเมาส์เหนือรูปภาพ

เพื่อให้บรรลุผลนี้ ให้เพิ่มสไตล์ต่อไปนี้ใน main.css:

ทีม .item:hover .des( ความสูง: 100%; พื้นหลัง:#f973007d; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 89%; การขยาย: 5em; ด้านบน: 0; เส้นขอบ-ล่างซ้าย-รัศมี: 0; )

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

แบบฟอร์มตอบรับ

เช่นเดียวกับ Bootstrap 3, Bootstrap 4 ใช้คลาส .form-control สำหรับฟิลด์อินพุต แต่ตอนนี้มีสิ่งใหม่เกิดขึ้น ตัวอย่างเช่น - แทนที่จะใช้ class.input-group-addon ที่ล้าสมัย จะใช้ class.input-group-prepend ใหม่ (สำหรับไอคอนและป้ายกำกับ) รายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้สามารถพบได้ในเอกสารประกอบ Bootstrap 4 ในกรณีของเรา แต่ละฟิลด์อินพุตจะถูกวางในองค์ประกอบที่กำหนดคลาส .form-group

มาเพิ่มสิ่งต่อไปนี้ในไฟล์ index.html:

ได้รับการติดต่อ
ต่อไปนี้เป็นรูปแบบสำหรับส่วนแบบฟอร์มคำติชม ซึ่งควรวางไว้ในไฟล์ main.css:

แบบฟอร์มการติดต่อ ( ระยะขอบ: 6em 0; ตำแหน่ง: ญาติ; ) .แบบฟอร์มการติดต่อ h1( padding:2em 1px; สี: #F97300; ) .แบบฟอร์มการติดต่อ .right( ความกว้างสูงสุด: 600px; ) .แบบฟอร์มการติดต่อ right .btn-secondary( พื้นหลัง: #F97300; color: #fff; border:0; ) .contact-form .right .form-control::placeholder( color: #888; font-size: 16px; )

แบบอักษร แบบอักษรมาตรฐานไม่เหมาะสำหรับทุกคน เราใช้ประโยชน์จาก Google Font API เพื่อใช้แบบอักษร Raleway ในโครงการของเรา ที่นี่จะดูดีมาก หากต้องการนำเข้าแบบอักษร ให้เพิ่มคำสั่งต่อไปนี้ลงในไฟล์ main.css:

@import url("https://fonts.googleapis.com/css?family=Raleway");
ต่อไป มาตั้งค่าสไตล์สากลสำหรับแท็ก HTML ต่างๆ:

Html,h1,h2,h3,h4,h5,h6,a( ตระกูลแบบอักษร: "Raleway"; )

เอฟเฟกต์การเลื่อน รูปภาพด้านล่างแสดงพฤติกรรมของเพจที่เราต้องการทำให้สำเร็จ

เลื่อนหน้าเมื่อคลิกลิงก์ในแถบนำทาง

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

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("value")).offset ( ).บน ),1000) ))
หลังจากนั้น เพิ่มแอตทริบิวต์ data-value ให้กับแต่ละลิงก์ในแถบนำทาง และทำให้มาร์กอัปมีลักษณะดังนี้:

เกี่ยวกับ

ผลงาน

บล็อก

ทีม

ติดต่อ

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

นี่เป็นการเติมเต็มตัวอย่างของเรา เพิ่มแท็ก

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

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

ตอนนี้เรามาดูการเปลี่ยนแปลงที่สำคัญที่สุด (ไม่เรียงลำดับใดเป็นพิเศษ):

#1: มุมมองปุ่ม

มาเริ่มกันด้วยอะไรที่สนุกและมีภาพกันดีกว่า! ปุ่มใน v4 มีการออกแบบที่เรียบกว่าใน v3 นี่คือปุ่มก่อนหน้า:

และนี่คือบางส่วนใหม่:

ซึ่งสอดคล้องกับแนวทางการออกแบบสมัยใหม่มากกว่า เช่น คู่มือการออกแบบวัสดุที่ได้รับความนิยมอย่างมากในช่วงสองสามปีที่ผ่านมา

#2: ปรับปรุงคำสั่งสื่อ

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

$grid-เบรกพอยต์: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

$ ตาราง - เบรกพอยต์ :( xs: 0, เอสเอ็ม: 576px, เอ็มดี: 768px, แอลจี: 992px, xl : 1200px - ค่าเริ่มต้น ;

ทำให้ง่ายต่อการสร้างกริดที่ทำงานได้ดีกับหน้าจอทุกขนาด

#3: การสนับสนุน Flexbox ทำให้เรามีความยืดหยุ่นมากขึ้น

ตอนนี้กริดที่มีชื่อเสียงของ Bootstrap ถูกสร้างขึ้นโดยใช้ Flexbox แทน float เมื่อมองแวบแรก สิ่งนี้ไม่ได้สร้างความแตกต่างให้กับนักพัฒนามากนัก เนื่องจากเค้าโครงกริดส่วนใหญ่ทำงานเหมือนกันทุกประการ อย่างไรก็ตาม นี่เป็นการเปิดความเป็นไปได้ใหม่ๆ หลายประการ

ก่อนหน้านี้เราต้องกำหนดความกว้างของแต่ละคอลัมน์ (ตั้งแต่ 1 ถึง 12) ตอนนี้คุณสามารถกำหนดความกว้างของคอลัมน์หนึ่งแล้วปล่อยให้ Flexbox ตั้งค่าความกว้างของคอลัมน์อื่นโดยอัตโนมัติ นี่คือตัวอย่างวิธีการดำเนินการนี้:

อย่างที่คุณเห็น เราตั้งค่าความกว้างของคอลัมน์กลางเป็น 6 (ซึ่งเท่ากับครึ่งหนึ่งของความกว้างทั้งหมด) และคอลัมน์อื่นๆ ก็ใช้พื้นที่ที่เหลือ

1 จาก 3 2 จาก 3 (กว้างกว่า) 3 จาก 3

< div class = "container" > < div class = "row" > < div class = "col" > 1 จาก 3 < / div > < div class = "col-6" > 2 จาก 3 (กว้างกว่า) < / div > < div class = "col" > 3 จาก 3 < / div > < / div > < / div >

คลาส Flexbox

Bootstrap 4 ยังมาพร้อมกับคลาสมากมายที่คุณสามารถใช้เพื่อจัดการคอนเทนเนอร์และองค์ประกอบ Flexbox หากต้องการเปลี่ยนองค์ประกอบให้เป็นคอนเทนเนอร์ Flexbox เพียงกำหนดคลาส d-flex ให้กับองค์ประกอบนั้น

ฉันเป็นคอนเทนเนอร์เฟล็กบ็อกซ์!

< div class = "d-flex" >ฉันเป็นคอนเทนเนอร์เฟล็กบ็อกซ์!< / div >

สิ่งนี้ทำให้คอนเทนเนอร์ Flexbox มีข้อความอยู่ข้างใน:

บันทึก. ฉันครอบคลุมเฉพาะสไตล์ที่เกี่ยวข้องกับ Flexbox เท่านั้น

มาเพิ่มองค์ประกอบอีกเล็กน้อยและแนะนำคลาสอื่นเพื่อควบคุมวิธีการวางตำแหน่งองค์ประกอบเหล่านั้นในคอนเทนเนอร์

เฟรมเวิร์ก Bootstrap 4 เริ่มต้นอย่างรวดเร็ว

เรียนรู้พื้นฐานของ Bootstrap 4 พร้อมตัวอย่างการออกแบบบล็อกตั้งแต่เริ่มต้น

< div >รายการดิ้น< / div >

< div >รายการดิ้น< / div >

< div >รายการดิ้น< / div >

< / div >

เป็นผลให้องค์ประกอบต่างๆ อยู่ตรงกลางในคอนเทนเนอร์:

#4: การจัดการการเยื้องโดยใช้คลาส

มันเจ๋งมาก ตอนนี้คุณสามารถควบคุมช่องว่างภายในและระยะขอบได้โดยใช้คลาส p-* และ m-* การแพดดิ้งอาจแตกต่างกันได้ตั้งแต่ 0.25 ถึง 3 rem โดยใช้ตัวเลขตั้งแต่ 0 ถึง 5 ตัวอย่างเช่น ลองตั้งค่าคอนเทนเนอร์ Flexbox เป็นคลาส p-5 เพื่อสร้างการแพดดิ้งสูงสุด

บทความที่เราจะวิเคราะห์ตาราง Bootstrap 4 ซึ่งใช้เพื่อสร้างเค้าโครงเว็บไซต์แบบตอบสนอง

วัตถุประสงค์ของกริด

เฟรมเวิร์กกริด Bootstrap 4 ได้รับการออกแบบมาเพื่อสร้างเค้าโครงเว็บไซต์ที่ตอบสนอง

ตาราง Bootstrap 4 ขึ้นอยู่กับคำสั่ง CSS Flexbox และ CSS การศึกษาสิ่งเหล่านี้จะช่วยให้คุณเข้าใจรายละเอียดมากขึ้นว่าตาราง Bootstrap 4 ทำงานอย่างไร

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

ใน Bootstrap 4 การเปลี่ยนรูปลักษณ์ของเค้าโครงจะดำเนินการผ่านการสืบค้นสื่อ คำขอสื่อแต่ละรายการใน Bootstrap จะขึ้นอยู่กับความกว้างขั้นต่ำของวิวพอร์ตของเบราว์เซอร์ (เบรกพอยต์ เบรกพอยต์ ชื่ออุปกรณ์)

เฟรมเวิร์ก Bootstrap 4 มีเบรกพอยต์หรือชื่ออุปกรณ์ 5 รายการ (ไม่มีป้ายกำกับ, sm, md, lg, xl) ดังนั้นจึงช่วยให้คุณสร้างเลย์เอาต์ที่อาจดูแตกต่างกันในแต่ละอุปกรณ์ได้

ใน Bootstrap 4 เมื่อเปรียบเทียบกับ Bootstrap 3 จำนวนจุดพักมีการเปลี่ยนแปลง ใน Bootstrap 3 มีสี่รายการ: xs, sm, md และ lg

องค์ประกอบตาราง

ตาราง Bootstrap 4 ประกอบด้วยองค์ประกอบต่อไปนี้:

• ห่อภาชนะ (ภาชนะและภาชนะบรรจุของเหลว);
• แถว (แถว);
• บล็อกแบบปรับได้ (col)

ห่อภาชนะ

คอนเทนเนอร์แบบห่อหุ้มเป็นองค์ประกอบกริด Bootstrap 4 ซึ่งเริ่มต้นการสร้างเพจแบบตอบสนองหรือเค้าโครงบล็อก ต้องวางองค์ประกอบกริดอื่นๆ (แถวและบล็อกแบบปรับได้) ไว้ข้างใน

Bootstrap 4 มีตัวห่อคอนเทนเนอร์ 2 ประเภท: responsive-fixed และ responsive-fluid

มาร์กอัป HTML ของคอนเทนเนอร์ที่ตอบสนองคงที่:

...

มาร์กอัป HTML ของคอนเทนเนอร์ยางที่ตอบสนอง:

...

คอนเทนเนอร์แรก (แบบตอบสนองคงที่) จะใช้เมื่อคุณต้องการสร้างเลย์เอาต์ที่มีความกว้างซึ่งจะต้องคงที่ภายในความกว้างของวิวพอร์ตของเบราว์เซอร์

การพึ่งพาความกว้างของคอนเทนเนอร์แบบคงที่แบบปรับได้กับความกว้างของวิวพอร์ตเบราว์เซอร์จะแสดงในตาราง:

ซึ่งหมายความว่าคอนเทนเนอร์แบบปรับเปลี่ยนได้จะมี:

• ความกว้าง 100% สำหรับความกว้างของวิวพอร์ตสูงสุด 576px;
• 540px พร้อมความกว้างวิวพอร์ตตั้งแต่ 576 ถึง 768px;
• 720px พร้อมความกว้างวิวพอร์ตตั้งแต่ 768 ถึง 992px เป็นต้น

ในทิศทางแนวนอน คอนเทนเนอร์ที่ตอบสนองคงที่จะอยู่ตรงกลาง ซึ่งทำได้ใน bootstrap.css ผ่านคุณสมบัติ CSS margin-left: auto และ margin-right: auto

คอนเทนเนอร์ที่สอง (ยางตอบสนอง) จะใช้เมื่อคุณต้องการสร้างเลย์เอาต์ที่ยืดหยุ่นอย่างสมบูรณ์ของหน้าหรือบางบล็อก คอนเทนเนอร์นี้มีความกว้าง 100% สำหรับความกว้างของวิวพอร์ตใดๆ

นอกจากนี้ คอนเทนเนอร์แบบห่อหุ้ม (คอนเทนเนอร์และคอนเทนเนอร์แบบของเหลว) ยังมีช่องว่างภายในด้านซ้ายและขวาขนาด 15px การตั้งค่าช่องว่างภายในสำหรับห่อคอนเทนเนอร์ทำได้ในไฟล์ Bootstrap 4 CSS โดยใช้คุณสมบัติ padding-left: 15px และ padding-right: 15px

เมื่อสร้างเค้าโครงโดยใช้ตาราง Bootstrap 4 อย่าวางคอนเทนเนอร์แบบ wrapper ไว้ภายในคอนเทนเนอร์อื่น

แถว

แถวเป็นองค์ประกอบกริดพิเศษ (แถว) ที่ใช้เมื่อสร้างเค้าโครงในกรณีต่อไปนี้:

• ระหว่างคอนเทนเนอร์กับบล็อกแบบปรับได้ที่ต้องวางไว้ในนั้น
• ระหว่างบล็อกอะแดปทีฟหนึ่งกับบล็อกอะแดปทีฟอื่นๆ ซึ่งจะต้องวางอยู่ในบล็อกอะแดปทีฟแรก

มาร์กอัป HTML แถว:

...

ต่างจาก Bootstrap 3 ที่แถวทำหน้าที่เพียงเพื่อชดเชยช่องว่างภายในด้านซ้ายและขวาของคอนเทนเนอร์ wrapper หรือบล็อกที่ตอบสนองเท่านั้น ใน Bootstrap 4 มีบทบาทสำคัญมาก นี่เป็นเพราะความจริงที่ว่ากริดนี้สร้างขึ้นบน CSS Flexbox ในตารางนี้ จะทำหน้าที่เป็นคอนเทนเนอร์ดิ้นสำหรับองค์ประกอบดิ้น (บล็อกแบบปรับได้) เหล่านั้น. หากคุณใช้บล็อกแบบปรับได้นอกแถว บล็อกเหล่านั้นจะไม่ทำงาน ใน Bootstrap 4 บล็อกที่ตอบสนองจะต้องอยู่ในบล็อกที่มีคลาสแถว

การชดเชยระยะขอบภายในนั้นดำเนินการในลักษณะเดียวกับใน Bootstrap 3 เนื่องจากระยะขอบด้านซ้ายและขวาเป็นลบเท่ากับ 15px (margin-left:-15px และ margin-right:-15px)

ตัวอย่างวิธีการชดเชยช่องว่างภายใน:

คอนเทนเนอร์ (+15px) -> แถว (-15px) -> คอลัมน์ (+15px) -> เนื้อหาคอนเทนเนอร์ของเหลว (+15px) -> แถว (-15px) -> คอลัมน์ (+15px) -> แถว (-15px) -> คอลัมนฌ (+15px) -> เนื้อหา

เป็นผลให้ระยะขอบจากขอบซ้ายและขวาของคอนเทนเนอร์ที่ตัดไปยังเนื้อหาจะเป็น 15px เสมอ

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

ตัวอย่างเช่น:

... … … … ...

บล็อกแบบปรับตัวได้

บล็อกแบบปรับเปลี่ยนได้เป็นส่วนสำคัญของรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ โดยจะกำหนดว่าเค้าโครงหน้าเว็บจะมีลักษณะอย่างไรในจุดควบคุมต่างๆ (ไม่มีสัญลักษณ์, sm, md, lg และ xl)

การสร้างบล็อกแบบปรับได้นั้นง่ายมาก: โดยการเพิ่มคลาสอย่างน้อยหนึ่งคลาส col-?-? ไปยังองค์ประกอบ HTML ที่ต้องการ

ในคลาส col-?-?> แทนที่จะเป็นเครื่องหมายคำถามแรก ชื่อของจุดควบคุมจะถูกระบุ: ไม่มีการกำหนด, sm, md, lg หรือ xl แทนที่จะเป็นเครื่องหมายคำถามที่สอง ความกว้างของบล็อกแบบปรับได้จะถูกระบุ ซึ่งควรมีที่จุดควบคุมที่ระบุ ความกว้างของบล็อกตอบสนองถูกระบุในรูปแบบสัมพันธ์โดยใช้ตัวเลขตั้งแต่ 1 ถึง 12 (คอลัมน์ Bootstrap)

ตัวเลขนี้จะกำหนดความกว้างของบล็อกแบบปรับได้ที่จุดควบคุมที่ระบุจากความกว้างของบล็อกหลัก เช่น แถว. ความกว้างของแถวในแง่ตัวเลข (คอลัมน์ Bootstrap) คือ 12

ตัวอย่างเช่น บล็อกที่มีคลาส col-md-4 ที่จุดควบคุม md จะครอบครอง 4/12 ของความกว้างของแถว เช่น 33.3% (เช่น 4/12*100% = 33.3%)

บล็อกแบบปรับเปลี่ยนได้ เช่นเดียวกับคอนเทนเนอร์ มีช่องว่างภายในด้านซ้ายและขวา 15px การเสริมเหล่านี้สำหรับบล็อกแบบปรับได้ของเฟรมเวิร์ก Bootstrap 4 ได้รับการตั้งค่าโดยใช้คุณสมบัติ CSS padding-left: 15px และ padding-right: 15px

ต้องวางบล็อกแบบปรับได้เรียงกันเป็นแถว เหล่านั้น. บล็อกแบบอะแดปทีฟใดๆ จะต้องมีบล็อกที่มีแถวคลาสเป็นพาเรนต์

ตัวอย่างเช่น พิจารณาว่าบล็อกการตอบสนองต่อไปนี้จะกว้างแค่ไหนในแต่ละอุปกรณ์:

...

บล็อกแบบปรับได้นี้จะมี:

• สูงสุด sm (โดย xs) ความกว้างเท่ากับ 12 คอลัมน์ Bootstrap (เช่น 12/12*100%=100% ของความกว้างแถว)
• บนอุปกรณ์ sm ความกว้างเท่ากับ 9 คอลัมน์ Bootstrap (เช่น 9/12*100%=75% ของความกว้างแถว)
• บนอุปกรณ์ md ความกว้างเท่ากับ 7 คอลัมน์ Bootstrap (เช่น 7/12*100%=58.3% ของความกว้างแถว)
• บนอุปกรณ์ lg ความกว้างเท่ากับ 5 คอลัมน์ Bootstrap (เช่น 5/12*100%=41.6% ของความกว้างแถว)
• บนอุปกรณ์ xl มีความกว้างเท่ากับ 3 คอลัมน์ Bootstrap (เช่น 3/12*100%=25% ของความกว้างแถว)

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

บล็อกตอบสนองบนอุปกรณ์ md และ lg จะมีความกว้างเท่ากับ 6 คอลัมน์ Bootstrap: (12) -> sm(6) -> md -> lg -> xl(3)

บล็อกที่ตอบสนองบนอุปกรณ์ sm จะมีความกว้างเท่ากับ 8 คอลัมน์ Bootstrap และบนอุปกรณ์ lg และ xl จะมีความกว้างเท่ากับ 4 คอลัมน์ Bootstrap: (8) -> sm -> md(4) -> lg - >xl.

บล็อกตอบสนองบนอุปกรณ์ทั้งหมดจะมีความกว้างเท่ากับ 6 คอลัมน์ Bootstrap: (6) -> sm -> md -> lg -> xl

บล็อกแบบปรับเปลี่ยนได้โดยไม่มีคอลัมน์

มีการเพิ่มคลาสพิเศษ col , col-sm , col-md , col-lg , col-xl , col-auto , col-sm-auto , col-md-auto , col-lg-auto และ col-xl Bootstrap 4 grid -auto

กลุ่มคลาสแรก (col, col-sm, col-md, col-lg, col-xl) มีไว้สำหรับการสร้างบล็อกแบบปรับได้ซึ่งความกว้างจะขึ้นอยู่กับพื้นที่ว่างของบรรทัด ความกว้างว่าง (พื้นที่ว่าง) ของเส้นจะกระจายเท่าๆ กันระหว่างบล็อกดังกล่าวทั้งหมด นอกจากนี้ บล็อกแบบปรับได้เหล่านี้ยังมีความกว้างเป็นศูนย์ก่อนที่จะจัดสรรพื้นที่ว่างในบรรทัด (โดยค่าเริ่มต้น)

ลองดูตัวอย่างบางส่วน

1. สร้างบล็อกแบบปรับได้ 5 บล็อกที่มีความกว้างเท่ากันติดต่อกัน

1/5 2/5 3/5 4/5 5/5

การคำนวณความกว้าง:

• พื้นที่ว่างบนบรรทัด - 100% (เนื่องจากความกว้างคือ 0)
• ความกว้างของแต่ละบล็อกแบบปรับได้คือ 20% (100%/5)

2. ความกว้างของบล็อกที่มีคลาส col หากมีบล็อกแบบปรับได้พร้อมจำนวนคอลัมน์ในบรรทัด

- 7 คอลัมน์? -

การคำนวณความกว้าง:

• พื้นที่ว่างในบรรทัด - 41.67% ((12-7)/12*100%);
• ความกว้างของแต่ละบล็อกแบบอะแดปทีฟ ยกเว้น col-7 คือ 13.89% (41.67%/3)

ในเบราว์เซอร์ Safari บางเวอร์ชัน มีข้อผิดพลาดเมื่อใช้มาร์กอัปดังกล่าว ซึ่งสามารถแบ่งออกเป็นหลายบรรทัดได้

มี 2 ​​วิธีในการแก้ไขปัญหานี้:

• โดยการตั้งค่าบล็อกแบบปรับได้ border.col ( border: 1px solid transparent; )
• โดยการตั้งค่าคุณสมบัติ CSS บล็อกตอบสนอง flex-basis .col ( flex: 1 0 20%; )

นอกจากนี้ ตาราง Bootstrap 4 ยังช่วยให้คุณวางบล็อกแบบตอบสนองได้โดยไม่ต้องระบุจำนวนคอลัมน์ในหลายบรรทัด

... ... ... ...

การดำเนินการนี้ดำเนินการโดยการเพิ่มองค์ประกอบ div ว่างที่มีคลาส w-100 ให้กับมาร์กอัปก่อนบล็อกแบบปรับได้ ซึ่งควรขึ้นต้นด้วยบรรทัดใหม่

หากจำเป็นต้องใช้การดำเนินการนี้กับจุดควบคุมบางจุดเท่านั้น คุณจะต้องเพิ่มคลาสยูทิลิตี้ที่ตอบสนอง Bootstrap 4 เข้าไปด้วย (คลาส w-100)

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

... ... ... ...

กลุ่มคลาสที่สอง (col-auto, col-sm-auto, col-md-auto, col-lg-auto และ col-xl-auto) ได้รับการออกแบบเพื่อสร้างบล็อกแบบปรับได้ซึ่งความกว้างจะถูกกำหนดตาม เนื้อหาของพวกเขา

ตัวอย่างเช่น:

(1) (2) - ความกว้างที่จุดควบคุม md, lg และ xl จะถูกกำหนดตามเนื้อหา (3)

ผลที่ตามมา:

• บนบล็อกแบบปรับตัว xs และ sm จะอยู่ในแนวตั้ง (อันหนึ่งอยู่ด้านล่างอีกอัน) และครอบครองความกว้างทั้งหมดของแถว
• บน md บล็อกตอบสนอง 2 จะมีความกว้างที่จำเป็นในการแสดงเนื้อหา หากบล็อก 2 ไม่ได้ใช้พื้นที่ความกว้างทั้งหมดของแถว บล็อกแบบปรับได้ 1 และ 3 จะแบ่งให้เท่ากัน หากบล็อก 2 ครอบคลุมความกว้างทั้งหมดของเส้น รูปภาพจะเหมือนกับที่จุดควบคุม xs และ sm
• บน lg และ xl บล็อกตอบสนอง 2 จะมีความกว้างที่จำเป็นในการแสดงเนื้อหา หากบล็อก 2 ไม่ได้ใช้พื้นที่ความกว้างทั้งหมดของแถว บล็อก 3 จะมีความกว้างเท่ากับ 2 คอลัมน์ Bootstrap และบล็อก 1 จะครอบครองความกว้างที่เหลือทั้งหมดของแถว หากบล็อก 2 ครอบคลุมความกว้างทั้งหมดของแถว มาร์กอัปจะเหมือนกับบน xs และ sm เฉพาะบล็อก 3 ใน 3 บรรทัดเท่านั้นที่จะมีความกว้างเท่ากับ 2 คอลัมน์ Bootstrap

การจัดเรียงบล็อกแบบปรับตัวเรียงกันเป็นแถว

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

(1) (2) (3) (4)

ลองดูอีกตัวอย่างหนึ่งที่บล็อกแบบปรับได้มีความกว้างต่างกันที่จุดควบคุมต่างกัน:

หลักการพื้นฐานของการจัดวางเค้าโครง

หลักการพื้นฐานของการวางเค้าโครงหน้าเว็บบนตาราง Bootstrap 4 คือการซ้อนบล็อกแบบปรับได้บางส่วนไว้ภายในบล็อกอื่นๆ

ในเวลาเดียวกัน ความกว้างของบล็อกแบบปรับได้จะเป็นค่าสัมพัทธ์เสมอ ซึ่งตั้งค่าไว้ในคอลัมน์ Bootstrap และขึ้นอยู่กับความกว้างของพาเรนต์เท่านั้น เช่น แถว.

เนื้อหาของหน้าเว็บควรอยู่ในบล็อกที่ตอบสนองเท่านั้น

ตัวอย่างเช่น ในโครงร่างที่มีอยู่ กล่าวคือในบล็อกแบบปรับได้ col-8 เราจะเพิ่มอีก 2 บล็อก:

... ...

ในการดำเนินการนี้ คุณต้องวางแถว (คอนเทนเนอร์สำหรับบล็อกแบบปรับได้) ในบล็อก col-8 ก่อน:

... ... Bootstrap 4 - การแทรกแถวลงในเนื้อหาของบล็อกที่ตอบสนอง col-8

หลังจากนั้นให้เพิ่มบล็อกแบบปรับได้ 2 บล็อกติดต่อกัน:

... ... ... Bootstrap 4 - การแทรกบล็อกที่ตอบสนองในแถว

การจัดแนวบล็อกแบบอะแดปทีฟ

การจัดแนวบล็อกแบบปรับได้ในทิศทางแนวนอนและแนวตั้งทำได้ใน Bootstrap 4 โดยใช้คลาสยูทิลิตี้เฟล็กซ์

การจัดแนวแนวตั้งของบล็อกแบบปรับได้

การจัดแนวแนวตั้งของบล็อกแบบปรับได้ภายในเส้นแถวจะดำเนินการโดยใช้คลาสใดคลาสหนึ่งต่อไปนี้ ซึ่งจะต้องเพิ่มลงในแถวเพิ่มเติม:

• align-items-start (สัมพันธ์กับการเริ่มต้นบรรทัด);
• จัดรายการ-ศูนย์ (กลาง);
• align-items-end (สัมพันธ์กับจุดสิ้นสุด)

ตัวอย่างเช่น ลองจัดบล็อกแบบปรับได้ทั้งหมดให้อยู่กึ่งกลางของเส้นแถว:

1/2 2/2

ตามค่าเริ่มต้น องค์ประกอบแบบตอบสนองจะใช้ความสูงทั้งหมดของบรรทัดแถวที่องค์ประกอบเหล่านั้นอยู่

การจัดตำแหน่งแนวตั้งของบล็อกแบบปรับได้เฉพาะภายในเส้นสามารถดำเนินการได้โดยคลาสใดคลาสหนึ่งต่อไปนี้:

• align-self-start (สัมพันธ์กับการเริ่มต้นบรรทัด);
• จัดกึ่งกลางตัวเอง (กลาง);
• align-self-end (สัมพันธ์กับจุดสิ้นสุด)

ต้องเพิ่มคลาสเหล่านี้ในบล็อกแบบปรับได้ ไม่ใช่ในแถว

ตัวอย่างเช่น เราจัดแนว Adaptive Block 2 ไว้ที่ขอบด้านล่างของเส้น:

(1) (2)

การจัดตำแหน่งแนวนอนของบล็อกแบบปรับได้

คลาสต่อไปนี้มีไว้สำหรับการจัดแนวบล็อกแบบปรับได้ในแนวนอน:

• justify-content-start (สัมพันธ์กับจุดเริ่มต้นของบรรทัดแถว - ค่าเริ่มต้น);
• จัดชิดขอบเนื้อหาศูนย์ (กลาง);
• justify-content-end (สัมพันธ์กับจุดสิ้นสุดของบรรทัด);
• ปรับเนื้อหาให้เหมาะสม (เท่า ๆ กันโดยคำนึงถึงพื้นที่ก่อนบล็อกปรับตัวแรกและสุดท้าย)
• ปรับเนื้อหาระหว่าง (เท่า ๆ กันโดยมีช่องว่างเท่ากันระหว่างบล็อกตอบสนอง)

ตัวอย่างเช่น กระจายบล็อกแบบปรับได้ในทิศทางแนวนอนเท่าๆ กัน:

(1) (2)

รูปแบบไร้ขอบที่ตอบสนอง

การเสริมภายในของบล็อกแบบปรับได้และระยะขอบลบภายนอกของแถวสามารถลบออกได้ หากมีการเพิ่มคลาส no-gutters เข้าไปในส่วนหลัง (เช่น แถว)

... ... ...

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

ใน Bootstrap 4 การชดเชยบล็อกแบบตอบสนองสามารถทำได้โดยใช้:

• คลาสชดเชย (สำหรับจำนวนคอลัมน์ที่แน่นอน);
• คลาสมาร์จิ้นการบริการ (ยูทิลิตี้)

คลาสออฟเซ็ต

คลาสออฟเซ็ตได้รับการออกแบบให้เลื่อนบล็อกแบบปรับได้ไปทางขวาตามจำนวนคอลัมน์ที่กำหนด

คลาสเหล่านี้มีไวยากรณ์ดังต่อไปนี้:

ออฟเซ็ต-(1) หรือออฟเซ็ต-(เบรกพอยต์)-(1)

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

(2) – ค่าออฟเซ็ตที่ระบุโดยใช้จำนวนคอลัมน์ Bootstrap

ตามตัวอย่าง เราจะตั้งค่าออฟเซ็ตให้กับบล็อกแบบอะแดปทีฟดังแสดงในรูป

(1) (2) (1) (2) (1)

ออฟเซ็ตโดยใช้คลาสมาร์จิ้น

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

ตัวเลือกการกระจัดนี้ (โดยใช้คลาสมาร์จิ้น) จะใช้เมื่อบล็อกจำเป็นต้องเลื่อนสัมพันธ์กันด้วยจำนวนตัวแปร

ใน Bootstrap 4 เพื่อการตั้งค่าการเยื้องระยะขอบสำหรับบล็อกที่สะดวกและปรับเปลี่ยนได้มากขึ้น (ระยะขอบซ้าย: อัตโนมัติ และ (หรือ) ระยะขอบขวา: อัตโนมัติ) คุณสามารถใช้คลาส ml-auto , mr-auto , ml-(breakpoint) )-auto และ mr-( เบรกพอยต์)-auto

Bootstrap 4 - ออฟเซ็ตบล็อกตอบสนอง

(1) (2) (1) (2) (3) (1) (2)

การเปลี่ยนลำดับการมองเห็นของบล็อกแบบปรับได้

ตามค่าเริ่มต้น บล็อกที่ตอบสนองจะแสดงตามลำดับที่ปรากฏในโค้ด HTML

การเปลี่ยนลำดับภาพของบล็อกตอบสนองใน Bootstrap 4 ทำได้โดยใช้คลาส order-(visual_number) คลาสนี้มีไว้สำหรับจุดตรวจ xs หากจำเป็นต้องกำหนดลำดับขององค์ประกอบไม่ใช่สำหรับจุดควบคุม xs แต่สำหรับ sm, md, lg หรือ xl แสดงว่าคลาสนี้เวอร์ชันต่อไปนี้ถูกใช้:

คำสั่งซื้อ-(เบรกพอยต์)-(visual_number)

แทนที่จะระบุ (visual_number) คุณต้องระบุตัวเลขตั้งแต่ 1 ถึง 12

ตัวเลขนี้จะกำหนดว่าองค์ประกอบต่างๆ จะปรากฏบนหน้าเว็บอย่างไร กล่าวคือ องค์ประกอบที่ปรับเปลี่ยนได้ทั้งหมดจะมองเห็นตามลำดับจากน้อยไปมากของตัวเลขเหล่านี้ หากองค์ประกอบไม่มีชุดคลาสการสั่งซื้อ จะมีค่าเริ่มต้นเป็น 0

ตัวอย่างเช่น ลองเปลี่ยนลำดับของบล็อกแบบปรับได้สองบล็อก:

ลำดับแรก (ไม่เรียงลำดับ ไม่มีคลาสลำดับ) ลำดับที่สอง แต่จะแสดงลำดับที่สาม แต่จะแสดงลำดับที่สอง

อีกตัวอย่างหนึ่ง (โดยใช้คลาสลำดับแบบปรับได้):

อันแรก (บน xs, sm จะแสดงอันที่สอง) อันที่สอง (บน xs, sm จะแสดงก่อน)

นอกจากตัวเลขแล้ว (โดยค่าเริ่มต้นตั้งแต่ 1 ถึง 12) คุณยังสามารถใช้คำว่า first และ Last ได้อีกด้วย คลาสเหล่านี้ (order-first, order-(breakpoint)-first, order-last, order-(breakpoint)-last) ช่วยให้คุณสามารถย้ายองค์ประกอบไปยังจุดเริ่มต้นหรือจุดสิ้นสุดได้ตามลำดับ

คลาส order-first และ order-(breakpoint)-first ออกฤทธิ์โดยการตั้งค่าคุณสมบัติการสั่งซื้อ CSS ขององค์ประกอบเป็น -1 (order: -1) และคลาส order-last และ order-(breakpoint)-last ตั้งค่า CSS สั่งซื้อคุณสมบัติเป็นค่า 13 (คำสั่งซื้อ: $columns + 1)

ลองเขียนตัวอย่างข้างต้นใหม่โดยใช้คลาสลำดับซึ่งใช้คำหลักคำแรกและคำสุดท้าย:

อันดับแรก (บน xs, sm จะแสดงเป็นลำดับสุดท้าย) สุดท้าย (บน xs, sm จะแสดงก่อน)

ตัวอย่างการใช้คลาสลำดับที่มีทั้งตัวเลขและคำที่ขึ้นต้นและสุดท้าย:

#1 (XS), #LAST (SM), #1 (MD, LG และ XL) #2 (XS), #7 (MD, LG และ XL) #3 (XS), #6 (MD, LG และ XL) ) #4 (XS), #5 (MD, LG และ XL) #5 (XS), #4 (MD, LG และ XL) #6 (XS), #3 (MD, LG และ XL) #7 (XS ), #2 (MD, LG และ XL) #8 (XS), #FIRST (SM), #8 (MD, LG และ XL)

ตัวอย่างของเค้าโครงแบบปรับได้บนตาราง Boostrap 4

มาสร้างเค้าโครงแบบตอบสนองสำหรับบล็อกหน้าเว็บที่แสดงในรูปโดยใช้ตาราง Bootstrap 4 - ตัวอย่างเค้าโครงบล็อกแบบตอบสนอง

1. สร้างมาร์กอัปบล็อกสำหรับอุปกรณ์มือถือ (xs)

(1) (2) (3) (4) (5)

2. ตั้งค่ามาร์กอัปสำหรับจุดควบคุม sm:

(1) (2) (3) (4) (5)

3. ตั้งค่าบล็อกตามจำนวนคอลัมน์ที่ควรมีบนอุปกรณ์ md และ lg:

(1) (2) (3) (4) (5)

4. สร้างมาร์กอัปสำหรับ xl:

(1) (2) (3) (4) (5)

เราลบจุดควบคุมที่ไม่จำเป็นออกจากบล็อกแบบปรับได้:

(1) (2) (3) (4) (5)

นอกจากนี้ ในตอนแรกใน Bootstrap 4 บล็อกตอบสนองจะมีความกว้าง 100% สิ่งนี้ทำให้คุณไม่สามารถระบุจำนวนคอลัมน์เมื่อสร้างบล็อกแบบปรับได้หากความกว้างเริ่มต้นควรเป็น 12 คอลัมน์ (100%)

(1) (2) (3) (4) (5)