Glyphicons

ร่ายมนตร์ที่มีจำหน่าย

รวมร่ายมนตร์มากกว่า 250 แบบในรูปแบบฟอนต์จากชุด Glyphicon Halflings Glyphicons Halflings มักไม่มีให้เล่นฟรี แต่ผู้สร้างได้เปิดให้ใช้ Bootstrap ได้ฟรี เพื่อเป็นการขอบคุณ เราขอให้คุณใส่ลิงก์กลับไปยังGlyphiconsทุกครั้งที่ทำได้

  • glyphicon glyphicon-ดอกจัน
  • glyphicon glyphicon-พลัส
  • glyphicon glyphicon ยูโร
  • glyphicon glyphicon-eur
  • glyphicon glyphicon ลบ
  • glyphicon glyphicon เมฆ
  • glyphicon glyphicon-ซองจดหมาย
  • glyphicon glyphicon ดินสอ
  • glyphicon glyphicon แก้ว
  • glyphicon glyphicon-ดนตรี
  • glyphicon glyphicon-ค้นหา
  • glyphicon glyphicon หัวใจ
  • glyphicon glyphicon-star
  • glyphicon glyphicon ดาวว่าง
  • glyphicon glyphicon ผู้ใช้
  • glyphicon glyphicon ฟิล์ม
  • glyphicon glyphicon-th-ขนาดใหญ่
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-รายการ
  • glyphicon glyphicon-ตกลง
  • glyphicon glyphicon-ลบ
  • glyphicon glyphicon-ซูมเข้า
  • glyphicon glyphicon-ซูมออก
  • glyphicon glyphicon-off
  • glyphicon glyphicon-สัญญาณ
  • glyphicon glyphicon-cog
  • glyphicon glyphicon ถังขยะ
  • glyphicon glyphicon บ้าน
  • glyphicon ไฟล์ glyphicon
  • glyphicon glyphicon-เวลา
  • glyphicon glyphicon ถนน
  • glyphicon glyphicon-ดาวน์โหลด-alt
  • glyphicon glyphicon-ดาวน์โหลด
  • glyphicon glyphicon-อัพโหลด
  • glyphicon glyphicon-กล่องจดหมาย
  • glyphicon glyphicon-เล่น-วงกลม
  • glyphicon glyphicon-ซ้ำ
  • glyphicon glyphicon-รีเฟรช
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon ล็อค
  • glyphicon glyphicon ธง
  • glyphicon glyphicon หูฟัง
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-บาร์โค้ด
  • glyphicon glyphicon-แท็ก
  • glyphicon glyphicon-แท็ก
  • glyphicon glyphicon-book
  • glyphicon glyphicon-คั่นหน้า
  • glyphicon glyphicon พิมพ์
  • glyphicon glyphicon กล้อง
  • glyphicon glyphicon แบบอักษร
  • glyphicon glyphicon-ตัวหนา
  • glyphicon glyphicon-ตัวเอียง
  • glyphicon glyphicon-ข้อความ-ความสูง
  • glyphicon glyphicon-ข้อความกว้าง
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-จัดตำแหน่งขวา
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-เยื้องซ้าย
  • glyphicon glyphicon-เยื้องขวา
  • glyphicon glyphicon-facetime-วิดีโอ
  • glyphicon glyphicon รูปภาพ
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-ปรับ
  • glyphicon glyphicon-tint
  • glyphicon glyphicon แก้ไข
  • glyphicon glyphicon แบ่งปัน
  • glyphicon glyphicon ตรวจสอบ
  • glyphicon glyphicon ย้าย
  • glyphicon glyphicon ก้าวถอยหลัง
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon ย้อนกลับ
  • glyphicon glyphicon-เล่น
  • glyphicon glyphicon หยุดชั่วคราว
  • glyphicon glyphicon หยุด
  • glyphicon glyphicon ไปข้างหน้า
  • glyphicon glyphicon กรอไปข้างหน้า
  • glyphicon glyphicon ก้าวไปข้างหน้า
  • glyphicon glyphicon-ดีดออก
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • สัญลักษณ์ glyphicon-plus-sign
  • สัญลักษณ์ glyphicon-เครื่องหมายลบ
  • glyphicon glyphicon-ลบเครื่องหมาย
  • glyphicon glyphicon-ok-เครื่องหมาย
  • glyphicon glyphicon-คำถาม-สัญญาณ
  • สัญลักษณ์ glyphicon-info-sign
  • glyphicon glyphicon-สกรีนช็อต
  • glyphicon glyphicon-ลบวงกลม
  • glyphicon glyphicon-ตกลง วงกลม
  • สัญลักษณ์ glyphicon-ban-circle
  • glyphicon glyphicon ลูกศรซ้าย
  • glyphicon glyphicon-ลูกศรขวา
  • glyphicon glyphicon ลูกศรขึ้น
  • glyphicon glyphicon ลูกศรลง
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-ปรับขนาดเต็ม
  • glyphicon glyphicon-ปรับขนาด-เล็ก
  • glyphicon glyphicon-เครื่องหมายอัศเจรีย์
  • glyphicon glyphicon ของขวัญ
  • glyphicon glyphicon ใบไม้
  • glyphicon glyphicon-ไฟ
  • glyphicon glyphicon ตาเปิด
  • glyphicon glyphicon-ปิดตา
  • glyphicon glyphicon-คำเตือน-สัญญาณ
  • glyphicon glyphicon-ระนาบ
  • glyphicon glyphicon ปฏิทิน
  • glyphicon glyphicon สุ่ม
  • glyphicon glyphicon-ความคิดเห็น
  • glyphicon glyphicon-แม่เหล็ก
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-รีทวีต
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-โฟลเดอร์ปิด
  • glyphicon glyphicon-โฟลเดอร์เปิด
  • glyphicon glyphicon-ปรับขนาดแนวตั้ง
  • glyphicon glyphicon-ปรับขนาดแนวนอน
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-บูลฮอร์น
  • glyphicon glyphicon-เบลล์
  • glyphicon glyphicon-ใบรับรอง
  • glyphicon glyphicon-thumbs ขึ้น
  • glyphicon glyphicon-thumbs ลง
  • สัญลักษณ์ glyphicon-มือขวา
  • glyphicon glyphicon-มือซ้าย
  • glyphicon glyphicon-มือขึ้น
  • glyphicon glyphicon-มือลง
  • glyphicon glyphicon-วงกลม-ลูกศร-ขวา
  • glyphicon glyphicon-วงกลม-ลูกศร-ซ้าย
  • glyphicon glyphicon-circle-ลูกศรขึ้น
  • glyphicon glyphicon-วงกลม-ลูกศรลง
  • glyphicon glyphicon-ลูกโลก
  • glyphicon glyphicon-ประแจ
  • glyphicon glyphicon งาน
  • glyphicon glyphicon ตัวกรอง
  • glyphicon glyphicon กระเป๋าเอกสาร
  • glyphicon glyphicon เต็มจอ
  • glyphicon glyphicon-แดชบอร์ด
  • glyphicon glyphicon คลิปหนีบกระดาษ
  • glyphicon glyphicon หัวใจว่าง
  • glyphicon glyphicon-ลิงค์
  • glyphicon glyphicon-โทรศัพท์
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-ตัวอักษร
  • สัญลักษณ์ glyphicon-sort-by-alphabet-alt
  • สัญลักษณ์ glyphicon-sort-by-order
  • สัญลักษณ์ glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • สัญลักษณ์ glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-ขยาย
  • glyphicon glyphicon-ยุบลง
  • glyphicon glyphicon-ยุบขึ้น
  • glyphicon glyphicon-เข้าสู่ระบบ
  • glyphicon glyphicon-แฟลช
  • glyphicon glyphicon-ออกจากระบบ
  • glyphicon glyphicon-หน้าต่างใหม่
  • glyphicon glyphicon บันทึก
  • glyphicon glyphicon-บันทึก
  • glyphicon glyphicon-เปิด
  • glyphicon glyphicon ที่บันทึกไว้
  • glyphicon glyphicon นำเข้า
  • glyphicon glyphicon-ส่งออก
  • glyphicon glyphicon-ส่ง
  • glyphicon glyphicon-ฟลอปปีดิสก์
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-ฟลอปปี้-remove
  • glyphicon glyphicon-ฟลอปปี้-บันทึก
  • glyphicon glyphicon-ฟลอปปี้-เปิด
  • glyphicon glyphicon บัตรเครดิต
  • glyphicon glyphicon โอน
  • glyphicon glyphicon-มีด
  • glyphicon glyphicon ส่วนหัว
  • glyphicon glyphicon บีบอัด
  • glyphicon glyphicon หูฟัง
  • glyphicon glyphicon-โทรศัพท์-alt
  • glyphicon glyphicon ทาวเวอร์
  • glyphicon glyphicon สถิติ
  • glyphicon glyphicon-sd-วิดีโอ
  • glyphicon glyphicon-hd-วิดีโอ
  • glyphicon glyphicon-คำบรรยาย
  • glyphicon glyphicon เสียงสเตอริโอ
  • glyphicon glyphicon-เสียง-dolby
  • glyphicon glyphicon-เสียง-5-1
  • glyphicon glyphicon เสียง-6-1
  • glyphicon glyphicon-เสียง-7-1
  • สัญลักษณ์ glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-ดาวน์โหลด
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon ต้นไม้ conifer
  • สัญลักษณ์ glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon บันทึกไฟล์
  • glyphicon glyphicon เปิดไฟล์
  • glyphicon glyphicon-ระดับขึ้น
  • glyphicon glyphicon-คัดลอก
  • glyphicon glyphicon วาง
  • glyphicon glyphicon-แจ้งเตือน
  • glyphicon glyphicon-อีควอไลเซอร์
  • glyphicon glyphicon-ราชา
  • glyphicon glyphicon ราชินี
  • glyphicon glyphicon-เบี้ย
  • glyphicon glyphicon-บิชอป
  • glyphicon glyphicon อัศวิน
  • glyphicon glyphicon-ทารก-สูตร
  • glyphicon glyphicon เต็นท์
  • glyphicon glyphicon-กระดานดำ
  • glyphicon เตียง glyphicon
  • glyphicon glyphicon-แอปเปิ้ล
  • glyphicon glyphicon-ลบ
  • glyphicon glyphicon นาฬิกาทราย
  • glyphicon glyphicon-โคมไฟ
  • glyphicon glyphicon-ซ้ำกัน
  • glyphicon glyphicon-กระปุกออมสิน
  • glyphicon glyphicon-กรรไกร
  • สัญลักษณ์ glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-เยน
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-รูเบิล
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-สเกล
  • glyphicon glyphicon-น้ำแข็ง-lolly
  • glyphicon glyphicon-ice-lolly- ลิ้มรส
  • glyphicon glyphicon การศึกษา
  • glyphicon glyphicon-option-แนวนอน
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-แฮมเบอร์เกอร์
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-น้ำมัน
  • glyphicon glyphicon เม็ด
  • glyphicon glyphicon-แว่นกันแดด
  • glyphicon glyphicon-ข้อความ-ขนาด
  • glyphicon glyphicon-ข้อความ-สี
  • glyphicon glyphicon-ข้อความ-พื้นหลัง
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-แนวนอน
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • สัญลักษณ์ glyphicon-triangle-right
  • สัญลักษณ์ glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-คอนโซล
  • glyphicon glyphicon-ตัวยก
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon เมนูลง
  • glyphicon glyphicon-menu-up

