วิธีสร้างหลายคอลัมน์ที่ตอบสนองด้วย Bootstrap 3
เผยแพร่แล้ว: 2022-02-16
คุณต้องการปรับปรุงการตอบสนองเว็บไซต์ของคุณด้วย Bootstrap หรือไม่? สิ่งที่สำคัญที่สุดของ Bootstrap คือระบบกริดแรกบนมือถือ 12 คอลัมน์ นี่คือสิ่งที่คุณใช้เพื่อสร้างเลย์เอาต์ที่ตอบสนอง
ในวิดีโอสอนนี้ คุณจะต้องสร้างเว็บไซต์พื้นฐานโดยใช้ Bootstrap และเรียนรู้วิธีใช้ระบบกริด Bootstrap เพื่อสร้างเลย์เอาต์ที่ตอบสนองด้วยหลายคอลัมน์
ก่อนดูบทช่วยสอน
ก่อนที่คุณจะสามารถทำตามวิดีโอแนะนำด้านล่างและเรียนรู้วิธีสร้างคอลัมน์แบบโต้ตอบของคุณเอง คุณจะต้อง:
- ความเข้าใจพื้นฐานเกี่ยวกับ Bootstrap คืออะไร
- ความเข้าใจพื้นฐานว่าระบบกริด Bootstrap คืออะไร
- ดาวน์โหลด Bootstrap ลงในฮาร์ดไดรฟ์ของคุณ
- สร้างไฟล์ Bootstrap index.html พื้นฐานเพื่อสร้างเมื่อ
Bootstrap คืออะไร
- Bootstrap เป็นเฟรมเวิร์กสำหรับนักพัฒนา HTML, CSS และ JavaScript ที่ทำงานเกี่ยวกับการตอบสนองของเว็บไซต์
- ประกอบด้วยสไตล์ CSS ที่ตอบสนองที่สร้างไว้ล่วงหน้าสำหรับคอลัมน์ รายการ การนำทาง เว็บฟอร์ม และองค์ประกอบเว็บอื่นๆ อีกมากมาย
ทำความเข้าใจกับระบบ Bootstrap Grid
- ระบบตาราง Bootstrap แบ่งขนาดหน้าจอออกเป็นสี่ประเภท: เล็กพิเศษ เล็ก กลาง และใหญ่
- Extra-small สำหรับโทรศัพท์มือถือ The Small ใช้สำหรับแท็บเล็ต เช่น I-Pad สื่อสำหรับจอภาพเดสก์ท็อป และหน้าจอขนาดใหญ่มีไว้สำหรับจอภาพเดสก์ท็อปขนาดใหญ่เท่านั้น
- เพื่อช่วยคุณปรับแต่งการตอบสนองสำหรับหน้าจอทั้งสี่ประเภทนี้ Bootstrap แบ่งความกว้างของอุปกรณ์ดูเว็บออกเป็นระบบกริด 12 คอลัมน์
- Bootstrap Grid แต่ละประเภทจะตอบสนองก็ต่อเมื่อคุณกำหนดคลาส CSS ที่กำหนดให้กับคลาสนั้นเอง
- ตัวอย่างเช่น หากต้องการให้ div ตอบสนองสำหรับอุปกรณ์ขนาดเล็กพิเศษ div ต้องมีคลาส Bootstrap .col-xs-<number_of_columns_to_take> ของตัวเอง เช่น <div class="col-xs-6">
กำลังดาวน์โหลด Bootstrap
- ไปที่ getboostrap.com และคลิกที่ปุ่ม "ดาวน์โหลด Bootstrap":
- คุณจะเห็นหน้า "เริ่มต้นใช้งาน" คลิกที่ปุ่ม "ดาวน์โหลด Bootstrap":
- บันทึกไฟล์นี้ลงในฮาร์ดไดรฟ์ของคอมพิวเตอร์ ทุกที่ที่คุณต้องการ ไม่จำเป็นต้องบันทึกลงในเว็บเซิร์ฟเวอร์
- เปิดเครื่องรูดไฟล์นี้และเปลี่ยนชื่อโฟลเดอร์ที่แยกออกมาเป็น "bootstrap"
เตรียมพร้อมหน้า Bootstrap index.html พื้นฐานของคุณ
ขั้นตอนที่ 1. สร้างไฟล์ Bootstrap index.html ของคุณ
- กลับไปที่หน้า "เริ่มต้นใช้งาน" (http://getbootstrap.com/getting-started/#download) แล้วคลิกลิงก์ "เทมเพลตพื้นฐาน" ที่แถบด้านข้างขวา:
- คุณจะเห็นรหัส "เทมเพลตพื้นฐาน" คลิกที่ปุ่ม "คัดลอก" เพื่อคัดลอกรหัส:
- วางโค้ด "เทมเพลตพื้นฐาน" ในโปรแกรมแก้ไขข้อความแล้วบันทึกเป็น index.html ในโฟลเดอร์เดียวกัน ซึ่งคุณบันทึกโฟลเดอร์ "bootstrap" ตอนนี้มันจะกลายเป็นหน้าแรกของไซต์ Bootstrap ของคุณ
- เปิด index.html ที่สร้างขึ้นใหม่และดูเว็บไซต์ Bootstrap พื้นฐานของคุณ:
- เปิดไฟล์ index.html ในเท็กซ์เอดิเตอร์ของคุณและระหว่างแท็กเปิด <body> และ <h1> เพิ่ม <div class="container"> (1) ปิด div ใหม่นี้หลังจากปิด </h1> แท็ก (2) และบันทึกไฟล์:
- ตรวจสอบส่วนหน้าของหน้าและสังเกตว่า "สวัสดีชาวโลก!" ไม่ติดขอบหน้าอีกต่อไปและตอนนี้ได้ขยับไปทางขวาเล็กน้อยเพื่อให้ดูเป็นระเบียบมากขึ้น คลาส "คอนเทนเนอร์" ของ Bootstrap ที่คุณกำหนดให้กับ div นี้ได้เพิ่มระยะขอบบางส่วนลงในข้อความนี้:
- กลับไปที่ไฟล์ index.html ของคุณ ระหว่างแท็ก <h1> และ </h1> แทนที่ "Hello World!" ไปที่ "Trusthub" บันทึกไฟล์และตรวจสอบส่วนหน้าของเว็บไซต์ของคุณ
ขั้นตอนที่ 2. เพิ่มเนื้อหาและแถบด้านข้าง
- กลับไปที่ไฟล์ index.html ของคุณและอยู่ใต้โค้ด <h1>Trustub</h1> ให้คัดลอกและวางโค้ดต่อไปนี้:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- กลับไปที่ส่วนหน้าของเว็บไซต์ของคุณ รีเฟรช ตอนนี้คุณควรเห็นเนื้อหาของคุณและแถบด้านข้าง "ทีมของเรา" โดยที่ยังไม่เห็นรูปแบบการตอบสนองแบบคอลัมน์:
- กลับไปที่เว็บไซต์ getbootstrap.com และที่เมนูด้านบนให้คลิกที่ปุ่ม "CSS":
- บนแถบด้านข้างคลิกที่ปุ่ม "ระบบกริด":
- เลื่อนลงไปที่ส่วน "ตัวเลือกกริด" (1) และจดระบบกริด Bootstrap 12 คอลัมน์ที่มีขนาดหน้าจอสี่ประเภท ความกว้าง และคำนำหน้าคลาส CSS ที่กำหนด (2):
- ไม่ต้องกังวลหากตัวเลือกระบบกริด Bootstrap ยังไม่สมเหตุสมผลสำหรับคุณ ทุกอย่างจะมารวมกันเพื่อคุณในไม่กี่วินาทีเมื่อคุณเริ่มเล่นรอบ ๆ พวกเขาบนไซต์ของคุณ
- เปิดไฟล์ index.html ของคุณอีกครั้งและอยู่ใต้ <div class="row"> สำหรับ <div> ที่มีอยู่ ให้ป้อนคลาส "col-md-9" div ใหม่ของคุณควรมีลักษณะเป็น "div class="col-md-9">:
- ไปที่ div ของคุณ ซึ่งอยู่เหนือส่วนหัว <h2> "Out Team" และกำหนดคลาส CSS ของ Bootstrap grid "col-md-3" บันทึกไฟล์:
- กลับไปที่ไซต์ของคุณเพื่อดูการเปลี่ยนแปลงนี้ในการดำเนินการ กดปุ่ม F5 บนแป้นพิมพ์เพื่อรีเฟรชเว็บไซต์ของคุณ ตอนนี้ คุณจะเห็นว่าพื้นที่เนื้อหาและแถบด้านข้างของคุณอยู่เคียงข้างกัน
- ขณะนี้ div เนื้อหาของคุณใช้ 9 คอลัมน์ที่มีอยู่ใน Bootstrap grid 12 คอลัมน์ (75% ของความกว้างหน้าจอเดสก์ท็อปทั้งหมด) และแถบด้านข้างของคุณใช้ Bootstrap grid 12 คอลัมน์ 3 คอลัมน์ (25% ของความกว้างหน้าจอเดสก์ท็อปทั้งหมด):
ฉลาดหลักแหลม! ตอนนี้คุณพร้อมแล้วที่จะทำตามวิดีโอแนะนำด้านล่าง มาเริ่มกันเลย.
ยินดีด้วย! คุณเพิ่งเรียนรู้วิธีสร้างเค้าโครงหน้าเว็บแบบตอบสนองด้วยหลายคอลัมน์โดยใช้ Bootstrap คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Bootstrap หรือไม่? ถ้าใช่ โปรดไปที่ช่อง OSTraining YouTube ของเราและดู "บทแนะนำเกี่ยวกับ Bootstrap Framework"