ร่ายมนตร์ที่มีจำหน่าย
รวมร่ายมนตร์มากกว่า 250 แบบในรูปแบบฟอนต์จากชุด Glyphicon Halflings Glyphicons Halflings มักไม่มีให้เล่นฟรี แต่ผู้สร้างได้เปิดให้ใช้ Bootstrap ได้ฟรี เพื่อเป็นการขอบคุณ เราขอให้คุณใส่ลิงก์กลับไปยังGlyphicons ทุกครั้งที่ทำได้
วิธีใช้
ด้วยเหตุผลด้านประสิทธิภาพ ไอคอนทั้งหมดต้องมีคลาสพื้นฐานและคลาสไอคอนแต่ละรายการ ในการใช้งาน ให้วางโค้ดต่อไปนี้ไว้ที่ใดก็ได้ อย่าลืมเว้นช่องว่างระหว่างไอคอนและข้อความเพื่อการเติมที่เหมาะสม
ไม่ผสมกับส่วนประกอบอื่นๆ
ไม่สามารถรวมคลาสไอคอนกับส่วนประกอบอื่นได้โดยตรง ไม่ควรใช้ร่วมกับคลาสอื่นในองค์ประกอบเดียวกัน ให้เพิ่มคลาสที่ซ้อนกัน<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 และลักษณะการทำงานของช่องทำเครื่องหมายด้วยปลั๊กอินปุ่มของ เรา
ตรวจสอบให้แน่ใจว่าถูกต้อง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>
องค์ประกอบ
เพียงห่ออนุกรมของ.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
ทริกเกอร์เมนูแบบเลื่อนลงเหนือองค์ประกอบโดยเพิ่ม.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'
เพื่อหลีกเลี่ยงผลข้างเคียงที่ไม่ต้องการ (เช่น องค์ประกอบนั้นกว้างขึ้นและ/หรือสูญเสียมุมมนไปเมื่อมีการเรียกใช้คำแนะนำเครื่องมือหรือป๊อปโอเวอร์)
วางโปรแกรมเสริมหรือปุ่มหนึ่งปุ่มที่ด้านใดด้านหนึ่งของอินพุต คุณยังสามารถวางข้อมูลหนึ่งไว้ทั้งสองด้านของอินพุตได้
เราไม่สนับสนุนโปรแกรมเสริมหลายรายการ ( .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
คลาสพื้นฐานและสถานะที่ใช้ร่วมกัน สลับคลาสตัวดัดแปลงเพื่อสลับไปมาระหว่างแต่ละสไตล์
การใช้ 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 ไม่ทราบว่าเนื้อหาในแถบนำทางของคุณต้องการพื้นที่เท่าใด คุณอาจพบปัญหาเกี่ยวกับการตัดเนื้อหาในแถวที่สอง ในการแก้ไขปัญหานี้ คุณสามารถ:
ลดจำนวนหรือความกว้างของรายการแถบนำทาง
ซ่อนรายการแถบนำทางบางรายการในหน้าจอบางขนาดโดยใช้คลาสยูทิลิตี้ ที่ ตอบสนอง
เปลี่ยนจุดที่แถบนำทางของคุณสลับไปมาระหว่างโหมดยุบและโหมดแนวนอน ปรับแต่ง@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>
เพิ่ม.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>
แท็กสำหรับการนำหน้าและสีที่เหมาะสม
ลงชื่อเข้าใช้เป็น Mark Otto
<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" > « </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>
สถานะปิดการใช้งานและใช้งานอยู่
ลิงค์สามารถปรับแต่งได้สำหรับสถานการณ์ที่แตกต่างกัน ใช้.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 ประเภทใดก็ได้ เช่น หัวเรื่อง ย่อหน้า หรือปุ่มลงในภาพขนาดย่อ
ป้ายชื่อย่อ
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" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
ลิงค์ในการแจ้งเตือน
ใช้.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 ที่กำหนดเอง
ตัวอย่างพื้นฐาน
แถบความคืบหน้าเริ่มต้น
<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>
ทางเลือกตามบริบท
แถบความคืบหน้าใช้ปุ่มเดียวกันและคลาสการแจ้งเตือนสำหรับสไตล์ที่สอดคล้องกัน
เสร็จสมบูรณ์ 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 และต่ำกว่า
เสร็จสมบูรณ์ 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 และต่ำกว่า
<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>
สไตล์ออบเจ็กต์นามธรรมสำหรับสร้างส่วนประกอบประเภทต่างๆ (เช่น ความคิดเห็นของบล็อก ทวีต ฯลฯ) ที่มีรูปภาพที่จัดชิดซ้ายหรือขวาควบคู่ไปกับเนื้อหาที่เป็นข้อความ
สื่อเริ่มต้นจะแสดงวัตถุสื่อ (รูปภาพ วิดีโอ เสียง) ทางด้านซ้ายหรือขวาของบล็อกเนื้อหา
<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
รูปภาพหรือสื่ออื่นๆ สามารถจัดตำแหน่งด้านบน ตรงกลาง หรือด้านล่างได้ ค่าดีฟอลต์คือการจัดตำแหน่งบนสุด
<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>
ด้วยมาร์กอัปเพิ่มเติมเล็กน้อย คุณสามารถใช้สื่อในรายการ (มีประโยชน์สำหรับกระทู้ความคิดเห็นหรือรายการบทความ)
<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
คลาสมาตรฐานที่นี่
Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส
Porta ac consectetur ac
ขนถ่ายที่ eros
<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>
เริ่มต้นได้ดี
ใช้ well เป็นเอฟเฟกต์ง่ายๆ กับองค์ประกอบเพื่อให้เอฟเฟกต์แทรก
<div class= "well" > ...</div>
คลาสเสริม
ควบคุมช่องว่างภายในและมุมโค้งมนด้วยคลาสตัวปรับแต่งเสริมสองคลาส
ฟังนะ ฉันอยู่ในบ่อน้ำขนาดใหญ่!
<div class= "well well-lg" > ...</div>
ฟังนะ ฉันอยู่ในบ่อน้ำเล็กๆ!
<div class= "well well-sm" > ...</div>