วิธีใช้

ด้วยเหตุผลด้านประสิทธิภาพ ไอคอนทั้งหมดต้องมีคลาสพื้นฐานและคลาสไอคอนแต่ละรายการ ในการใช้งาน ให้วางโค้ดต่อไปนี้ไว้ที่ใดก็ได้ อย่าลืมเว้นช่องว่างระหว่างไอคอนและข้อความเพื่อการเติมที่เหมาะสม

ไม่ผสมกับส่วนประกอบอื่นๆ

ไม่สามารถรวมคลาสไอคอนกับส่วนประกอบอื่นได้โดยตรง ไม่ควรใช้ร่วมกับคลาสอื่นในองค์ประกอบเดียวกัน ให้เพิ่มคลาสที่ซ้อนกัน<span>และใช้คลาสไอคอนกับไฟล์<span>.

สำหรับใช้กับองค์ประกอบที่ว่างเปล่าเท่านั้น

คลาสไอคอนควรใช้กับองค์ประกอบที่ไม่มีเนื้อหาข้อความและไม่มีองค์ประกอบย่อยเท่านั้น

การเปลี่ยนตำแหน่งแบบอักษรของไอคอน

Bootstrap ถือว่าไฟล์ฟอนต์ของไอคอนจะอยู่ใน../fonts/ไดเร็กทอรี ซึ่งสัมพันธ์กับไฟล์ CSS ที่คอมไพล์แล้ว การย้ายหรือเปลี่ยนชื่อไฟล์ฟอนต์เหล่านั้นหมายถึงการอัปเดต CSS ด้วยวิธีใดวิธีหนึ่งจากสามวิธี:

  • เปลี่ยน ตัวแปร @icon-font-pathและ/หรือ@icon-font-nameตัวแปรในไฟล์ Less ต้นทาง
  • ใช้ตัวเลือก URL ที่สัมพันธ์กันโดยคอมไพเลอร์ Less
  • เปลี่ยนurl()เส้นทางใน CSS ที่คอมไพล์แล้ว

ใช้ตัวเลือกใดก็ได้ที่เหมาะกับการตั้งค่าการพัฒนาเฉพาะของคุณมากที่สุด

ไอคอนที่เข้าถึงได้

เทคโนโลยีอำนวยความสะดวกรุ่นใหม่จะประกาศเนื้อหาที่สร้างโดย CSS รวมถึงอักขระ Unicode เฉพาะ เพื่อหลีกเลี่ยงการแสดงผลที่ไม่ได้ตั้งใจและทำให้สับสนในโปรแกรมอ่านหน้าจอ (โดยเฉพาะเมื่อใช้ไอคอนเพื่อการตกแต่งเท่านั้น) เราซ่อนไว้ด้วยaria-hidden="true"แอตทริบิวต์

หากคุณกำลังใช้ไอคอนเพื่อสื่อความหมาย (แทนที่จะเป็นเพียงองค์ประกอบตกแต่ง) ตรวจสอบให้แน่ใจว่าความหมายนี้ถ่ายทอดไปยังเทคโนโลยีอำนวยความสะดวกด้วย เช่น ใส่เนื้อหาเพิ่มเติม ซึ่งซ่อนไว้กับ.sr-onlyชั้นเรียน ด้วยสายตา

หากคุณกำลังสร้างการควบคุมโดยไม่มีข้อความอื่น (เช่น a <button>ที่มีเฉพาะไอคอน) คุณควรจัดเตรียมเนื้อหาทางเลือกเพื่อระบุวัตถุประสงค์ของการควบคุมเสมอ เพื่อให้ผู้ใช้เทคโนโลยีอำนวยความสะดวกมีความเหมาะสม ในกรณีนี้ คุณสามารถเพิ่มaria-labelแอตทริบิวต์บนตัวควบคุมได้

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ตัวอย่าง

ใช้ในปุ่ม กลุ่มปุ่มสำหรับแถบเครื่องมือ การนำทาง หรืออินพุตแบบฟอร์มที่เติมไว้ล่วงหน้า

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

ไอคอนที่ใช้ในการเตือนเพื่อแสดงว่าเป็นข้อความแสดงข้อผิดพลาด พร้อม.sr-onlyข้อความเพิ่มเติมเพื่อบอกใบ้นี้แก่ผู้ใช้เทคโนโลยีอำนวยความสะดวก

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ดรอปดาวน์

เมนูตามบริบทที่สลับได้สำหรับแสดงรายการลิงก์ ทำให้โต้ตอบกับปลั๊กอิน JavaScript แบบเลื่อนลง

รวมทริกเกอร์ของดร็อปดาวน์และเมนูดรอปดาวน์ไว้ภายใน หรือองค์ประกอบอื่น ที่.dropdownประกาศ position: relative;จากนั้นเพิ่ม HTML ของเมนู

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

เมนูดรอปดาวน์สามารถเปลี่ยนเพื่อขยายขึ้นไป (แทนที่จะขยายลง) โดยเพิ่ม.dropupไปยังพาเรนต์

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะอยู่ในตำแหน่ง 100% จากด้านบนและด้านซ้ายของระดับบนสุดโดยอัตโนมัติ เพิ่ม.dropdown-menu-rightเพื่อ.dropdown-menuจัดตำแหน่งเมนูดรอปดาวน์ให้ชิดขวา

อาจต้องมีการวางตำแหน่งเพิ่มเติม

ดรอปดาวน์จะถูกจัดตำแหน่งโดยอัตโนมัติผ่าน CSS ภายในโฟลว์ปกติของเอกสาร ซึ่งหมายความว่ารายการแบบหล่นลงอาจถูกครอบตัดโดยผู้ปกครองที่มีoverflowคุณสมบัติบางอย่างหรือปรากฏนอกขอบเขตของวิวพอร์ต จัดการปัญหาเหล่านี้ด้วยตนเองเมื่อเกิดขึ้น

