กลุ่มปุ่ม

ใช้กลุ่มปุ่มเพื่อรวมหลายปุ่มเข้าด้วยกันเป็นส่วนประกอบเดียว สร้างด้วยชุดของ<a>หรือ<button>องค์ประกอบ

ปฏิบัติที่ดีที่สุด

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

• ใช้องค์ประกอบเดียวกันในกลุ่มปุ่มเดียว<a>หรือ<button>.
• อย่าผสมปุ่มที่มีสีต่างกันในกลุ่มปุ่มเดียวกัน
• ใช้ไอคอนเพิ่มเติมจากหรือแทนข้อความ แต่ต้องแน่ใจว่าใส่ข้อความแสดงแทนและชื่อตามความเหมาะสม

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

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

ต่อไปนี้คือวิธีที่ HTML ค้นหากลุ่มปุ่มมาตรฐานที่สร้างด้วยปุ่มแท็กสมอ:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

ตัวอย่างแถบเครื่องมือ

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

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

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

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

รับจาวาสคริปต์ »

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

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

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

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

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

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

<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

ต้องใช้จาวาสคริปต์

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

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

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

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

ขนาด

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- ลิงค์เมนูแบบเลื่อนลง -->
  </ul>
</div>

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

เราขยายรายการดรอปดาวน์ของปุ่มปกติเพื่อให้การทำงานของปุ่มที่สองซึ่งทำงานเป็นทริกเกอร์ดรอปดาวน์แยกต่างหาก

<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>

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

เมนูแบบเลื่อนลงยังสามารถสลับจากล่างขึ้นบนด้วยการเพิ่มคลาสเดียวไปยังพาเรนต์โดยตรง.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ชั้นเรียน

เมื่อใดควรใช้

แท็บและยาเม็ดเหมาะสำหรับส่วนต่างๆ ของเนื้อหาหรือการนำทางระหว่างหน้าต่างๆ ของเนื้อหาที่เกี่ยวข้อง

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

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

แท็บพื้นฐาน

ใช้<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>

วิธีการซ้อนพวกมัน

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

แท็บซ้อนกัน

• บ้าน
• ประวัติโดยย่อ
• ข้อความ

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

เม็ดซ้อน

• บ้าน
• ประวัติโดยย่อ
• ข้อความ

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

เมนูหลากหลายทำได้ง่าย ๆ

เมนูแบบเลื่อนลงในแท็บ Bootstrap และยาเม็ดนั้นง่ายมากและต้องการ HTML พิเศษเพียงเล็กน้อยและปลั๊กอิน jQuery ที่มีน้ำหนักเบา

ตรงไปที่หน้า Javascript เพื่ออ่านเอกสารเกี่ยวกับการเริ่มต้นดรอปดาวน์ใน Bootstrap

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

• บ้าน
• ช่วย
• หล่นลง
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• บ้าน
• ช่วย
• หล่นลง
  • Action
  • Another action
  • Something else here
  • Separated link

<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

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

พร้อมไอคอน

รายการการนำทางยังง่ายต่อการติดตั้งด้วยไอคอน เพิ่ม<i>แท็กที่เหมาะสมกับคลาสและคุณพร้อมแล้ว

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

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

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

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

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

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

ตัวอย่างที่มีไอคอน

ตัวอย่างเดียวกัน แต่มี<i>แท็กสำหรับไอคอน

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ไอคอนหนังสือ" ></i> 
      ห้องสมุด
    </a>
  </li>
  ...
</ul>

รวมอะไรบ้าง

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

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

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

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

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

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

รับจาวาสคริปต์ →

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

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

สำหรับแท็บที่จัดชิดขวาหรือซ้าย ให้ตัด.nav-tabsและ.tab-contentใน.tabbable

มาร์กอัปตรงไปตรงมา

การใช้แท็บแบบแท็บได้ต้องมี div การตัดคำ ชุดแท็บ และชุดแผงเนื้อหาแบบแท็บได้

<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>

แถบด้านล่าง

พลิกลำดับของ 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>

Navbar นั่งร้าน

แถบนำทางต้องการเพียงไม่กี่ divs เพื่อจัดโครงสร้างให้ดีสำหรับการแสดงผลแบบคงที่หรือแบบคงที่

< คลาสdiv = "แถบนำทาง" > 
  <div class = "navbar-inner" > 
    < คลาสdiv = "คอนเทนเนอร์" > 
      ...
    </div>
  </div>
</div>

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

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

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

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

เมื่อคุณติดแถบนำทาง อย่าลืมคำนึงถึงพื้นที่ที่ซ่อนอยู่ด้านล่าง เพิ่มช่องว่างภายใน 40px ขึ้นไปในไฟล์<body>. อย่าลืมเพิ่มสิ่งนี้หลังจาก Bootstrap CSS หลักและก่อน CSS ที่ตอบสนองซึ่งเป็นทางเลือก

ชื่อแบรนด์

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

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

แบบฟอร์มในแถบนำทาง

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

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

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

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

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

