ตัวอย่าง

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

<ul class = "dropdown-menu" บทบาท= "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > การกระทำ</a></li>  
  <li><a tabindex = "-1" href = "#" > การดำเนินการอื่น</a></li>  
  <li><a tabindex = "-1" href = "#" > อย่างอื่นที่นี่</a></li>  
  <li class = "ตัวแบ่ง" ></li> 
  <li><a tabindex = "-1" href = "#" > ลิงก์แยก</a></li>  
</ul>

มาร์กอัป

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

< คลาสdiv = "ดรอปดาวน์" > 
  <!-- ลิงก์หรือปุ่มเพื่อสลับรายการแบบเลื่อนลง -->
  <ul class = "dropdown-menu" บทบาท= "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > การกระทำ</a></li>  
    <li><a tabindex = "-1" href = "#" > การดำเนินการอื่น</a></li>  
    <li><a tabindex = "-1" href = "#" > อย่างอื่นที่นี่</a></li>  
    <li class = "ตัวแบ่ง" ></li> 
    <li><a tabindex = "-1" href = "#" > ลิงก์แยก</a></li>  
  </ul>
</div>

ตัวเลือก

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

การจัดตำแหน่งเมนู

เพิ่ม.pull-rightเพื่อ.dropdown-menuจัดตำแหน่งเมนูดรอปดาวน์ให้ชิดขวา

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

ตัวเลือกเมนูปิดการใช้งาน

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

<ul class = "dropdown-menu" บทบาท= "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > ลิงก์ปกติ</a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > ลิงก์ ที่ปิดใช้งาน </a></li>   
  <li><a tabindex = "-1" href = "#" > ลิงค์อื่น</a></li>  
</ul>

เมนูย่อยในดรอปดาวน์

เพิ่มระดับพิเศษของเมนูดรอปดาวน์ โดยจะปรากฏเมื่อวางเมาส์เหนือเหมือนกับ OS X โดยมีการเพิ่มมาร์กอัปอย่างง่าย เพิ่ม ในเมนูดรอปดาวน์ที่ .dropdown-submenuมีliอยู่สำหรับการจัดสไตล์อัตโนมัติ

<ul class = "dropdown-menu" บทบาท= "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > ตัวเลือกเพิ่มเติม</a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ตัวอย่าง

สองตัวเลือกพื้นฐาน พร้อมด้วยอีกสองรูปแบบเฉพาะ

กลุ่มปุ่มเดียว

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

<div class = "btn-group" > 
  <button class = "btn" > ซ้าย</button> 
  <button class = "btn" > กลาง</button> 
  <button class = "btn" > ขวา</button> 
</div>

กลุ่มปุ่มหลายปุ่ม

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

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

กลุ่มปุ่มแนวตั้ง

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

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

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

กลุ่มปุ่มยังสามารถทำงานเป็นวิทยุ โดยที่ปุ่มเดียวเท่านั้นที่ใช้งานได้ หรือกล่องกาเครื่องหมาย ที่ปุ่มจำนวนเท่าใดก็ได้ทำงานอยู่ ดูเอกสาร JavaScriptสำหรับสิ่งนั้น

ดรอปดาวน์ในกลุ่มปุ่ม

หัวขึ้น!ปุ่มที่มีดรอปดาวน์ต้องถูกห่อแยกกัน.btn-groupภายใน a .btn-toolbarเพื่อการเรนเดอร์ที่เหมาะสม

ภาพรวมและตัวอย่าง

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    การกระทำ
    <span class = "คาเร็ต" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- ลิงค์เมนูแบบเลื่อนลง -->
  </ul>
</div>

ใช้ได้กับปุ่มทุกขนาด

ดรอปดาวน์ของปุ่มใช้งานได้ทุกขนาด: .btn-large, .btn-small, หรือ.btn-mini.

ต้องใช้ JavaScript

ดรอปดาวน์ของปุ่มต้องใช้ปลั๊กอินดรอปดาวน์ Bootstrapเพื่อทำงาน

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

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

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

<div class = "btn-group" > 
  <button class = "btn" > การกระทำ</button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "คาเร็ต" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- ลิงค์เมนูแบบเลื่อนลง -->
  </ul>
</div>

ขนาด

ใช้คลาสปุ่มพิเศษ.btn-mini, .btn-smallหรือ.btn-largeสำหรับการปรับขนาด

