ส่วนประกอบ
ส่วนประกอบที่นำกลับมาใช้ใหม่ได้มากกว่าหนึ่งโหลที่สร้างขึ้นเพื่อนำเสนอภาพสัญลักษณ์ ดรอปดาวน์ กลุ่มอินพุต การนำทาง การแจ้งเตือน และอื่นๆ อีกมากมาย
ส่วนประกอบที่นำกลับมาใช้ใหม่ได้มากกว่าหนึ่งโหลที่สร้างขึ้นเพื่อนำเสนอภาพสัญลักษณ์ ดรอปดาวน์ กลุ่มอินพุต การนำทาง การแจ้งเตือน และอื่นๆ อีกมากมาย
รวมร่ายมนตร์มากกว่า 250 แบบในรูปแบบฟอนต์จากชุด Glyphicon Halflings Glyphicons Halflings มักไม่มีให้เล่นฟรี แต่ผู้สร้างได้เปิดให้ใช้ Bootstrap ได้ฟรี เพื่อเป็นการขอบคุณ เราขอให้คุณใส่ลิงก์กลับไปยังGlyphiconsทุกครั้งที่ทำได้
ด้วยเหตุผลด้านประสิทธิภาพ ไอคอนทั้งหมดต้องมีคลาสพื้นฐานและคลาสไอคอนแต่ละรายการ ในการใช้งาน ให้วางโค้ดต่อไปนี้ไว้ที่ใดก็ได้ อย่าลืมเว้นช่องว่างระหว่างไอคอนและข้อความเพื่อการเติมที่เหมาะสม
ไม่สามารถรวมคลาสไอคอนกับส่วนประกอบอื่นได้โดยตรง ไม่ควรใช้ร่วมกับคลาสอื่นในองค์ประกอบเดียวกัน ให้เพิ่มคลาสที่ซ้อนกัน<span>
และใช้คลาสไอคอนกับไฟล์<span>
.
คลาสไอคอนควรใช้กับองค์ประกอบที่ไม่มีเนื้อหาข้อความและไม่มีองค์ประกอบย่อยเท่านั้น
Bootstrap ถือว่าไฟล์ฟอนต์ของไอคอนจะอยู่ใน../fonts/
ไดเร็กทอรี ซึ่งสัมพันธ์กับไฟล์ CSS ที่คอมไพล์แล้ว การย้ายหรือเปลี่ยนชื่อไฟล์ฟอนต์เหล่านั้นหมายถึงการอัปเดต CSS ด้วยวิธีใดวิธีหนึ่งจากสามวิธี:
@icon-font-path
และ/หรือ@icon-font-name
ตัวแปรในไฟล์ 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 คุณอาจต้องการลบหรือเปลี่ยนสีเส้นขอบ
Internet Explorer 8 จะไม่แสดงเส้นขอบบนปุ่มในกลุ่มปุ่มที่ปรับให้เหมาะสม ไม่ว่าจะเป็นบน<a>
หรือ<button>
องค์ประกอบ หากต้องการหลีกเลี่ยง ให้ห่อแต่ละปุ่มไว้ในอีกปุ่ม.btn-group
หนึ่ง
ดู#12476สำหรับข้อมูลเพิ่มเติม
<a>
องค์ประกอบเพียงห่ออนุกรมของ.btn
s ใน.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
ไปยังพาเรนต์
<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
) ในด้านเดียว
เราไม่สนับสนุนการควบคุมแบบฟอร์มหลายรายการในกลุ่มอินพุตเดียว
<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 ที่มีอยู่ใน Bootstrap มีการแชร์มาร์กอัปโดยเริ่มจาก.nav
คลาสพื้นฐานและสถานะที่ใช้ร่วมกัน สลับคลาสตัวดัดแปลงเพื่อสลับไปมาระหว่างแต่ละสไตล์
โปรดทราบว่า.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 ที่ปรับให้เหมาะสมในขณะนี้
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
สำหรับองค์ประกอบการนำทาง (แท็บหรือยาเม็ด) ให้เพิ่ม.disabled
ลิงก์สีเทาและไม่มีเอฟเฟกต์ โฮเวอร์
<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 ที่ปรับให้เหมาะสมในขณะนี้
<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>
เพิ่ม.navbar-btn
คลาสให้กับ<button>
องค์ประกอบที่ไม่มีอยู่ใน a <form>
เพื่อจัดกึ่งกลางในแนวตั้งในแถบนำทาง
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
ตัดสตริงของข้อความในองค์ประกอบด้วย.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 ข้ามขนาดอุปกรณ์ได้ง่ายขึ้น
เพิ่ม.navbar-fixed-top
และรวม a .container
หรือ.container-fluid
เพื่อจัดกึ่งกลางและเนื้อหาแถบนำทางบนแป้น
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
เพิ่ม.navbar-fixed-bottom
และรวม a .container
หรือ.container-fluid
เพื่อจัดกึ่งกลางและเนื้อหาแถบนำทางบนแป้น
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
สร้างแถบนำทางแบบเต็มความกว้างที่เลื่อนออกไปพร้อมกับหน้าโดยการเพิ่ม.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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
ลิงก์เพจเจอร์ยังใช้.disabled
คลาสยูทิลิตี้ทั่วไปจากการแบ่งหน้า
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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 และอื่นๆ
<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>
หากต้องการให้จัมโบตรอนเต็มความกว้างและไม่มีมุมมน ให้วางไว้นอก.container
s ทั้งหมดแล้วเพิ่ม.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 ประเภทใดก็ได้ เช่น หัวเรื่อง ย่อหน้า หรือปุ่มลงในภาพขนาดย่อ
<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 การแจ้ง เตือน
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</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)ซึ่งไม่อนุญาตstyle-src 'unsafe-inline'
คุณจะไม่สามารถใช้style
แอตทริบิวต์อินไลน์เพื่อกำหนดความกว้างของแถบความคืบหน้าตามที่แสดงในตัวอย่างด้านล่าง วิธีอื่นในการตั้งค่าความกว้างที่เข้ากันได้กับ CSP ที่เข้มงวด ได้แก่ การใช้ JavaScript แบบกำหนดเองเล็กน้อย (ที่ตั้งค่าelement.style.width
) หรือใช้คลาส CSS ที่กำหนดเอง
แถบความคืบหน้าเริ่มต้น
<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
จากภายในแถบความคืบหน้าเพื่อแสดงเปอร์เซ็นต์ที่มองเห็นได้
<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
ในแถบความคืบหน้า
<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>
แถบความคืบหน้าใช้ปุ่มเดียวกันและคลาสการแจ้งเตือนสำหรับสไตล์ที่สอดคล้องกัน
<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 และต่ำกว่า
<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 และต่ำกว่า
<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
เพื่อเรียงซ้อนกัน
<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>
สไตล์ออบเจ็กต์นามธรรมสำหรับสร้างส่วนประกอบประเภทต่างๆ (เช่น ความคิดเห็นของบล็อก ทวีต ฯลฯ) ที่มีรูปภาพที่จัดชิดซ้ายหรือขวาควบคู่ไปกับเนื้อหาที่เป็นข้อความ
สื่อเริ่มต้นจะแสดงวัตถุสื่อ (รูปภาพ วิดีโอ เสียง) ทางด้านซ้ายหรือขวาของบล็อกเนื้อหา
<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.
<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 ของคุณเองตามต้องการ
<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>
เพิ่มองค์ประกอบตราสัญลักษณ์ให้กับรายการกลุ่มรายการใดๆ และองค์ประกอบนั้นจะถูกจัดตำแหน่งไว้ทางด้านขวาโดยอัตโนมัติ
<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
รัฐด้วย
<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 เกือบทั้งหมดภายใน แม้แต่สำหรับกลุ่มรายการที่เชื่อมโยงเช่นกลุ่มด้านล่าง
Donec id elit non mi porta gravida ที่ eget metus Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida ที่ eget metus Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida ที่ eget metus Maecenas sed diam eget risus varius blandit.
<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
<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>
ใช้ well เป็นเอฟเฟกต์ง่ายๆ กับองค์ประกอบเพื่อให้เอฟเฟกต์แทรก
<div class="well">...</div>
ควบคุมช่องว่างภายในและมุมโค้งมนด้วยคลาสตัวปรับแต่งเสริมสองคลาส
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>