ส่วนประกอบ

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

ตัวอย่าง

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

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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > ซ้าย</button>
  3. <button class = "btn" > กลาง</button>
  4. <button class = "btn" > ขวา</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>

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

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

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

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

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

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

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

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

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

  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.

ต้องใช้ JavaScript

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

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


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

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

  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>

ขนาด

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > การดำเนินการ</button>
  3. <button class = "btn btn-mini 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 เหมาะสำหรับแอปและผลการค้นหา บล็อกขนาดใหญ่นั้นยากที่จะพลาด ปรับขนาดได้ง่าย และมีพื้นที่การคลิกขนาดใหญ่

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

ตัวเลือก

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

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

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

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

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

ขนาด

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

  1. < คลาสdiv = "การแบ่งหน้า - ใหญ่" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. < คลาสdiv = "การแบ่งหน้า" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "การแบ่งหน้า - เล็ก" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. < คลาสdiv = "การแบ่งหน้า-มินิ" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

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

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

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

เพจเจอร์

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

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

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

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

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

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

  1. <ul class = "เพจเจอร์" >
  2. <li class = "ก่อนหน้า" >
  3. <a href = "#" > แก่กว่า </a>
  4. </li>
  5. <li class = "ถัดไป" >
  6. <a href = "#" > ใหม่กว่า → </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "เพจเจอร์" >
  2. <li class = "ก่อนหน้าถูกปิดใช้งาน" >
  3. <a href = "#" > เก่ากว่า </a>
  4. </li>
  5. ...
  6. </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>

ป้าย

ชื่อ ตัวอย่าง มาร์กอัป
ค่าเริ่มต้น 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>

พับเก็บง่าย

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

หน่วยฮีโร่

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

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

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

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

  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> ตัวอย่างส่วนหัวของหน้า<small> ข้อความย่อย สำหรับส่วนหัว</small></h1>
  3. </div>

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

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

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

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

  • 300x200

    ป้ายรูปขนาดย่อ

    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

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

  • 300x200

    ป้ายรูปขนาดย่อ

    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

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

  • 300x200

    ป้ายรูปขนาดย่อ

    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 = "span4" >
  3. <a href = "#" class = "ภาพขนาดย่อ" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

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

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

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

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

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

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

ปุ่มปิด

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

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

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

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

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

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


ตัวเลือก

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

คำเตือน!

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

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > &ครั้ง; </button>
  3. <h4> คำเตือน! </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 class = "bar" style = " width : 60 %; " ></div>
  3. </div>

ลาย

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

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

เคลื่อนไหว

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

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

ซ้อนกัน

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

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

ตัวเลือก

สีเพิ่มเติม

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

  1. <div class = "ความคืบหน้าความคืบหน้า-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "ความคืบหน้า-ความสำเร็จ" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "ความคืบหน้า-คำเตือน" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "ความคืบหน้า-อันตราย" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

แถบลาย

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

  1. <div class = "ความคืบหน้า-ข้อมูลความคืบหน้า-ลาย" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "ความคืบหน้า - ความสำเร็จ - ลายทาง" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "ความคืบหน้า-การเตือนความคืบหน้า-ลาย" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "ความคืบหน้า - อันตราย - แถบความคืบหน้า" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

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

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

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

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

64x64

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

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 ในโฟซิบัส
64x64

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

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 ในโฟซิบัส
64x64

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

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 ในโฟซิบัส
  1. <div class = "สื่อ" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > ส่วนหัวของ สื่อ</h4>
  7. ...
  8.  
  9. <!-- ออบเจ็กต์สื่อที่ซ้อนกัน -->
  10. <div class = "สื่อ" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

รายการสื่อ

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

  • 64x64

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

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.

    64x64

    หัวเรื่องสื่อที่ซ้อนกัน

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.
    64x64

    หัวเรื่องสื่อที่ซ้อนกัน

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.
    64x64

    หัวเรื่องสื่อที่ซ้อนกัน

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.
  • 64x64

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

    Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "สื่อ" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > ส่วนหัวของ สื่อ</h4>
  8. ...
  9.  
  10. <!-- ออบเจ็กต์สื่อที่ซ้อนกัน -->
  11. <div class = "สื่อ" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

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

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

คลาสเสริม

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

ฟังนะ ฉันอยู่ในบ่อน้ำ!
  1. <div class = "ดีมาก" >
  2. ...
  3. </div>
ฟังนะ ฉันอยู่ในบ่อน้ำ!
  1. <div class = "ก็ดี ตัวเล็ก" >
  2. ...
  3. </div>

ปิดไอคอน

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

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

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

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

คลาสตัวช่วย

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

.pull-left

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

  1. class = "ดึงซ้าย"
  1. . ดึง- ซ้าย{
  2. ลอย: ซ้าย;
  3. }

.pull-right

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

  1. class = "ดึงขวา"
  1. . ดึง- ขวา{
  2. ลอย: ขวา;
  3. }

.ปิดเสียง

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

  1. คลาส= "ปิดเสียง"
  1. . ปิดเสียง{
  2. สี: #999;
  3. }

.clearfix

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

  1. คลาส= "เคลียร์ฟิกซ์"
  1. . เคลียร์ฟิกซ์{
  2. * ซูม: 1 ;
  3. &: ก่อนหน้านี้ ,
  4. &: หลังจาก{
  5. จอแสดงผล: ตาราง;
  6. เนื้อหา: "" ;
  7. }
  8. &: หลังจาก{
  9. ชัดเจน: ทั้งสอง;
  10. }
  11. }