เลิกใช้.pull-rightการจัดตำแหน่ง

ณ เวอร์ชัน 3.1.0 เราได้เลิกใช้งาน.pull-rightเมนูแบบเลื่อนลงแล้ว หากต้องการจัดแนวเมนูให้ชิดขวา ให้ใช้.dropdown-menu-right. คอมโพเนนต์ nav ที่จัดชิดขวาใน navbar ใช้เวอร์ชันมิกซ์อินของคลาสนี้เพื่อจัดแนวเมนูโดยอัตโนมัติ หากต้องการลบล้าง ให้ใช้.dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

เพิ่มส่วนหัวเพื่อติดป้ายกำกับส่วนของการดำเนินการในเมนูแบบเลื่อนลง

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

เพิ่มตัวแบ่งเพื่อแยกชุดของลิงก์ในเมนูดรอปดาวน์

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

เพิ่ม.disabledใน<li>เมนูแบบเลื่อนลงเพื่อปิดใช้งานลิงก์

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

กลุ่มปุ่ม

จัดกลุ่มชุดของปุ่มเข้าด้วยกันในบรรทัดเดียวกับกลุ่มปุ่ม เพิ่มตัวเลือกวิทยุ JavaScript และลักษณะการทำงานของช่องทำเครื่องหมายด้วยปลั๊กอินปุ่มของเรา

คำแนะนำเครื่องมือ & ป๊อปอัปในกลุ่มปุ่มต้องมีการตั้งค่าพิเศษ

เมื่อใช้คำแนะนำเครื่องมือหรือป๊อปโอเวอร์กับองค์ประกอบภายใน a .btn-groupคุณจะต้องระบุตัวเลือกcontainer: 'body'เพื่อหลีกเลี่ยงผลข้างเคียงที่ไม่ต้องการ (เช่น องค์ประกอบที่ขยายกว้างขึ้นและ/หรือสูญเสียมุมมนเมื่อมีการเรียกใช้คำแนะนำเครื่องมือหรือป๊อปโอเวอร์)

ตรวจสอบให้แน่ใจว่าถูกต้องroleและจัดให้มีฉลาก

เพื่อให้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ บ่งบอกว่ามีการจัดกลุ่มของปุ่มต่างๆroleจำเป็นต้องจัดเตรียมแอตทริบิวต์ ที่เหมาะสม สำหรับกลุ่มปุ่ม นี่จะเป็นrole="group"ในขณะที่แถบเครื่องมือควรมีนามสกุลrole="toolbar".

ข้อยกเว้นประการหนึ่งคือกลุ่มที่มีเพียงการควบคุมเดียว (เช่นกลุ่มปุ่มที่มี<button>องค์ประกอบ) หรือดรอปดาวน์

นอกจากนี้ กลุ่มและแถบเครื่องมือควรได้รับป้ายกำกับที่ชัดเจน เนื่องจากเทคโนโลยีอำนวยความสะดวกส่วนใหญ่จะไม่ประกาศคุณลักษณะดังกล่าว แม้ว่าจะมีroleแอตทริบิวต์ที่ถูกต้องก็ตาม ในตัวอย่างที่ให้ไว้ที่นี่ เราใช้aria-labelแต่aria-labelledbyสามารถ ใช้ทางเลือกอื่นได้

ตัวอย่างพื้นฐาน

ห่อชุดของปุ่มด้วย.btnใน.btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

แถบเครื่องมือปุ่ม

รวมชุดของ<div class="btn-group">เป็น a <div class="btn-toolbar">สำหรับส่วนประกอบที่ซับซ้อนมากขึ้น

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

ขนาด

แทนที่จะใช้คลาสการปรับขนาดปุ่มกับทุกปุ่มในกลุ่ม ให้เพิ่ม.btn-group-*แต่ละ ปุ่ม .btn-groupรวมทั้งเมื่อซ้อนหลายกลุ่ม




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

การทำรัง

วาง a .btn-groupภายในรายการอื่น.btn-groupเมื่อคุณต้องการให้เมนูดรอปดาวน์ผสมกับชุดปุ่มต่างๆ

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

รูปแบบแนวตั้ง

ทำให้ชุดของปุ่มปรากฏซ้อนกันในแนวตั้งแทนที่จะเป็นแนวนอน ไม่รองรับดรอปดาวน์ของปุ่มแยกที่นี่

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

กลุ่มปุ่มที่มีเหตุผล

ทำให้กลุ่มของปุ่มยืดออกด้วยขนาดเท่ากันเพื่อขยายความกว้างทั้งหมดของปุ่มหลัก ใช้งานได้กับปุ่มดรอปดาวน์ในกลุ่มปุ่ม

การจัดการพรมแดน

เนื่องจาก HTML และ CSS เฉพาะที่ใช้ในการปรับปุ่ม (กล่าวคือdisplay: table-cell) เส้นขอบระหว่างปุ่มทั้งสองจึงเพิ่มขึ้นเป็นสองเท่า ในกลุ่มปุ่มปกติmargin-left: -1pxใช้เพื่อสแต็กเส้นขอบแทนการเอาออก อย่างไรก็ตามmarginใช้ไม่ได้กับdisplay: table-cell. ด้วยเหตุนี้ ขึ้นอยู่กับการปรับแต่งของคุณใน Bootstrap คุณอาจต้องการลบหรือเปลี่ยนสีเส้นขอบ

IE8 และเส้นขอบ

Internet Explorer 8 จะไม่แสดงเส้นขอบบนปุ่มในกลุ่มปุ่มที่ปรับให้เหมาะสม ไม่ว่าจะเป็นบน<a>หรือ<button>องค์ประกอบ หากต้องการหลีกเลี่ยง ให้ห่อแต่ละปุ่มไว้ในอีกปุ่ม.btn-groupหนึ่ง

ดู#12476สำหรับข้อมูลเพิ่มเติม

ด้วย<a>องค์ประกอบ

เพียงห่ออนุกรมของ.btns ใน.btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

ลิงค์ที่ทำหน้าที่เป็นปุ่ม

หาก<a>องค์ประกอบถูกใช้เพื่อทำหน้าที่เป็นปุ่ม – เรียกใช้ฟังก์ชันในหน้า แทนที่จะนำทางไปยังเอกสารหรือส่วนอื่นภายในหน้าปัจจุบัน – องค์ประกอบเหล่านี้ควรได้รับrole="button".

ด้วย<button>องค์ประกอบ

หากต้องการใช้กลุ่มปุ่มที่จัดชิดขอบกับ<button>องค์ประกอบ คุณต้องรวม แต่ละปุ่ม ไว้ในกลุ่มปุ่ม เบราว์เซอร์ส่วนใหญ่ไม่ได้ใช้ CSS ของเราในการให้เหตุผลกับ<button>องค์ประกอบอย่างเหมาะสม แต่เนื่องจากเรารองรับปุ่มดรอปดาวน์ เราจึงสามารถแก้ไขปัญหานั้นได้

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

ปุ่มแบบเลื่อนลง

ใช้ปุ่มใดก็ได้เพื่อเรียกเมนูดรอปดาวน์โดยวางไว้ภายใน a .btn-groupและระบุมาร์กอัปเมนูที่เหมาะสม

การพึ่งพาปลั๊กอิน

ดรอปดาวน์ของปุ่มจำเป็นต้องมีปลั๊กอินดรอปดาวน์รวมอยู่ใน Bootstrap เวอร์ชันของคุณ

ดรอปดาวน์ปุ่มเดียว

เปลี่ยนปุ่มให้เป็นปุ่มสลับแบบเลื่อนลงพร้อมการเปลี่ยนแปลงมาร์กอัปพื้นฐานบางอย่าง

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

แยกปุ่มดรอปดาวน์

ในทำนองเดียวกัน สร้างดรอปดาวน์ของปุ่มแยกโดยมีการเปลี่ยนแปลงมาร์กอัปเหมือนกัน โดยใช้ปุ่มแยกต่างหากเท่านั้น

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ขนาด

ดรอปดาวน์ของปุ่มใช้งานได้กับปุ่มทุกขนาด

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

รูปแบบ Dropup

ทริกเกอร์เมนูแบบเลื่อนลงเหนือองค์ประกอบโดยเพิ่ม.dropupไปยังพาเรนต์

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

กลุ่มอินพุต

