ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Jumbotron and Page Header


สร้าง 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 ในการสร้างส่วนหัวของหน้า:

ตัวอย่าง

<div class="page-header">
  <h1>Example Page Header</h1>
</div>
ลองตัวเอง»