<div class = "btn-group" > 
  <button class = "btn btn-mini" > การดำเนินการ</button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "คาเร็ต" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- ลิงค์เมนูแบบเลื่อนลง -->
  </ul>
</div>

เมนูแบบเลื่อนลง

เมนูดรอปดาวน์ยังสามารถสลับจากล่างขึ้นบนด้วยการเพิ่มคลาสเดียวไปยังพาเรนต์โดยตรง.dropdown-menuของ มันจะพลิกทิศทางของ.caretและจัดตำแหน่งเมนูเองเพื่อย้ายจากล่างขึ้นบนแทนจากบนลงล่าง

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "คาเร็ต" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- ลิงค์เมนูแบบเลื่อนลง -->
  </ul>
</div>

ค่าเริ่มต้นที่มีน้ำหนักเบามาร์กอัปเดียวกัน คลาสต่างกัน

ส่วนประกอบการนำทางทั้งหมดที่นี่—แท็บ ยาเม็ด และรายการ— ใช้มาร์กอัปพื้นฐานและรูปแบบ เดียวกัน ใน.navชั้นเรียน

แท็บพื้นฐาน

ใช้<ul>ลิงก์ปกติและเพิ่ม.nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "ใช้งานอยู่" > 
    <a href = "#" > หน้าแรก</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ยาเม็ดพื้นฐาน

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

<ul class = "nav nav-pills" > 
  <li class = "ใช้งานอยู่" > 
    <a href = "#" > หน้าแรก</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

สถานะคนพิการ

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

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > หน้าแรก</a></li>  
  ...
</ul>

การจัดตำแหน่งส่วนประกอบ

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

วางซ้อนกันได้

เนื่องจากแท็บและยาเม็ดเป็นแบบแนวนอนโดยค่าเริ่มต้น เพียงเพิ่มคลาสที่สอง.nav-stackedเพื่อให้ปรากฏเรียงซ้อนกันในแนวตั้ง

แท็บซ้อนกัน

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

เม็ดซ้อน

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

ดรอปดาวน์

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

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

<ul class = "nav nav-tabs" > 
  <li class = "ดรอปดาวน์" > 
    <a class = "ดรอปดาวน์สลับ" 
       data-toggle = "ดรอปดาวน์"
       href = "#" >
        หล่นลง
        <b class = "คาเร็ต" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- ลิงค์ -->
    </ul>
  </li>
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "ดรอปดาวน์" > 
    <a class = "ดรอปดาวน์สลับ" 
       data-toggle = "ดรอปดาวน์"
       href = "#" >
        หล่นลง
        <b class = "คาเร็ต" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- ลิงค์ -->
    </ul>
  </li>
</ul>

รายการนำทาง

วิธีที่ง่ายและสะดวกในการสร้างกลุ่มของลิงก์การนำทางด้วยส่วนหัวที่ไม่บังคับ ใช้ได้ดีที่สุดในแถบด้านข้างเช่น Finder ใน OS X

ตัวอย่างรายการนำทาง

ใช้รายการลิงก์และเพิ่มclass="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > ส่วนหัวของรายการ</li> 
  <li class = "active" ><a href = "#" > หน้าแรก</a></li>  
  <li><a href = "#" > ห้องสมุด</a></li> 
  ...
</ul>

บันทึกสำหรับการซ้อนในรายการ nav ให้รวมในclass="nav nav-list"nested<ul>

วงเวียนแนวนอน

เพิ่มตัวแบ่งแนวนอนโดยสร้างรายการว่างด้วย class .dividerเช่น:

<ul class = "nav nav-list" > 
  ...
  <li class = "ตัวแบ่ง" ></li> 
  ...
</ul>

การนำทางแบบแท็บได้

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

ตัวอย่างตาราง

ในการทำให้แท็บเป็นแบบแท็บได้ ให้สร้าง a .tab-paneด้วย ID ที่ไม่ซ้ำกันสำหรับทุกแท็บและรวมไว้ใน.tab-content.

<div class = "tabbable" > <!-- จำเป็นสำหรับแท็บซ้าย/ขวาเท่านั้น -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > ส่วนที่ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > ส่วนที่ 2 </a></li>  
  </ul>
  <div class = "เนื้อหาแท็บ" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> ฉันอยู่ในส่วนที่ 1 </p>
    </div>
    < คลาสdiv = "tab-pane" id = "tab2" >  
      <p> สวัสดี ฉันอยู่ภาค 2 </p>
    </div>
  </div>
</div>

จางหายไปในแท็บ