ขยายการควบคุมฟอร์มโดยการเพิ่มข้อความหรือปุ่มก่อน หลัง หรือทั้งสองด้านของไฟล์<input>. ใช้.input-groupกับ a .input-group-addonหรือ.input-group-btnเพื่อเพิ่มหรือต่อท้ายองค์ประกอบในไฟล์.form-control.

ข้อความ<input>เท่านั้น

หลีกเลี่ยงการใช้<select>องค์ประกอบที่นี่ เนื่องจากไม่สามารถจัดรูปแบบอย่างสมบูรณ์ในเบราว์เซอร์ WebKit

หลีกเลี่ยงการใช้<textarea>องค์ประกอบที่นี่ เนื่องจากrowsแอตทริบิวต์จะไม่ได้รับการเคารพในบางกรณี

คำแนะนำเครื่องมือ & ป๊อปอัปในกลุ่มอินพุตต้องมีการตั้งค่าพิเศษ

เมื่อใช้คำแนะนำเครื่องมือหรือป๊อปโอเวอร์กับองค์ประกอบภายใน.input-groupคุณจะต้องระบุตัวเลือกcontainer: 'body'เพื่อหลีกเลี่ยงผลข้างเคียงที่ไม่ต้องการ (เช่น องค์ประกอบนั้นกว้างขึ้นและ/หรือสูญเสียมุมมนไปเมื่อมีการเรียกใช้คำแนะนำเครื่องมือหรือป๊อปโอเวอร์)

ไม่ผสมกับส่วนประกอบอื่นๆ

อย่าผสมกลุ่มแบบฟอร์มหรือคลาสคอลัมน์กริดกับกลุ่มอินพุตโดยตรง ให้ซ้อนกลุ่มอินพุตภายในกลุ่มแบบฟอร์มหรือองค์ประกอบที่เกี่ยวข้องกับกริดแทน

เพิ่มป้ายกำกับเสมอ

โปรแกรมอ่านหน้าจอจะมีปัญหากับฟอร์มของคุณ หากคุณไม่ได้ใส่ป้ายกำกับสำหรับทุกอินพุต สำหรับกลุ่มอินพุตเหล่านี้ ตรวจสอบให้แน่ใจว่ามีการถ่ายทอดป้ายกำกับหรือการทำงานเพิ่มเติมไปยังเทคโนโลยีอำนวยความสะดวก

เทคนิคที่แน่นอนที่จะใช้ (องค์ประกอบที่มองเห็นได้<label>องค์ประกอบ<label>ที่ซ่อนอยู่โดยใช้.sr-onlyคลาส หรือใช้ แอตทริบิวต์ aria-label, aria-labelledby, aria-describedby, titleหรือplaceholderแอตทริบิวต์) และข้อมูลเพิ่มเติมที่จำเป็นต้องได้รับจะแตกต่างกันไปขึ้นอยู่กับประเภทของวิดเจ็ตอินเทอร์เฟซที่คุณกำลังใช้งาน ตัวอย่างในส่วนนี้จะนำเสนอแนวทางเฉพาะบางกรณีที่แนะนำ

ตัวอย่างพื้นฐาน

วางโปรแกรมเสริมหรือปุ่มหนึ่งปุ่มที่ด้านใดด้านหนึ่งของอินพุต คุณยังสามารถวางข้อมูลหนึ่งไว้ทั้งสองด้านของอินพุตได้

เราไม่สนับสนุนโปรแกรมเสริมหลายรายการ ( .input-group-addonหรือ.input-group-btn) ในด้านเดียว

เราไม่สนับสนุนการควบคุมแบบฟอร์มหลายรายการในกลุ่มอินพุตเดียว

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ขนาด

เพิ่มคลาสการปรับขนาดแบบฟอร์มสัมพัทธ์ให้กับ.input-groupตัวเองและเนื้อหาภายในจะปรับขนาดโดยอัตโนมัติ ไม่จำเป็นต้องทำซ้ำคลาสขนาดการควบคุมแบบฟอร์มในแต่ละองค์ประกอบ

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

ช่องทำเครื่องหมายและส่วนเสริมวิทยุ

วางช่องทำเครื่องหมายหรือตัวเลือกวิทยุภายในส่วนเสริมของกลุ่มอินพุตแทนข้อความ

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ส่วนเสริมของปุ่ม

ปุ่มในกลุ่มอินพุตจะแตกต่างกันเล็กน้อยและต้องการการซ้อนระดับพิเศษหนึ่งระดับ .input-group-addonคุณจะต้องใช้.input-group-btnห่อปุ่มแทน สิ่งนี้จำเป็นเนื่องจากรูปแบบเบราว์เซอร์เริ่มต้นที่ไม่สามารถแทนที่ได้

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ปุ่มที่มีดรอปดาวน์

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ปุ่มแบ่งส่วน

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

หลายปุ่ม

แม้ว่าคุณจะสามารถมีส่วนเสริมได้เพียงด้านเดียว แต่คุณสามารถมีปุ่มได้หลายปุ่มภายในปุ่ม.input-group-btnเดียว

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs

Navs ที่มีอยู่ใน Bootstrap มีการแชร์มาร์กอัปโดยเริ่มจาก.navคลาสพื้นฐานและสถานะที่ใช้ร่วมกัน สลับคลาสตัวดัดแปลงเพื่อสลับไปมาระหว่างแต่ละสไตล์

การใช้ navs สำหรับพาเนลแท็บต้องใช้ปลั๊กอินแท็บ JavaScript

สำหรับแท็บที่มีพื้นที่แท็บได้ คุณต้องใช้ แท็ บปลั๊กอิน JavaScript มาร์กอัปจะต้องมีแอตทริบิวต์เพิ่มเติม และ ARIA – ดู มาร์กอัปตัวอย่างroleของปลั๊กอินสำหรับรายละเอียดเพิ่มเติม

ทำให้การนำทางที่ใช้เป็นการนำทางเข้าถึงได้

หากคุณกำลังใช้ navs เพื่อจัดเตรียมแถบการนำทาง ตรวจสอบให้แน่ใจว่าได้เพิ่มrole="navigation"คอนเทนเนอร์พาเรนต์ที่สมเหตุสมผลที่สุดของ<ul>นั้น หรือรวม<nav>องค์ประกอบไว้รอบการนำทางทั้งหมด อย่าเพิ่มบทบาทให้กับ<ul>ตัวเอง เนื่องจากจะทำให้ไม่สามารถประกาศเป็นรายการจริงโดยเทคโนโลยีอำนวยความสะดวก

โปรดทราบว่า.nav-tabsคลาสต้องการ.navคลาสพื้นฐาน

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ใช้ HTML เดียวกันนั้น แต่ใช้.nav-pillsแทน:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

เม็ดยายังวางซ้อนกันได้ในแนวตั้ง แค่เพิ่ม.nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

ทำให้แท็บหรือยาเม็ดมีความกว้างเท่ากับผู้ปกครองที่หน้าจอกว้างกว่า 768px ได้อย่างง่ายดายด้วย.nav-justified. ในหน้าจอขนาดเล็ก ลิงก์การนำทางจะซ้อนกัน

ไม่รองรับลิงก์การนำทาง navbar ที่ปรับให้เหมาะสมในขณะนี้

Safari และการนำทางที่ตอบสนองฉับไว

ตั้งแต่ v9.1.2 Safari แสดงจุดบกพร่องที่การปรับขนาดเบราว์เซอร์ของคุณในแนวนอนทำให้เกิดข้อผิดพลาดในการแสดงผลในการนำทางที่ถูกต้องซึ่งจะถูกล้างเมื่อรีเฟรช ข้อบกพร่องนี้ยังแสดงในตัวอย่างการนำทาง ที่ถูกต้อง

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

สำหรับองค์ประกอบการนำทาง (แท็บหรือยาเม็ด) ให้เพิ่ม.disabledลิงก์สีเทาและไม่มีเอฟเฟกต์ โฮเวอร์

ฟังก์ชันลิงก์ไม่ได้รับผลกระทบ

คลาสนี้จะเปลี่ยน<a>รูปลักษณ์ของ ' ไม่ใช่ฟังก์ชันการทำงาน ใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งานลิงก์ที่นี่

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

เพิ่มเมนูดรอปดาวน์ด้วย HTML เพิ่มเติมเล็กน้อยและปลั๊กอิน JavaScript แบบเลื่อนลง

แท็บที่มีดรอปดาวน์

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ยาที่มีรายการแบบเลื่อนลง

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

แถบนำทาง

