ส่วนประกอบ

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

กลุ่มปุ่ม

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

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

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

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

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

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

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

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

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

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

ขนาด

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

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

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

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

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

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

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

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "คาเร็ต" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- ลิงค์เมนูแบบเลื่อนลง -->
  8. </ul>
  9. </div>

การแบ่งหน้าหลายหน้า

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

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

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

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

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

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

ตัวอย่าง

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

มาร์กอัป

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

  1. < คลาสdiv = "การแบ่งหน้า" >
  2. <ul>
  3. <li><a href = "#" > ก่อนหน้า</a></li>
  4. <li class = "ใช้งานอยู่" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > ถัดไป</a></li>
  11. </ul>
  12. </div>

Pager สำหรับลิงค์ก่อนหน้าและถัดไปอย่างรวดเร็ว

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

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

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

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

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

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

  1. <ul class = "เพจเจอร์" >
  2. <li>
  3. <a href = "#" > ก่อนหน้า</a>
  4. </li>
  5. <li>
  6. <a href = "#" > ต่อไป</a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "เพจเจอร์" >
  2. <li class = "ก่อนหน้า" >
  3. <a href = "#" > เก่ากว่า</a>
  4. </li>
  5. <li class = "ถัดไป" >
  6. <a href = "#" > ใหม่กว่า → </a>
  7. </li>
  8. </ul>
ป้าย มาร์กอัป
ค่าเริ่มต้น <span class="label">Default</span>
ความสำเร็จ <span class="label label-success">Success</span>
คำเตือน <span class="label label-warning">Warning</span>
สำคัญ <span class="label label-important">Important</span>
ข้อมูล <span class="label label-info">Info</span>
ผกผัน <span class="label label-inverse">Inverse</span>

เกี่ยวกับ

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

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

ชื่อ ตัวอย่าง มาร์กอัป
ค่าเริ่มต้น 1 <span class="badge">1</span>
ความสำเร็จ 2 <span class="badge badge-success">2</span>
คำเตือน 4 <span class="badge badge-warning">4</span>
สำคัญ 6 <span class="badge badge-important">6</span>
ข้อมูล 8 <span class="badge badge-info">8</span>
ผกผัน 10 <span class="badge badge-inverse">10</span>

หน่วยฮีโร่

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

มาร์กอัป

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

  1. <div class = "ฮีโร่ยูนิต" >
  2. <h1> หัวข้อ</h1>
  3. <p> สโลแกน</p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. เรียนรู้เพิ่มเติม
  7. </a>
  8. </p>
  9. </div>

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

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

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

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

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

  1. < คลาสdiv = "ส่วนหัวของหน้า" >
  2. <h1> ตัวอย่างส่วนหัวของหน้า</h1>
  3. </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เพื่อควบคุมมิติขนาดย่อ

มาร์กอัป

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

  1. <ul class = "ภาพขนาดย่อ" >
  2. <li class = "span3" >
  3. <a href = "#" class = "ภาพขนาดย่อ" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

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

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

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

ค่าเริ่มต้นที่มีน้ำหนักเบา

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

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

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

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


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

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

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

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

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

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

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

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

คำเตือน!

เช็คตัวเองให้ดีที่สุด คุณไม่ได้ดูดีเกินไป Nulla vitae elit libero, pharetra augue. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et.

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

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

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

อื้อหือ! เปลี่ยนแปลงบางสิ่งแล้วลองส่งอีกครั้ง
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

ความสำเร็จ

ทำได้ดี! คุณอ่านข้อความแจ้งเตือนที่สำคัญนี้สำเร็จแล้ว
  1. <div class = "แจ้งเตือนสำเร็จ" >
  2. ...
  3. </div>

ข้อมูล

หัวขึ้น! การแจ้งเตือนนี้ต้องการความสนใจจากคุณ แต่ก็ไม่สำคัญอย่างยิ่ง
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

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

ขั้นพื้นฐาน

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

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

ลาย

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

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

เคลื่อนไหว

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

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

ตัวเลือกและการสนับสนุนเบราว์เซอร์

สีเพิ่มเติม

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

แถบลาย

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

พฤติกรรม

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

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

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

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

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

Wells

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

ฟังนะ ฉันอยู่ในบ่อน้ำ!
  1. < คลาส= "ดี" >
  2. ...
  3. </div>

ปิดไอคอน

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

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

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

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