หากต้องการให้แท็บจางลง ให้เพิ่ม.fadeแต่ละ.tab-paneไฟล์

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

แท็บ tabbable ทั้งหมดขับเคลื่อนโดยปลั๊กอิน jQuery ที่มีน้ำหนักเบาของเรา อ่านเพิ่มเติมเกี่ยวกับวิธีทำให้แท็บแบบแท็บมีชีวิตบนหน้าเอกสาร JavaScript

แท็บได้ทุกทิศทาง

แถบด้านล่าง

พลิกลำดับของ HTML และเพิ่มคลาสเพื่อวางแท็บที่ด้านล่าง

<div class = "แท็บแท็บด้านล่าง" > 
  <div class = "เนื้อหาแท็บ" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

แท็บทางด้านซ้าย

สลับชั้นเรียนเพื่อวางแท็บทางด้านซ้าย

<div class = "แท็บแท็บซ้าย" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "เนื้อหาแท็บ" > 
    ...
  </div>
</div>

แถบด้านขวา

สลับชั้นเรียนเพื่อวางแท็บทางด้านขวา

<div class = "แท็บแท็บขวา" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "เนื้อหาแท็บ" > 
    ...
  </div>
</div>

แถบนำทางพื้นฐาน

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

< คลาสdiv = "แถบนำทาง" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Title </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > หน้าแรก</a></li>  
      <li><a href = "#" > ลิงก์</a></li> 
      <li><a href = "#" > ลิงก์</a></li> 
    </ul>
  </div>
</div>

ส่วนประกอบแถบนำทาง

ยี่ห้อ

ลิงก์ง่ายๆ เพื่อแสดงชื่อแบรนด์หรือโครงการของคุณต้องการเพียงแท็กสมอเท่านั้น

<a class = "brand" href = "#" > ชื่อโครงการ</a>  

ลิงค์นำทาง

รายการการนำทางนั้นง่ายต่อการเพิ่มผ่านรายการที่ไม่เรียงลำดับ

<ul class = "nav" > 
  <li class = "ใช้งานอยู่" > 
    <a href = "#" > หน้าแรก</a> 
  </li>
  <li><a href = "#" > ลิงก์</a></li> 
  <li><a href = "#" > ลิงก์</a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "ตัวแบ่งแนวตั้ง" ></li> 
  ...
</ul>

แบบฟอร์ม

หากต้องการจัดรูปแบบและจัดตำแหน่งแบบฟอร์มภายในแถบนำทางอย่างเหมาะสม ให้เพิ่มคลาสที่เหมาะสมดังที่แสดงด้านล่าง สำหรับฟอร์มเริ่มต้น ให้รวม.navbar-formและ.pull-leftหรือ.pull-rightเพื่อจัดแนวอย่างถูกต้อง

<form class = "navbar-form pull-left" > 
  < ประเภทอินพุต= "ข้อความ" คลาส= "span2" >  
  <button type = "submit" class = "btn" > ส่ง</button>  
</form>

แบบฟอร์มการค้นหา

สำหรับแบบฟอร์มการค้นหาที่ปรับแต่งเองมากขึ้น ให้เพิ่ม.navbar-searchไปที่formและ.search-queryในอินพุตสำหรับสไตล์เฉพาะทางในแถบนำทาง

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

การจัดตำแหน่งส่วนประกอบ

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

การใช้ดรอปดาวน์

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

<ul class = "nav" > 
  <li class = "ดรอปดาวน์" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      บัญชี
      <b class = "คาเร็ต" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ไปที่เอกสารประกอบของ JavaScript ดรอปดาวน์สำหรับมาร์กอัปเพิ่มเติมและข้อมูลเพิ่มเติมเกี่ยวกับการเรียกดรอปดาวน์

ข้อความ

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

รูปแบบการแสดงผลที่เป็นตัวเลือก

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

แก้ไขด้านบน

เพิ่ม.navbar-fixed-topและอย่าลืมคำนึงถึงพื้นที่ที่ซ่อนอยู่ด้านล่างโดยเพิ่มอย่างน้อย 40px paddingลงในไฟล์<body>. อย่าลืมเพิ่มสิ่งนี้หลังจาก Bootstrap CSS หลักและก่อน CSS ที่ตอบสนองซึ่งเป็นทางเลือก

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

แก้ไขด้านล่าง

เพิ่ม.navbar-fixed-bottomแทน.

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

แถบนำทางด้านบนแบบคงที่