แถบนำทางคือองค์ประกอบเมตาที่ตอบสนองซึ่งทำหน้าที่เป็นส่วนหัวการนำทางสำหรับแอปพลิเคชันหรือไซต์ของคุณ พวกเขาเริ่มยุบ (และสามารถสลับได้) ในมุมมองมือถือและกลายเป็นแนวนอนเมื่อความกว้างของวิวพอร์ตที่มีอยู่เพิ่มขึ้น

ไม่รองรับลิงก์การนำทาง navbar ที่ปรับให้เหมาะสมในขณะนี้

เนื้อหาล้น

เนื่องจาก Bootstrap ไม่ทราบว่าเนื้อหาในแถบนำทางของคุณต้องการพื้นที่เท่าใด คุณอาจพบปัญหาเกี่ยวกับการตัดเนื้อหาในแถวที่สอง ในการแก้ไขปัญหานี้ คุณสามารถ:

  1. ลดจำนวนหรือความกว้างของรายการแถบนำทาง
  2. ซ่อนรายการแถบนำทางบางรายการในหน้าจอบางขนาดโดยใช้คลาสยูทิลิตี้ที่ ตอบสนอง
  3. เปลี่ยนจุดที่แถบนำทางของคุณสลับไปมาระหว่างโหมดยุบและโหมดแนวนอน ปรับแต่ง@grid-float-breakpointตัวแปรหรือเพิ่มการสืบค้นสื่อของคุณเอง

ต้องใช้ปลั๊กอิน JavaScript

หากปิดใช้ JavaScript และวิวพอร์ตแคบพอที่แถบนำทางจะยุบ จะไม่สามารถขยายแถบนำทางและดูเนื้อหาภายในไฟล์.navbar-collapse.

แถบนำทางที่ตอบสนองต้องใช้ปลั๊กอินการยุบเพื่อรวมไว้ใน Bootstrap เวอร์ชันของคุณ

การเปลี่ยนเบรกพอยต์ของแถบนำทางสำหรับมือถือที่ยุบ

แถบนำทางจะยุบลงในมุมมองอุปกรณ์เคลื่อนที่ในแนวตั้งเมื่อวิวพอร์ตแคบกว่า@grid-float-breakpointและขยายเป็นมุมมองที่ไม่ใช่อุปกรณ์เคลื่อนที่ในแนวนอนเมื่อวิวพอร์ตมี@grid-float-breakpointความกว้าง อย่างน้อย ปรับตัวแปรนี้ในแหล่ง Less เพื่อควบคุมเมื่อแถบนำทางยุบ/ขยาย ค่าเริ่มต้นคือ768px(หน้าจอ "เล็ก" หรือ "แท็บเล็ต" ที่เล็กที่สุด)

ทำให้แถบนำทางสามารถเข้าถึงได้

อย่าลืมใช้<nav>องค์ประกอบ หรือหากใช้องค์ประกอบทั่วไปมากขึ้น เช่น a <div>ให้เพิ่ม a role="navigation"ลงในแถบนำทางทุกแถบเพื่อระบุอย่างชัดเจนว่าเป็นพื้นที่หลักสำหรับผู้ใช้เทคโนโลยีอำนวยความสะดวก

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

แทนที่แบรนด์ navbar ด้วยรูปภาพของคุณเองโดยเปลี่ยนข้อความเป็น<img>. เนื่องจาก.navbar-brandมีช่องว่างภายในและความสูงเป็นของตัวเอง คุณอาจต้องแทนที่ CSS บางส่วน ทั้งนี้ขึ้นอยู่กับรูปภาพของคุณ

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

วาง เนื้อหาของฟอร์มไว้ภายใน.navbar-formเพื่อการจัดตำแหน่งแนวตั้งที่เหมาะสมและลักษณะการทำงานที่ยุบลงในวิวพอร์ตที่แคบ ใช้ตัวเลือกการจัดตำแหน่งเพื่อตัดสินใจว่าจะอยู่ที่ใดภายในเนื้อหาแถบนำทาง

โปรด.navbar-formแชร์รหัสส่วนใหญ่.form-inlineผ่านมิกซ์อิน ตัวควบคุมฟอร์มบางอย่าง เช่น กลุ่มอินพุต อาจต้องใช้ความกว้างคงที่เพื่อแสดงอย่างถูกต้องภายในแถบนำทาง

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

คำเตือนเกี่ยวกับอุปกรณ์พกพา

มีข้อแม้บางประการเกี่ยวกับการใช้การควบคุมแบบฟอร์มภายในองค์ประกอบคงที่บนอุปกรณ์มือถือ ดูเอกสารสนับสนุนเบราว์เซอร์ของเราสำหรับรายละเอียด

เพิ่มป้ายกำกับเสมอ

โปรแกรมอ่านหน้าจอจะมีปัญหากับฟอร์มของคุณ หากคุณไม่ได้ใส่ป้ายกำกับสำหรับทุกอินพุต สำหรับแบบฟอร์มอินไลน์เหล่านี้ คุณสามารถซ่อนป้ายกำกับโดยใช้.sr-onlyชั้นเรียน aria-labelมีวิธีการอื่นในการจัดเตรียมฉลากสำหรับเทคโนโลยีอำนวย ความสะดวก เช่นแอตทริบิวต์aria-labelledbyหรือ titleหากไม่มีสิ่งเหล่านี้ โปรแกรมอ่านหน้าจออาจหันไปใช้placeholderแอตทริบิวต์ หากมี แต่โปรดทราบว่าplaceholderไม่แนะนำให้ใช้แทนวิธีการติดฉลากอื่นๆ

เพิ่ม.navbar-btnคลาสให้กับ<button>องค์ประกอบที่ไม่มีอยู่ใน a <form>เพื่อจัดกึ่งกลางในแนวตั้งในแถบนำทาง

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

การใช้งานเฉพาะบริบท

เช่น เดียว กับ คลาสปุ่มมาตรฐาน.navbar-btnสามารถใช้บน<a>และ<input>องค์ประกอบ อย่างไรก็ตาม ไม่.navbar-btnควรใช้คลาสปุ่มมาตรฐานกับ<a>องค์ประกอบ.navbar-navภายใน

ตัดสตริงของข้อความในองค์ประกอบด้วย.navbar-text, โดยปกติบน<p>แท็กสำหรับการนำหน้าและสีที่เหมาะสม

<p class="navbar-text">Signed in as Mark Otto</p>

สำหรับผู้ที่ใช้ลิงก์มาตรฐานที่ไม่ได้อยู่ในองค์ประกอบการนำทาง navbar ปกติ ให้ใช้.navbar-linkคลาสเพื่อเพิ่มสีที่เหมาะสมสำหรับตัวเลือก navbar เริ่มต้นและผกผัน

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

จัดแนวลิงก์การนำทาง แบบฟอร์ม ปุ่ม หรือข้อความ โดยใช้คลาส.navbar-leftหรือ ยูทิลิตี้ .navbar-rightทั้งสองคลาสจะเพิ่ม CSS float ในทิศทางที่ระบุ ตัวอย่างเช่น หากต้องการจัดแนวลิงก์การนำทาง ให้แยกลิงก์โดย<ul>ใช้คลาสยูทิลิตี้ที่เกี่ยวข้อง

คลาสเหล่านี้เป็นเวอร์ชัน mixin-ed ของ.pull-leftและ.pull-rightแต่มีการกำหนดขอบเขตสำหรับคิวรีสื่อเพื่อให้จัดการคอมโพเนนต์ navbar ข้ามขนาดอุปกรณ์ได้ง่ายขึ้น

จัดองค์ประกอบหลายชิ้นให้ชิดขวา

Navbars ในปัจจุบันมีข้อ จำกัด กับหลาย.navbar-rightคลาส ในการเว้นวรรคเนื้อหาอย่างเหมาะสม เราใช้ระยะขอบติดลบกับ.navbar-rightองค์ประกอบ สุดท้าย เมื่อมีหลายองค์ประกอบที่ใช้คลาสนั้น ระยะขอบเหล่านี้จะไม่ทำงานตามที่ตั้งใจไว้

เราจะทบทวนเรื่องนี้อีกครั้งเมื่อเราสามารถเขียนองค์ประกอบนั้นใหม่ใน v4 ได้

เพิ่ม.navbar-fixed-topและรวม a .containerหรือ.container-fluidเพื่อจัดกึ่งกลางและเนื้อหาแถบนำทางบนแป้น

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

จำเป็นต้องมีแผ่นรองร่างกาย

แถบนำทางคงที่จะซ้อนทับเนื้อหาอื่นๆ ของคุณ เว้นแต่คุณจะเพิ่มpaddingที่ด้านบนสุดของไฟล์<body>. ลองใช้ค่าของคุณเองหรือใช้ข้อมูลโค้ดของเราด้านล่าง เคล็ดลับ: ตามค่าเริ่มต้น แถบนำทางจะสูง 50px

