Bootstrap Jumbotron และส่วนหัวของหน้า
การสร้าง Jumbotron
jumbotron หมายถึงกล่องขนาดใหญ่สำหรับการเรียกความสนใจเป็นพิเศษกับเนื้อหาหรือข้อมูลพิเศษบางอย่าง
jumbotron จะแสดงเป็นกล่องสีเทาที่มีมุมโค้งมน นอกจากนี้ยังขยายขนาดตัวอักษรของข้อความที่อยู่ภายใน
เคล็ดลับ:ภายใน jumbotron คุณสามารถใส่ HTML ที่ถูกต้องได้เกือบทั้งหมด รวมถึงองค์ประกอบ/คลาส Bootstrap อื่นๆ
ใช้<div>องค์ประกอบที่มีคลาส.jumbotronเพื่อสร้าง jumbotron:
Bootstrap กวดวิชา
Bootstrap เป็นเฟรมเวิร์ก HTML, CSS และ JS ที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาโปรเจ็กต์ที่เน้นอุปกรณ์พกพาบนเว็บ
Jumbotron ภายในคอนเทนเนอร์
วาง jumbotron ไว้ข้างใน<div class="container">หากคุณต้องการให้ jumbotron ไม่ขยายไปถึงขอบของหน้าจอ:
ตัวอย่าง
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Jumbotron นอกคอนเทนเนอร์
วาง jumbotron ไว้ด้านนอก<div class="container">หากคุณต้องการให้ jumbotron ขยายไปถึงขอบหน้าจอ:
ตัวอย่าง
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
การสร้างส่วนหัวของเพจ
ส่วนหัวของหน้าเป็นเหมือนตัวแบ่งส่วน
ชั้น.page-headerเรียนเพิ่มเส้นแนวนอนใต้ส่วนหัว (+ เพิ่มช่องว่างรอบองค์ประกอบ):
ส่วนหัวของหน้าตัวอย่าง
ใช้<div>องค์ประกอบที่มีคลาส.page-headerเพื่อสร้างส่วนหัวของหน้า:
ตัวอย่าง
<div class="page-header">
<h1>Example Page Header</h1>
</div>