สร้างแถบนำทางแบบเต็มความกว้างที่เลื่อนออกไปพร้อมกับหน้าโดยเพิ่ม.navbar-static-top. .navbar-fixed-topคุณไม่จำเป็นต้องเปลี่ยนช่องว่างภายในไฟล์body.

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

แถบนำทางที่ตอบสนอง

ในการใช้ navbar ที่ตอบสนองต่อการยุบ ให้ห่อเนื้อหา navbar ของคุณใน div ที่มี.nav-collapse.collapse, และเพิ่มปุ่มสลับ navbar , .btn-navbar.

< คลาสdiv = "แถบนำทาง" > 
  <div class = "navbar-inner" > 
    < คลาสdiv = "คอนเทนเนอร์" > 
 
      <!-- .btn-navbar ใช้เป็นตัวสลับสำหรับเนื้อหาแถบนำทางที่ยุบ -->
      <a class = "btn btn-navbar" data-toggle = "ยุบ" data-target = ".nav-collapse" >   
        <span class = "แถบไอคอน" ></span> 
        <span class = "แถบไอคอน" ></span> 
        <span class = "แถบไอคอน" ></span> 
      </a>
 
      <!-- อย่าลืมทิ้งแบรนด์ไว้ถ้าคุณต้องการให้แสดง -->
      <a class = "brand" href = "#" > ชื่อโครงการ</a>  
 
      <!-- ทุกสิ่งที่คุณต้องการซ่อนไว้ที่ 940px หรือน้อยกว่า วางไว้ที่นี่ -->
      <div class = "nav-collapse ยุบ" > 
        <!-- .nav, .navbar-search, .navbar-form ฯลฯ -->
      </div>
 
    </div>
  </div>
</div>

รูปแบบฤๅษี

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

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

ตัวอย่าง

ตัวอย่างเดียวที่แสดงเนื่องจากอาจแสดงในหลายๆ หน้า

<ul class = "เกล็ดขนมปัง" > 
  <li><a href = "#" > หน้าแรก</a> <span class = "ตัวแบ่ง" > / </span></li>   
  <li><a href = "#" > ห้องสมุด</a> <span class = "ตัวแบ่ง" > / </span></li>   
  <li class = "ใช้งานอยู่" > ข้อมูล</li> 
</ul>

เลขหน้ามาตรฐาน

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

< คลาสdiv = "การแบ่งหน้า" > 
  <ul>
    <li><a href = "#" > ก่อนหน้า</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 = "#" > ถัดไป</a></li> 
  </ul>
</div>

ตัวเลือก

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

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

< คลาสdiv = "การแบ่งหน้า" > 
  <ul>
    <li class = "ปิดการใช้งาน" ><a href = "#" > « </a></li>  
    <li class = "ใช้งานอยู่" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

< คลาสdiv = "การแบ่งหน้า" > 
  <ul>
    <li class = "ปิดการใช้งาน" ><span> « </span></li> 
    <li class = "ใช้งานอยู่" ><span> 1 </span></li> 
    ...
  </ul>
</div>

ขนาด

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

< คลาสdiv = "การแบ่งหน้า - ใหญ่" > 
  <ul>
    ...
  </ul>
</div>
< คลาสdiv = "การแบ่งหน้า" > 
  <ul>
    ...
  </ul>
</div>
<div class = "การแบ่งหน้า - เล็ก" > 
  <ul>
    ...
  </ul>
</div>
< คลาสdiv = "การแบ่งหน้า-มินิ" > 
  <ul>
    ...
  </ul>
</div>

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

เพิ่มคลาสทางเลือกหนึ่งในสองคลาสเพื่อเปลี่ยนการจัดตำแหน่งของลิงก์การแบ่งหน้า: .pagination-centeredและ.pagination-right

< คลาสdiv = "การแบ่งหน้าเป็นศูนย์กลาง" > 
  ...
</div>

< คลาสdiv = "การแบ่งหน้า - ขวา" > 
  ...
</div>

เพจเจอร์

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

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

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

<ul class = "เพจเจอร์" > 
  <li><a href =  "#" > ก่อนหน้า</a></li>
  <li><a href = "#" > ถัดไป</a></li>
</ul>

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

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

<ul class = "เพจเจอร์" >
  <li class = "ก่อนหน้า"  >
    <a href = "#" > ← แก่กว่า  </a>
  </li>
  <li class = "ถัดไป"  >
    <a href = "#" > ใหม่กว่า → </a>
  </li>