body { padding-top: 70px; }

ตรวจสอบให้แน่ใจว่าได้รวมสิ่งนี้ไว้หลัง Bootstrap CSS หลัก

เพิ่ม.navbar-fixed-bottomและรวม a .containerหรือ.container-fluidเพื่อจัดกึ่งกลางและเนื้อหาแถบนำทางบนแป้น

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

จำเป็นต้องมีแผ่นรองร่างกาย

แถบนำทางคงที่จะซ้อนทับเนื้อหาอื่นๆ ของคุณ เว้นแต่คุณจะเพิ่มpaddingที่ด้านล่างของไฟล์<body>. ลองใช้ค่าของคุณเองหรือใช้ข้อมูลโค้ดของเราด้านล่าง เคล็ดลับ: ตามค่าเริ่มต้น แถบนำทางจะสูง 50px

body { padding-bottom: 70px; }

ตรวจสอบให้แน่ใจว่าได้รวมสิ่งนี้ไว้หลัง Bootstrap CSS หลัก

สร้างแถบนำทางแบบเต็มความกว้างที่เลื่อนออกไปพร้อมกับหน้าโดยการเพิ่ม.navbar-static-topและรวม a .containerหรือ.container-fluidเพื่อจัดกึ่งกลางและเนื้อหาแถบนำทางของแผ่น

.navbar-fixed-*คุณไม่จำเป็นต้องเปลี่ยนช่องว่างภายในไฟล์body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

แก้ไขรูปลักษณ์ของแถบนำทางโดยเพิ่ม.navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

เกล็ดขนมปัง

ระบุตำแหน่งของเพจปัจจุบันภายในลำดับชั้นการนำทาง

ตัวคั่นจะถูกเพิ่มโดยอัตโนมัติใน CSS ผ่าน:beforeและcontent.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

การแบ่งหน้า

ระบุลิงก์การแบ่งหน้าสำหรับเว็บไซต์หรือแอปของคุณด้วยองค์ประกอบการแบ่งหน้าแบบหลายหน้า หรือทางเลือกของ เพจเจอร์ที่ง่ายกว่า

การแบ่งหน้าเริ่มต้น

การแบ่งหน้าแบบเรียบง่ายที่ได้รับแรงบันดาลใจจาก Rdio เหมาะสำหรับแอปและผลการค้นหา บล็อกขนาดใหญ่นั้นยากที่จะพลาด ปรับขนาดได้ง่าย และมีพื้นที่การคลิกขนาดใหญ่

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

การติดฉลากองค์ประกอบการแบ่งหน้า

องค์ประกอบการแบ่งหน้าควรรวมไว้ใน<nav>องค์ประกอบเพื่อระบุว่าเป็นส่วนการนำทางไปยังโปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลืออื่นๆ นอกจากนี้ เนื่องจากหน้ามีแนวโน้มที่จะมีส่วนการนำทางดังกล่าวมากกว่าหนึ่งส่วนอยู่แล้ว (เช่น การนำทางหลักในส่วนหัว หรือการนำทางในแถบด้านข้าง) ขอแนะนำให้ให้คำอธิบายaria-labelสำหรับส่วน<nav>ที่สะท้อนถึงจุดประสงค์ ตัวอย่างเช่น หากใช้องค์ประกอบการแบ่งหน้าเพื่อนำทางระหว่างชุดของผลการค้นหา ป้ายกำกับที่เหมาะสมอาจaria-label="Search results pages"เป็น

สถานะปิดการใช้งานและใช้งานอยู่

ลิงค์สามารถปรับแต่งได้สำหรับสถานการณ์ที่แตกต่างกัน ใช้.disabledสำหรับลิงก์ที่ไม่สามารถคลิกได้และ.activeเพื่อระบุหน้าปัจจุบัน

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

เราขอแนะนำให้คุณสลับจุดยึดที่ทำงานอยู่หรือปิดใช้งานสำหรับ<span>หรือละเว้นจุดยึดในกรณีของลูกศรก่อนหน้า/ถัดไป เพื่อลบฟังก์ชันการคลิกในขณะที่ยังคงรูปแบบที่ต้องการ

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

ขนาด

แฟนซีเลขหน้าใหญ่หรือเล็ก? เพิ่ม.pagination-lgหรือ.pagination-smสำหรับขนาดเพิ่มเติม

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

เพจเจอร์

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

ตัวอย่างเริ่มต้น

โดยค่าเริ่มต้นเพจเจอร์จะลิงก์

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

ลิงก์ที่สอดคล้อง

อีกวิธีหนึ่ง คุณสามารถจัดแนวแต่ละลิงก์ให้ชิดด้านข้าง:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

สถานะปิดการใช้งานตัวเลือก

ลิงก์เพจเจอร์ยังใช้.disabledคลาสยูทิลิตี้ทั่วไปจากการแบ่งหน้า

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ป้าย

ตัวอย่าง

ตัวอย่างหัวเรื่องใหม่

ตัวอย่างหัวเรื่องใหม่

ตัวอย่างหัวเรื่องใหม่

ตัวอย่างหัวเรื่องใหม่

ตัวอย่างหัวเรื่องใหม่
ตัวอย่างหัวเรื่องใหม่
<h3>Example heading <span class="label label-default">New</span></h3>

รูปแบบที่มีจำหน่าย

เพิ่มคลาสตัวแก้ไขที่กล่าวถึงด้านล่างเพื่อเปลี่ยนลักษณะที่ปรากฏของป้ายกำกับ

อันตรายคำเตือนข้อมูลความสำเร็จหลัก เริ่มต้น
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

มีฉลากมากมาย?

ปัญหาการแสดงผลอาจเกิดขึ้นได้เมื่อคุณมีป้ายกำกับแบบอินไลน์หลายสิบรายการภายในคอนเทนเนอร์แบบแคบ โดยแต่ละป้ายมีinline-blockองค์ประกอบของตัวเอง (เช่น ไอคอน) วิธีการรอบนี้คือการตั้งdisplay: inline-block;ค่า สำหรับบริบทและตัวอย่างโปรดดู #13219

ป้าย

ไฮไลท์รายการใหม่หรือที่ยังไม่ได้อ่านอย่างง่ายดายโดยเพิ่ม<span class="badge">ลิงก์ไปยัง การนำทาง Bootstrap และอื่นๆ

อินบ็อกซ์42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

ล้มเอง

เมื่อไม่มีรายการใหม่หรือยังไม่ได้อ่าน ป้ายก็จะยุบ (ผ่านตัวเลือกของ CSS :empty) หากไม่มีเนื้อหาอยู่ภายใน

ความเข้ากันได้ข้ามเบราว์เซอร์

ป้ายจะไม่ยุบตัวเองใน Internet Explorer 8 เนื่องจากไม่มีการสนับสนุน:emptyตัวเลือก

ปรับให้เข้ากับสถานะการนำทางที่ใช้งาน

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

จัมโบตรอน

ส่วนประกอบที่มีน้ำหนักเบาและยืดหยุ่นได้ ซึ่งสามารถเลือกขยายวิวพอร์ตทั้งหมดเพื่อแสดงเนื้อหาหลักบนไซต์ของคุณ

สวัสดีชาวโลก!

นี่คือฮีโร่ยูนิตธรรมดา ซึ่งเป็นองค์ประกอบสไตล์จัมโบตรอนที่เรียบง่ายสำหรับการเรียกความสนใจเป็นพิเศษไปยังเนื้อหาหรือข้อมูลเด่น

เรียนรู้เพิ่มเติม

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

หากต้องการให้จัมโบตรอนเต็มความกว้างและไม่มีมุมมน ให้วางไว้นอก.containers ทั้งหมดแล้วเพิ่ม.containerภายในแทน

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

ส่วนหัวของหน้า

เปลือกอย่างง่ายสำหรับการh1เว้นวรรคและแบ่งส่วนของเนื้อหาบนหน้าอย่างเหมาะสม สามารถใช้ องค์ประกอบ h1เริ่มต้นของ ' smallเช่นเดียวกับองค์ประกอบอื่น ๆ ส่วนใหญ่ (พร้อมสไตล์เพิ่มเติม)

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

รูปขนาดย่อ

ขยาย ระบบกริดของ Bootstrap ด้วยองค์ประกอบภาพขนาดย่อเพื่อแสดงเส้นตารางของรูปภาพ วิดีโอ ข้อความ และอื่นๆ ได้อย่างง่ายดาย

