ข้ามไปที่เนื้อหาหลัก
Bootstrap 4 มีเวอร์ชันใหม่กว่า!

ตัวอย่าง

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

ดาวน์โหลดซอร์สโค้ด

ส่วนประกอบที่กำหนดเอง

ส่วนประกอบและเทมเพลตใหม่ล่าสุดเพื่อช่วยให้ผู้คนเริ่มต้นใช้งาน Bootstrap ได้อย่างรวดเร็ว และสาธิตแนวทางปฏิบัติที่ดีที่สุดในการเพิ่มลงในเฟรมเวิร์ก

ภาพหน้าจอของอัลบั้ม
อัลบั้ม

เทมเพลตหน้าเดียวอย่างง่ายสำหรับแกลเลอรี่ภาพ พอร์ตโฟลิโอ และอื่นๆ

ภาพหน้าจอราคา
ราคา

หน้าราคาตัวอย่างที่สร้างด้วยการ์ดและมีส่วนหัวและส่วนท้ายที่กำหนดเอง

ภาพหน้าจอชำระเงิน
เช็คเอาท์

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

ภาพหน้าจอของผลิตภัณฑ์
ผลิตภัณฑ์

หน้าการตลาดที่เน้นผลิตภัณฑ์แบบลีนพร้อมงานกริดและรูปภาพที่กว้างขวาง

ภาพหน้าจอปก
ปิดบัง

เทมเพลตหน้าเดียวสำหรับสร้างโฮมเพจที่เรียบง่ายและสวยงาม

สกรีนช็อตภาพหมุน
ม้าหมุน

ปรับแต่งแถบนำทางและภาพหมุน จากนั้นเพิ่มส่วนประกอบใหม่

ภาพหน้าจอของบล็อก
บล็อก

นิตยสาร เช่น เทมเพลตบล็อกที่มีส่วนหัว การนำทาง เนื้อหาเด่น

ภาพหน้าจอแดชบอร์ด
แผงควบคุม

เชลล์แดชบอร์ดผู้ดูแลระบบขั้นพื้นฐานพร้อมแถบด้านข้างและแถบนำทางคงที่

ภาพหน้าจอลงชื่อเข้าใช้
เข้าสู่ระบบ

เค้าโครงและการออกแบบแบบฟอร์มแบบกำหนดเองสำหรับการลงชื่อเข้าใช้แบบฟอร์มอย่างง่าย

สกรีนช็อตส่วนท้ายที่ติดหนึบ
ส่วนท้ายติดหนึบ

แนบส่วนท้ายที่ด้านล่างของวิวพอร์ตเมื่อเนื้อหาของหน้าสั้น

สกรีนช็อตของแถบนำทางส่วนท้ายที่ติดหนึบ
แถบนำทางท้ายกระดาษติดหนึบ

แนบส่วนท้ายที่ด้านล่างของวิวพอร์ตด้วยแถบนำทางด้านบนแบบตายตัว

กรอบ

ตัวอย่างที่เน้นการใช้งานคอมโพเนนต์ในตัวที่จัดเตรียมโดย Bootstrap

ภาพหน้าจอเทมเพลตเริ่มต้น
เทมเพลตเริ่มต้น

ไม่มีอะไรนอกจากพื้นฐาน: CSS และ JavaScript ที่คอมไพล์แล้ว

ภาพหน้าจอกริด
กริด

ตัวอย่างเลย์เอาต์กริดที่มีทั้งสี่ระดับ การซ้อน และอื่นๆ อีกมากมาย

ภาพหน้าจอของ Jumbotron
จัมโบตรอน

สร้างรอบๆ จัมโบตรอนด้วยแถบนำทางและคอลัมน์กริดพื้นฐาน

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

ภาพหน้าจอของแถบนำทาง
แถบนำทาง

การสาธิตตัวเลือกการตอบสนองและคอนเทนเนอร์ทั้งหมดสำหรับแถบนำทาง

สกรีนช็อตแบบคงที่ของแถบนำทาง
แถบนำทางคงที่

ตัวอย่างแถบนำทางเดี่ยวของแถบนำทางด้านบนแบบคงที่พร้อมกับเนื้อหาเพิ่มเติมบางส่วน

แถบนำทางแก้ไขภาพหน้าจอ
แถบนำทางคงที่

ตัวอย่างแถบนำทางเดี่ยวที่มีแถบนำทางด้านบนแบบตายตัวพร้อมกับเนื้อหาเพิ่มเติมบางส่วน

ภาพหน้าจอด้านล่างของแถบนำทาง
แถบนำทางด้านล่าง

ตัวอย่าง navbar เดียวที่มี navbar ด้านล่างพร้อมกับเนื้อหาเพิ่มเติม

การทดลอง

ตัวอย่างที่เน้นคุณลักษณะหรือเทคนิคที่เป็นมิตรต่ออนาคต

ภาพหน้าจอของป้ายกำกับลอยตัว
ป้ายลอย

รูปแบบที่เรียบง่ายสวยงามพร้อมป้ายกำกับแบบลอยเหนืออินพุตของคุณ

ภาพหน้าจอของ Offcanvas
ออฟแคนวาส

เปลี่ยนแถบนำทางที่ขยายได้ของคุณให้เป็นเมนูออฟแคนวาสแบบเลื่อนได้