</ul>

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

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

<ul class = "เพจเจอร์" > 
  <li class = "ก่อนหน้าถูกปิดใช้งาน" > 
    <a href = "#" > ← เก่ากว่า </a> 
  </li>
  ...
</ul>

ป้าย

ป้าย

พับเก็บง่าย

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

หน่วยฮีโร่

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

<div class = "ฮีโร่ยูนิต" > 
  <h1> หัวข้อ</h1>
  <p> สโลแกน</p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      เรียนรู้เพิ่มเติม
    </a>
  </p>
</div>

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

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

< คลาสdiv = "ส่วนหัวของหน้า" > 
  <h1> ตัวอย่างส่วนหัวของหน้า<small> ข้อความย่อย สำหรับส่วนหัว</small></h1>
</div>

ภาพขนาดย่อเริ่มต้น

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

ปรับแต่งได้สูง

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

ทำไมต้องใช้ภาพขนาดย่อ

ภาพขนาดย่อ (ก่อนหน้านี้.media-gridจนถึงเวอร์ชัน 1.4) เหมาะสำหรับตารางกริดของรูปภาพหรือวิดีโอ ผลการค้นหารูปภาพ ผลิตภัณฑ์ขายปลีก พอร์ตโฟลิโอ และอื่นๆ อีกมากมาย อาจเป็นลิงก์หรือเนื้อหาคงที่

มาร์กอัปที่เรียบง่ายและยืดหยุ่น

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

ใช้ขนาดคอลัมน์กริด

สุดท้าย คอมโพเนนต์ภาพขนาดย่อใช้คลาสระบบกริดที่มีอยู่ เช่น.span2หรือ.span3เพื่อควบคุมมิติขนาดย่อ

มาร์กอัป

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

<ul class = "ภาพขนาดย่อ" > 
  <li class = "span4" > 
    <a href = "#" class = "ภาพขนาดย่อ" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

สำหรับเนื้อหา HTML ที่กำหนดเองในรูปขนาดย่อ มาร์กอัปจะเปลี่ยนแปลงเล็กน้อย ในการอนุญาตเนื้อหาระดับบล็อกได้ทุกที่ เราสลับ<a>เป็น<div>ดังนี้:

<ul class = "ภาพขนาดย่อ" > 
  <li class = "span4" > 
    < คลาสdiv = "ภาพขนาดย่อ" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> ป้ายกำกับ</h3>
      <p> คำอธิบายภาพย่อ... </p>
    </div>
  </li>
  ...
</ul>

ตัวอย่างเพิ่มเติม

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

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

ตัดข้อความและปุ่มปิดที่เป็นตัวเลือก.alertสำหรับข้อความเตือนพื้นฐาน

< คลาสdiv = "การแจ้งเตือน" > 
  <button type = "button" class = "close" data-dismiss = "alert" > &ครั้ง; </button>   
  <strong> คำเตือน! </strong> เช็คตัวเองให้ดีที่สุด คุณไม่ดูดีเกินไป
</div>

ปุ่มปิด

เบราว์เซอร์ Mobile Safari และ Mobile Opera นอกเหนือจากdata-dismiss="alert"แอตทริบิวต์แล้ว ยังต้องการhref="#"การยกเลิกการเตือนเมื่อใช้<a>แท็ก

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

อีกทางหนึ่ง คุณอาจใช้<button>องค์ประกอบที่มีแอตทริบิวต์ data ซึ่งเราเลือกที่จะทำกับเอกสารของเรา เมื่อใช้<button>คุณต้องรวมtype="button"หรือแบบฟอร์มของคุณอาจไม่ส่ง

<button type = "button" class = "close" data-dismiss = "alert" > &ครั้ง; </button>   

ปิดการแจ้งเตือนผ่าน JavaScript

ใช้ปลั๊กอินแจ้งเตือน jQueryเพื่อยกเลิกการแจ้งเตือนที่ง่ายและรวดเร็ว

ตัวเลือก

สำหรับข้อความที่ยาวขึ้น ให้เพิ่มช่องว่างด้านบนและด้านล่างของ Wrapper การแจ้งเตือนโดย.alert-blockเพิ่ม

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > &ครั้ง; </button>   
  <h4> คำเตือน! </h4>
  เช็คตัวเองให้ดีที่สุด คุณไม่...
</div>

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

เพิ่มคลาสเสริมเพื่อเปลี่ยนความหมายของการแจ้งเตือน