หากคุณกำลังมองหาการนำเสนอภาพขนาดย่อของ Pinterest ที่มีความสูงและ/หรือความกว้างต่างกัน คุณจะต้องใช้ปลั๊กอินของบริษัทอื่นเช่นMasonry , IsotopeหรือSalvattore

ตัวอย่างเริ่มต้น

ตามค่าเริ่มต้น ภาพขนาดย่อของ Bootstrap ได้รับการออกแบบเพื่อแสดงภาพที่เชื่อมโยงโดยมีมาร์กอัปที่จำเป็นน้อยที่สุด

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

เนื้อหาที่กำหนดเอง

ด้วยมาร์กอัปเพิ่มเติมเล็กน้อย คุณสามารถเพิ่มเนื้อหา HTML ประเภทใดก็ได้ เช่น หัวเรื่อง ย่อหน้า หรือปุ่มลงในภาพขนาดย่อ

ภาพขนาดย่อของตัวยึดตำแหน่งทั่วไป

ป้ายชื่อย่อ

Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Donec id elit non mi porta gravida ที่ eget metus Nullam id dolor id nibh ultricies vehicula ut id elit

ปุ่ม ปุ่ม

ภาพขนาดย่อของตัวยึดตำแหน่งทั่วไป

ป้ายชื่อย่อ

Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Donec id elit non mi porta gravida ที่ eget metus Nullam id dolor id nibh ultricies vehicula ut id elit

ปุ่ม ปุ่ม

ภาพขนาดย่อของตัวยึดตำแหน่งทั่วไป

ป้ายชื่อย่อ

Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Donec id elit non mi porta gravida ที่ eget metus Nullam id dolor id nibh ultricies vehicula ut id elit

ปุ่ม ปุ่ม

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

การแจ้งเตือน

จัดเตรียมข้อความตอบกลับตามบริบทสำหรับการดำเนินการทั่วไปของผู้ใช้ด้วยข้อความเตือนที่ยืดหยุ่นและพร้อมใช้งานจำนวนหนึ่ง

ตัวอย่าง

ใส่ข้อความและปุ่มปิดที่เป็นตัวเลือก.alertและหนึ่งในสี่คลาสตามบริบท (เช่น.alert-success) สำหรับข้อความแจ้งเตือนพื้นฐาน

ไม่มีคลาสเริ่มต้น

การแจ้งเตือนไม่มีคลาสดีฟอลต์ มีเพียงคลาสเบสและคลาสโมดิฟายเออร์ การแจ้งเตือนสีเทาเริ่มต้นไม่สมเหตุสมผลนัก ดังนั้น คุณต้องระบุประเภทผ่านคลาสตามบริบท เลือกจากความสำเร็จ ข้อมูล คำเตือน หรืออันตราย

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

การแจ้งเตือนที่ปิดได้

สร้างการแจ้งเตือนโดยเพิ่ม.alert-dismissibleปุ่มตัวเลือกและปิด

ต้องใช้ปลั๊กอินแจ้งเตือน JavaScript

สำหรับการแจ้งเตือนที่ทำงานได้อย่างสมบูรณ์และปิดได้ คุณต้องใช้ปลั๊กอิน JavaScript การแจ้ง เตือน

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ตรวจสอบพฤติกรรมที่เหมาะสมในทุกอุปกรณ์

อย่าลืมใช้<button>องค์ประกอบที่มีdata-dismiss="alert"แอตทริบิวต์ข้อมูล

ใช้.alert-linkคลาสยูทิลิตี้เพื่อระบุลิงก์สีที่ตรงกันอย่างรวดเร็วภายในการแจ้งเตือนใดๆ

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

แถบความคืบหน้า

ให้คำติชมล่าสุดเกี่ยวกับความคืบหน้าของเวิร์กโฟลว์หรือการดำเนินการด้วยแถบความคืบหน้าที่เรียบง่ายแต่ยืดหยุ่น

ความเข้ากันได้ข้ามเบราว์เซอร์

แถบความคืบหน้าใช้การเปลี่ยนและภาพเคลื่อนไหวของ CSS3 เพื่อให้ได้เอฟเฟกต์บางส่วน คุณลักษณะเหล่านี้ไม่ได้รับการสนับสนุนใน Internet Explorer 9 และต่ำกว่าหรือ Firefox เวอร์ชันเก่า Opera 12 ไม่รองรับภาพเคลื่อนไหว

ความเข้ากันได้ของนโยบายความปลอดภัยเนื้อหา (CSP)

หากเว็บไซต์ของคุณมีนโยบายการรักษาความปลอดภัยของเนื้อหา (CSP)ซึ่งไม่อนุญาตstyle-src 'unsafe-inline'คุณจะไม่สามารถใช้styleแอตทริบิวต์อินไลน์เพื่อกำหนดความกว้างของแถบความคืบหน้าตามที่แสดงในตัวอย่างด้านล่าง วิธีอื่นในการตั้งค่าความกว้างที่เข้ากันได้กับ CSP ที่เข้มงวด ได้แก่ การใช้ JavaScript แบบกำหนดเองเล็กน้อย (ที่ตั้งค่าelement.style.width) หรือใช้คลาส CSS ที่กำหนดเอง

ตัวอย่างพื้นฐาน

แถบความคืบหน้าเริ่มต้น

สำเร็จ 60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

พร้อมป้าย

ลบ คลาส <span>with .sr-onlyจากภายในแถบความคืบหน้าเพื่อแสดงเปอร์เซ็นต์ที่มองเห็นได้

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

เพื่อให้แน่ใจว่าข้อความป้ายกำกับยังคงอ่านง่ายแม้ในเปอร์เซ็นต์ที่ต่ำ ให้ลองเพิ่ม a min-widthในแถบความคืบหน้า

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

ทางเลือกตามบริบท

แถบความคืบหน้าใช้ปุ่มเดียวกันและคลาสการแจ้งเตือนสำหรับสไตล์ที่สอดคล้องกัน

สำเร็จ 40% (สำเร็จ)
สำเร็จ 20%
เสร็จสมบูรณ์ 60% (คำเตือน)
เสร็จสมบูรณ์ 80% (อันตราย)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ลาย

ใช้การไล่ระดับสีเพื่อสร้างเอฟเฟกต์ลายทาง ไม่มีใน IE9 และต่ำกว่า

สำเร็จ 40% (สำเร็จ)
สำเร็จ 20%
เสร็จสมบูรณ์ 60% (คำเตือน)
เสร็จสมบูรณ์ 80% (อันตราย)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

เคลื่อนไหว

เพิ่ม.activeเพื่อ.progress-bar-stripedทำให้แถบเคลื่อนไหวจากขวาไปซ้าย ไม่มีใน IE9 และต่ำกว่า

เสร็จสมบูรณ์ 45%
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

ซ้อนกัน

วางแท่งหลายแท่งในแท่งเดียวกัน.progressเพื่อเรียงซ้อนกัน

สำเร็จ 35% (สำเร็จ)
เสร็จสมบูรณ์ 20% (คำเตือน)
สำเร็จ 10% (อันตราย)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

วัตถุสื่อ

สไตล์ออบเจ็กต์นามธรรมสำหรับสร้างส่วนประกอบประเภทต่างๆ (เช่น ความคิดเห็นของบล็อก ทวีต ฯลฯ) ที่มีรูปภาพที่จัดชิดซ้ายหรือขวาควบคู่ไปกับเนื้อหาที่เป็นข้อความ

สื่อเริ่มต้น

สื่อเริ่มต้นจะแสดงวัตถุสื่อ (รูปภาพ วิดีโอ เสียง) ทางด้านซ้ายหรือขวาของบล็อกเนื้อหา

หัวเรื่องสื่อ

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

หัวเรื่องสื่อ

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

หัวเรื่องสื่อที่ซ้อนกัน

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

หัวเรื่องสื่อ

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.

หัวเรื่องสื่อ

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

คลาส.pull-leftและ.pull-rightยังมีอยู่และเคยถูกใช้เป็นส่วนหนึ่งขององค์ประกอบสื่อ แต่เลิกใช้แล้วสำหรับการใช้งานนั้นตั้งแต่ v3.3.0 มีค่าประมาณเทียบเท่ากับ.media-leftและ.media-rightยกเว้นว่า.media-rightควรวางไว้หลัง the .media-bodyใน html

การจัดตำแหน่งสื่อ

รูปภาพหรือสื่ออื่นๆ สามารถจัดตำแหน่งด้านบน ตรงกลาง หรือด้านล่างได้ ค่าดีฟอลต์คือการจัดตำแหน่งบนสุด