คุณอาจต้องการใช้ตัวเลือกที่ตอบสนอง ทั้งนี้ขึ้นอยู่กับปริมาณเนื้อหาในแถบด้านบนของคุณ ในการดำเนินการดังกล่าว ให้รวมเนื้อหาการนำทางของคุณใน div ที่มี.nav-collapse.collapseและเพิ่มปุ่มสลับแถบนำทาง.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 = "nav-ยุบ" > 
        <!-- .nav, .navbar-search, .navbar-form ฯลฯ -->
      </div>
 
    </div>
  </div>
</div>

ลิงค์นำทาง

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

<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>

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

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

การเพิ่มเมนูแบบเลื่อนลง

การเพิ่มดรอปดาวน์และดรอปอัพในการนำทางนั้นง่ายมาก แต่ต้องใช้ปลั๊กอินจาวาสคริปต์ของเรา

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

รับจาวาสคริปต์ →

ข้อความในแถบนำทาง

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

ทำไมต้องใช้

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

ตัวอย่าง

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

• บ้าน

• หน้าแรก /
• ห้องสมุด

• หน้าแรก /
• ห้องสมุด /
• ข้อมูล

มาร์กอัป

HTML เป็นรายการที่ไม่เรียงลำดับมาตรฐานพร้อมลิงก์

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

เมื่อใดควรใช้

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

ลิงค์เพจแบบเก็บสถานะ

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

การจัดตำแหน่งที่ยืดหยุ่น

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

ตัวอย่าง

องค์ประกอบการแบ่งหน้าเริ่มต้นมีความยืดหยุ่นและทำงานได้หลายรูปแบบ

มาร์กอัป

ห่อด้วย a การ<div>แบ่งหน้าเป็นเพียง<ul>.

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

เกี่ยวกับเพจเจอร์

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

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

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

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

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

• ก่อนหน้า
• ต่อไป

<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>

เกี่ยวกับ

ป้ายเป็นส่วนประกอบขนาดเล็กและเรียบง่ายสำหรับการแสดงตัวบ่งชี้หรือการนับจำนวนบางอย่าง มักพบในโปรแกรมรับส่งเมล เช่น Mail.app หรือแอปบนอุปกรณ์เคลื่อนที่สำหรับการแจ้งเตือนแบบพุช

ชั้นเรียนที่มีอยู่

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

มาร์กอัป

ห่อเนื้อหาของคุณในdivลักษณะดังนี้:

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

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

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

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

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

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

ด้วยมาร์กอัปเพิ่มเติมเล็กน้อย คุณสามารถเพิ่มเนื้อหา 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

  การกระทำ การกระทำ

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

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

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

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

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

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

มาร์กอัป

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

<ul class = "ภาพขนาดย่อ" > 
  <li class = "span3" > 
    <a href = "#" class = "ภาพขนาดย่อ" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "ภาพขนาดย่อ" > 
  <li class = "span3" > 
    < คลาสdiv = "ภาพขนาดย่อ" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> ป้ายชื่อย่อ </h5>
      <p> คำบรรยายใต้ภาพที่นี่... </p>
    </div>
  </li>
  ...
</ul>

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

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

คลาสฐานที่เขียนใหม่

ด้วย Bootstrap 2 เราได้ลดความซับซ้อนของคลาสพื้นฐาน: .alertแทนที่จะเป็น.alert-message. นอกจากนี้ เรายังได้ลดมาร์กอัปขั้นต่ำที่<p>จำเป็น โดยค่าเริ่มต้น ไม่จำเป็น เฉพาะส่วนนอก<div>เท่านั้น

ข้อความแจ้งเตือนเดียว

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

เข้ากันได้ดีกับ javascript

Bootstrap มาพร้อมกับปลั๊กอิน jQuery ที่ยอดเยี่ยมซึ่งรองรับข้อความเตือน ทำให้การปิดข้อความเหล่านี้ทำได้ง่ายและรวดเร็ว

รับปลั๊กอิน »

ตัวอย่างการแจ้งเตือน

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

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

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

ขยายข้อความเตือนมาตรฐานอย่างง่ายดายด้วยคลาสทางเลือกสองคลาส: .alert-blockสำหรับการเว้นช่องว่างและการควบคุมข้อความเพิ่มเติม และ.alert-headingสำหรับส่วนหัวที่ตรงกัน

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

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

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

ความสำเร็จ

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

ข้อมูล

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

ขั้นพื้นฐาน

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

< คลาสdiv = "ความคืบหน้า" > 
  < คลาสdiv = "บาร์" 
       style = " กว้าง: 60 %; " ></div> 
</div>

ลาย

ใช้การไล่ระดับสีเพื่อสร้างเอฟเฟกต์แบบแถบ (ไม่มี IE)

<div class = "ความคืบหน้า-ลาย" > 
  < คลาสdiv = "บาร์" 
       style = " กว้าง: 20 %; " ></div> 
</div>

เคลื่อนไหว

นำตัวอย่างลายทางและเคลื่อนไหว (ไม่มี IE)

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

สีเพิ่มเติม

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

แถบลาย

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

พฤติกรรม

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

หากคุณใช้.activeชั้นเรียน.progress-stripedแถบความคืบหน้าของคุณจะทำให้แถบเคลื่อนไหวจากซ้ายไปขวา

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

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

Opera และ IE ไม่รองรับภาพเคลื่อนไหวในขณะนี้

Wells

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

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

ปิดไอคอน

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

×

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

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

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