ผิดพลาดหรืออันตราย

<div class = "alert alert-error" > 
  ...
</div>

ความสำเร็จ

<div class = "แจ้งเตือนสำเร็จ" > 
  ...
</div>

ข้อมูล

<div class = "alert alert-info" > 
  ...
</div>

ตัวอย่างและมาร์กอัป

ขั้นพื้นฐาน

แถบความคืบหน้าเริ่มต้นที่มีการไล่ระดับสีในแนวตั้ง

< คลาสdiv = "ความคืบหน้า" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

ลาย

ใช้การไล่ระดับสีเพื่อสร้างเอฟเฟกต์ลายทาง ไม่มีใน IE7-8

<div class = "ความคืบหน้า-ลาย" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

เคลื่อนไหว

เพิ่ม.activeเพื่อ.progress-stripedทำให้แถบเคลื่อนไหวจากขวาไปซ้าย ไม่สามารถใช้ได้ใน IE ทุกรุ่น

<div class = "ความคืบหน้า-ลายใช้งานอยู่" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

ซ้อนกัน

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

< คลาสdiv = "ความคืบหน้า" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

ตัวเลือก

สีเพิ่มเติม

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

<div class = "ความคืบหน้าความคืบหน้า-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "ความคืบหน้า-ความสำเร็จ" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "ความคืบหน้า-คำเตือน" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "ความคืบหน้า-อันตราย" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

แถบลาย

คล้ายกับสีทึบ เรามีแถบแสดงความคืบหน้าแบบต่างๆ

<div class = "ความคืบหน้า-ข้อมูลความคืบหน้า-ลาย" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "ความคืบหน้า - ความสำเร็จ - ลายทาง" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "ความคืบหน้า-การเตือนความคืบหน้า-ลาย" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "ความคืบหน้า - อันตราย - แถบความคืบหน้า" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

รองรับเบราว์เซอร์

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

เวอร์ชันที่เก่ากว่า Internet Explorer 10 และ Opera 12 ไม่สนับสนุนภาพเคลื่อนไหว

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

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

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

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

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

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

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

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

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

<div class = "สื่อ" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > ส่วนหัวของ สื่อ</h4> 
    ...
 
    <!-- ออบเจ็กต์สื่อที่ซ้อนกัน -->
    <div class = "สื่อ" > 
      ...
    </div>
  </div>
</div>

รายการสื่อ

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

<ul class = "media-list" > 
  <li class = "สื่อ" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > ส่วนหัวของ สื่อ</h4> 
      ...
 
      <!-- ออบเจ็กต์สื่อที่ซ้อนกัน -->
      <div class = "สื่อ" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

< คลาส= "ดี" > 
  ...
</div>

คลาสเสริม

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

<div class = "ดีมาก" > 
  ...
</div>

<div class = "ก็ดี ตัวเล็ก" > 
  ...
</div>

ปิดไอคอน

ใช้ไอคอนปิดทั่วไปเพื่อปิดเนื้อหา เช่น โมดอลและการแจ้งเตือน

<button class = "ปิด" > &ครั้ง; </button> 

อุปกรณ์ iOS ต้องการhref="#"เหตุการณ์สำหรับการคลิก หากคุณต้องการใช้จุดยึด

<a class = "ปิด" href = "#" > &ครั้ง; </a>  

คลาสตัวช่วย

คลาสที่เน้นความเรียบง่ายสำหรับการแสดงผลขนาดเล็กหรือการปรับแต่งพฤติกรรม

.pull-left

ลอยองค์ประกอบไปทางซ้าย

class = "ดึงซ้าย"

. ดึง- ซ้าย{
  ลอย: ซ้าย;
}

.pull-right

ลอยองค์ประกอบที่ถูกต้อง

class = "ดึงขวา"

. ดึง- ขวา{
  ลอย: ขวา;
}

.ปิดเสียง

เปลี่ยนสีขององค์ประกอบเป็น#999

คลาส= "ปิดเสียง"

. ปิดเสียง{
  สี: #999; 
}

.clearfix

ล้างfloatบนองค์ประกอบใด ๆ

คลาส= "เคลียร์ฟิกซ์"

. เคลียร์ฟิกซ์{
  * ซูม: 1 ; 
  &: ก่อนหน้านี้ ,
  &: หลังจาก{
    จอแสดงผล: ตาราง;
    เนื้อหา: "" ; 
  }
  &: หลังจาก{
    ชัดเจน: ทั้งสอง;
  }
}