สื่อจัดตำแหน่งสูงสุด

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus.

สื่อกลาง

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus.

สื่อชิดขอบล่าง

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

รายการสื่อ

ด้วยมาร์กอัปเพิ่มเติมเล็กน้อย คุณสามารถใช้สื่อในรายการ (มีประโยชน์สำหรับกระทู้ความคิดเห็นหรือรายการบทความ)

  • หัวเรื่องสื่อ

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.

    หัวเรื่องสื่อที่ซ้อนกัน

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.

    หัวเรื่องสื่อที่ซ้อนกัน

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.

    หัวเรื่องสื่อที่ซ้อนกัน

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

รายการกลุ่ม

กลุ่มรายการเป็นองค์ประกอบที่ยืดหยุ่นและมีประสิทธิภาพสำหรับการแสดงรายการองค์ประกอบอย่างง่ายไม่เพียงเท่านั้น แต่ยังรวมถึงองค์ประกอบที่ซับซ้อนด้วยเนื้อหาที่กำหนดเอง

ตัวอย่างพื้นฐาน

กลุ่มรายการพื้นฐานที่สุดเป็นเพียงรายการที่ไม่เรียงลำดับกับรายการและคลาสที่เหมาะสม สร้างด้วยตัวเลือกที่ตามมา หรือ CSS ของคุณเองตามต้องการ

  • Cras justo odio
  • Dapibus ac สิ่งอำนวยความสะดวกใน
  • มอร์บี ลีโอ ริซัส
  • Porta ac consectetur ac
  • ขนถ่ายที่ eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ป้าย

เพิ่มองค์ประกอบตราสัญลักษณ์ให้กับรายการกลุ่มรายการใดๆ และองค์ประกอบนั้นจะถูกจัดตำแหน่งไว้ทางด้านขวาโดยอัตโนมัติ

  • 14 Cras justo odio
  • 2 Dapibus ac สิ่งอำนวยความสะดวกใน
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

รายการที่เชื่อมโยง

เชื่อมโยงรายการกลุ่มโดยใช้แท็กจุดยึดแทนรายการ (ซึ่งหมายถึงพา เรนต์ <div>แทน<ul>) ไม่จำเป็นต้องมีผู้ปกครองรายบุคคลรายรอบแต่ละองค์ประกอบ

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

รายการปุ่ม

รายการกลุ่มรายการอาจเป็นปุ่มแทนที่จะเป็นรายการ (ซึ่งหมายถึงพา เรนต์ <div>แทนที่จะเป็น<ul>) ไม่จำเป็นต้องมีผู้ปกครองรายบุคคลรายรอบแต่ละองค์ประกอบ อย่าใช้.btnคลาสมาตรฐานที่นี่

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

รายการคนพิการ

เพิ่ม.disabledเป็น.list-group-itemสีเทาเพื่อให้ปรากฏเป็นปิดการใช้งาน

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ชั้นเรียนตามบริบท

ใช้คลาสตามบริบทเพื่อกำหนดสไตล์รายการ ค่าดีฟอลต์หรือลิงก์ รวมถึง.activeรัฐด้วย

  • Dapibus ac สิ่งอำนวยความสะดวกใน
  • ครัส นั่ง อาเมต นิบห์ ลิเบโร
  • Porta ac consectetur ac
  • ขนถ่ายที่ eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

เนื้อหาที่กำหนดเอง

เพิ่ม HTML เกือบทั้งหมดภายใน แม้แต่สำหรับกลุ่มรายการที่เชื่อมโยงเช่นกลุ่มด้านล่าง

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

แผง

แม้ว่าจะไม่จำเป็นเสมอไป แต่บางครั้งคุณต้องใส่ DOM ของคุณลงในกล่อง สำหรับสถานการณ์เหล่านั้น ให้ลองใช้คอมโพเนนต์พาเนล

ตัวอย่างพื้นฐาน

โดยค่าเริ่มต้น สิ่งที่ใช้ทั้งหมด.panelคือการใช้เส้นขอบพื้นฐานและช่องว่างภายในเพื่อให้มีเนื้อหาบางส่วน

ตัวอย่างแผงพื้นฐาน
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

แผงที่มีหัวเรื่อง

เพิ่มคอนเทนเนอร์ส่วนหัวไปยังพาเนลของคุณอย่างง่ายดายด้วย.panel-heading. คุณยังสามารถรวมอะไรก็ได้<h1>- <h6>กับ.panel-titleคลาสเพื่อเพิ่มส่วนหัวที่จัดสไตล์ไว้ล่วงหน้า อย่างไรก็ตาม ขนาดแบบอักษรของ<h1>- <h6>ถูกแทนที่ด้วย.panel-heading.

เพื่อการลงสีลิงก์ที่ถูกต้อง อย่าลืมใส่ลิงก์ในส่วนหัวภายใน.panel-title.

ส่วนหัวของแผงที่ไม่มีชื่อ
เนื้อหาแผง

ชื่อแผง

เนื้อหาแผง
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

ตัดปุ่มหรือข้อความรองใน.panel-footer. โปรดทราบว่าส่วนท้ายของแผงจะไม่รับช่วงสีและเส้นขอบเมื่อใช้รูปแบบตามบริบทเนื่องจากไม่ได้ตั้งใจให้อยู่เบื้องหน้า

เนื้อหาแผง
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

ทางเลือกตามบริบท

เช่นเดียวกับส่วนประกอบอื่นๆ ทำให้แผงมีความหมายมากขึ้นกับบริบทเฉพาะโดยการเพิ่มคลาสสถานะตามบริบทใดๆ

ช��่อแผง

เนื้อหาแผง

ชื่อแผง

เนื้อหาแผง

ชื่อแผง

เนื้อหาแผง

ชื่อแผง

เนื้อหาแผง

ชื่อแผง

เนื้อหาแผง
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

พร้อมโต๊ะ

เพิ่มแบบไม่มีขอบ.tableภายในแผงเพื่อการออกแบบที่ไร้รอยต่อ หากมี.panel-bodyเราจะเพิ่มเส้นขอบพิเศษที่ด้านบนของตารางเพื่อแยก

ส่วนหัวของแผง

เนื้อหาแผงเริ่มต้นบางส่วนที่นี่ Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit

# ชื่อจริง นามสกุล ชื่อผู้ใช้
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

หากไม่มีตัวแผง ส่วนประกอบจะย้ายจากส่วนหัวของแผงไปยังตารางโดยไม่หยุดชะงัก

ส่วนหัวของแผง
# ชื่อจริง นามสกุล ชื่อผู้ใช้
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

พร้อมรายชื่อกลุ่ม

รวม กลุ่มรายการแบบเต็มความกว้างภายในแผงใดๆ ได้อย่างง่ายดาย

ส่วนหัวของแผง

เนื้อหาแผงเริ่มต้นบางส่วนที่นี่ Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit

  • Cras justo odio
  • Dapibus ac สิ่งอำนวยความสะดวกใน
  • มอร์บี ลีโอ ริซัส
  • Porta ac consectetur ac
  • ขนถ่ายที่ eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ฝังแบบตอบสนอง

อนุญาตให้เบราว์เซอร์กำหนดขนาดวิดีโอหรือสไลด์โชว์ตามความกว้างของบล็อกที่มีอยู่โดยสร้างอัตราส่วนภายในที่จะปรับขนาดอย่างเหมาะสมบนอุปกรณ์ใดๆ

กฎมีผลโดยตรงกับ<iframe>, <embed>, <video>, และ<object>องค์ประกอบ เลือกใช้คลาสลูกหลานที่ชัดเจน.embed-responsive-itemเมื่อคุณต้องการจับคู่สไตล์สำหรับแอตทริบิวต์อื่นๆ

โปร-ทิป! คุณไม่จำเป็นต้องรวมframeborder="0"ใน<iframe>s ของคุณในขณะที่เราแทนที่สิ่งนั้นเพื่อคุณ

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Wells

เริ่มต้นได้ดี

ใช้ well เป็นเอฟเฟกต์ง่ายๆ กับองค์ประกอบเพื่อให้เอฟเฟกต์แทรก

ฟังนะ ฉันอยู่ในบ่อน้ำ!
<div class="well">...</div>

คลาสเสริม

ควบคุมช่องว่างภายในและมุมโค้งมนด้วยคลาสตัวปรับแต่งเสริมสองคลาส

ฟังนะ ฉันอยู่ในบ่อน้ำขนาดใหญ่!
<div class="well well-lg">...</div>
ฟังนะ ฉันอยู่ในบ่อน้ำเล็กๆ!
<div class="well well-sm">...</div>