สร้าง Jumbotron
jumbotron บ่งชี้กล่องใหญ่สำหรับการเรียกร้องความสนใจเป็นพิเศษกับเนื้อหาพิเศษบางอย่างหรือข้อมูล
jumbotron จะปรากฏเป็นกล่องสีเทาที่มีมุมโค้งมน นอกจากนี้ยังขยายขนาดตัวอักษรของข้อความที่อยู่ภายในนั้น
เคล็ดลับ: ภายใน jumbotron ที่คุณสามารถใส่เกือบทุก HTML ที่ถูกต้องรวมทั้งอื่น ๆ Bootstrap องค์ประกอบ / ชั้นเรียน
ใช้ <div> องค์ประกอบที่มีระดับ .jumbotron เพื่อสร้าง jumbotron A:
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 ในการสร้างส่วนหัวของหน้า: