Бүрэлдэхүүн хэсгүүд

Навигац, сэрэмжлүүлэг, поповер болон бусад зүйлсийг хангах зорилгоор бүтээгдсэн олон арван дахин ашиглах боломжтой бүрэлдэхүүн хэсгүүд.

Жишээ

Хоёр үндсэн сонголт, хоёр илүү тодорхой хувилбарууд.

Нэг товчлуурын бүлэг

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

Checkbox болон радио амт

Товчлуурын бүлгүүд нь зөвхөн нэг товчлуур идэвхтэй байж болох радио эсвэл хэдэн ч товчлуур идэвхтэй байж болох тэмдэглэгээний үүрэг гүйцэтгэдэг. Үүний тулд JavaScript баримтуудыг үзнэ үү.

Товчлуурын бүлгүүдийн уналт

Анхаар!Унтраах товчлууртай товчлууруудыг зөв дүрслэхийн тулд тус тусад нь .btn-groupдотор нь ороосон байх ёстой .btn-toolbar.

Тойм ба жишээнүүд

Дурын товчлуурыг ашиглан доош унадаг цэсийг a дотор байрлуулж .btn-group, зохих цэсийн тэмдэглэгээг хийнэ үү.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Үйлдэл
  4. <span class = "caret" ></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 = "caret" ></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 = "caret" ></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 = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- унадаг цэсний холбоосууд -->
  8. </ul>
  9. </div>

Стандарт хуудаслалт

Rdio-ээс санаа авсан энгийн хуудаснууд нь програмууд болон хайлтын илэрцүүдэд тохиромжтой. Том блок нь алдахад хэцүү, хялбархан өргөжүүлэх боломжтой бөгөөд том товшилтын хэсгүүдийг өгдөг.

  1. <div class = "хуудас" >
  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 class = "хуудас" >
  2. <ul>
  3. <li анги = "идэвхгүй" ><a href = "#" > « </a></li>
  4. <li анги = "идэвхтэй" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Та сонгосон хэв маягийг хадгалахын зэрэгцээ товшилтын функцийг арилгахын тулд идэвхтэй эсвэл идэвхгүй зангууг хооронд нь сольж болно.

  1. <div class = "хуудас" >
  2. <ul>
  3. <li анги = "идэвхгүй" ><span> « </span></li>
  4. <li анги = "идэвхтэй" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Хэмжээ

Илүү том эсвэл жижиг хуудас бичихийг хүсч байна уу? Нэмэлт хэмжээтэй .pagination-largeбол , .pagination-small, эсвэл нэмнэ үү ..pagination-mini

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "хуудас" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Тохируулга

Хуудасны холбоосын зэрэгцүүлэлтийг өөрчлөхийн тулд хоёр нэмэлт ангийн нэгийг нэмнэ үү: .pagination-centeredболон .pagination-right.

  1. <div class = "pagination pageization-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  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 анги = "өмнөх" >
  3. <a href = "#" > Хуучин </a>
  4. </li>
  5. <li анги = "дараагийн" >
  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>

Амархан эвхэгддэг

Хэрэгжүүлэхэд хялбар болгохын тулд шошго, тэмдэг нь :emptyдотор нь ямар ч контент байхгүй үед (CSS сонгогчоор дамжуулан) зүгээр л унана.

Баатар нэгж

Таны сайт дээрх гол агуулгыг харуулах хөнгөн, уян хатан бүрэлдэхүүн хэсэг. Энэ нь маркетинг, агуулга ихтэй сайтууд дээр сайн ажилладаг.

Сайн уу, дэлхий!

Энэ бол онцлох контент эсвэл мэдээлэлд илүү анхаарал хандуулахад зориулагдсан энгийн баатрын нэгж, энгийн jumbotron загварын бүрэлдэхүүн хэсэг юм.

Илүү их судла

  1. <div анги = "баатар-нэгж" >
  2. <h1> Гарчиг </h1>
  3. <p> Тайлбар </p>
  4. <p>
  5. <a анги = "btn btn-primary btn-large" >
  6. Илүү их судла
  7. </a>
  8. </p>
  9. </div>

Хуудасны толгой хэсэг

h1Хуудас дээрх агуулгын хэсгүүдийг зөв зайлж, хэсэгчлэн гаргахад зориулагдсан энгийн бүрхүүл . Энэ нь h1үндсэн small, элемент болон бусад ихэнх бүрэлдэхүүн хэсгүүдийг (нэмэлт загвартай) ашиглаж болно.

  1. <div class = "page-header" >
  2. <h1> Жишээ хуудасны толгой хэсэг <small> Толгой хэсгийн дэд текст </small></h1>
  3. </div>

Өгөгдмөл өнгөц зураг

Анхдагч байдлаар, Bootstrap-ийн өнгөц зургууд нь хамгийн бага шаардлагатай тэмдэглэгээ бүхий холбосон зургуудыг харуулах зорилготой юм.

Өндөр тохируулгатай

Бага зэрэг нэмэлт тэмдэглэгээ хийснээр гарчиг, догол мөр, товчлуур гэх мэт ямар ч төрлийн HTML контентыг өнгөц зурагт оруулах боломжтой.

  • 300x200

    Өнгөц зургийн шошго

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Үйлдэл Үйлдэл

  • 300x200

    Өнгөц зургийн шошго

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Үйлдэл Үйлдэл

  • 300x200

    Өнгөц зургийн шошго

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Үйлдэл Үйлдэл

Яагаад өнгөц зургийг ашиглах ёстой гэж

Өнгөц зураг (өмнө .media-gridнь v1.4 хүртэл) нь зураг эсвэл видеоны сүлжээ, зургийн хайлтын үр дүн, жижиглэнгийн бүтээгдэхүүн, багц болон бусад олон зүйлд тохиромжтой. Эдгээр нь холбоос эсвэл статик контент байж болно.

Энгийн, уян хатан тэмдэглэгээ

Өнгөц зургийн тэмдэглэгээ нь энгийн ulбөгөөд ямар ч тооны liэлементтэй байхад л хангалттай. Энэ нь маш уян хатан бөгөөд ямар ч төрлийн контентыг арай илүү тэмдэглэгээтэй болгож, агуулгыг боох боломжийг олгодог.

Сүлжээ баганын хэмжээг ашигладаг

Эцэст нь, өнгөц зургийн бүрэлдэхүүн хэсэг нь өнгөц зургийн хэмжээсийг хянахын тулд одоо .span2байгаа сүлжээний системийн ангиллыг ашигладаг ..span3

Тэмдэглэгээ

Өмнө дурьдсанчлан, өнгөц зурагт шаардлагатай тэмдэглэгээ нь хөнгөн бөгөөд ойлгомжтой байдаг. Холбогдсон зургуудын өгөгдмөл тохиргоог эндээс харна уу :

  1. <ul class = "thumbnails" >
  2. <li анги = "span4" >
  3. <a href = "#" анги = "өнгөц зураг" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Өнгөц зураг дээрх тусгай HTML агуулгын хувьд тэмдэглэгээ бага зэрэг өөрчлөгддөг. Блокны түвшний агуулгыг хаана ч зөвшөөрөхийн тулд бид дараах байдлаар <a>солино <div>:

  1. <ul class = "thumbnails" >
  2. <li анги = "span4" >
  3. <div class = "thumbnail" >
  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 = "товчлуур" анги = "хаах" data-dississ = "анхаарал" > × </button>
  3. <strong> Анхааруулга! </strong> Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.
  4. </div>

Хаах товчлуурууд

Мобайл Safari болон Mobile Opera хөтчүүд нь шинж чанараас гадна шошгыг ашиглах үед анхааруулга data-dismiss="alert"өгөхийг шаарддаг .href="#"<a>

  1. <a href = "#" class = "close" data-dississ = "anert" > × </a>

Эсвэл та <button>бидний баримт бичигт ашиглахаар сонгосон өгөгдлийн шинж чанартай элементийг ашиглаж болно. -ийг ашиглах <button>үед та оруулах ёстой type="button", эс тэгвээс таны маягтыг илгээхгүй байж болно.

  1. <button type = "товчлуур" анги = "хаах" data-dississ = "анхаарал" > × </button>

JavaScript-ээр дамжуулан сэрэмжлүүлгийг хаах

Анхааруулга jQuery залгаасыг ашиглан сэрэмжлүүлгийг хурдан бөгөөд хялбар хаах боломжтой.


Сонголтууд

Илүү урт мессежийн хувьд анхааруулах боодолын дээд ба доод хэсэгт байгаа дэвсгэрийг нэмэх замаар нэмэгдүүлнэ үү .alert-block.

Анхааруулга!

Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна. Nulla vitae elit libero, pharetra augue. Тэнд commodo cursus magna, vel sclerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <button type = "товчлуур" анги = "хаах" data-dississ = "анхаарал" > × </button>
  3. <h4> Анхааруулга! </h4>
  4. Өөрийгөө шалгасан нь дээр, чи...
  5. </div>

Контекст хувилбарууд

Анхааруулгын утгыг өөрчлөхийн тулд нэмэлт анги нэмнэ үү.

Алдаа эсвэл аюул

Өө гэнэтийн! Хэд хэдэн зүйлийг өөрчлөөд дахин оруулахыг оролдоно уу.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Амжилт

Сайн хийлээ! Та энэхүү чухал сэрэмжлүүлэг мессежийг амжилттай уншсан.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Мэдээлэл

Анхаар! Энэ сэрэмжлүүлэгт таны анхаарал хэрэгтэй байгаа ч энэ нь тийм ч чухал биш юм.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Жишээ ба тэмдэглэгээ

Үндсэн

Босоо градиент бүхий өгөгдмөл явцын мөр.

  1. <div class = "progress" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

Судалчлагдсан

Судалчлагдсан эффект үүсгэхийн тулд градиент ашигладаг. IE7-8-д байхгүй.

  1. <div class = "progress progress-stried" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

Хөдөлгөөнт

Баруунаас зүүн тийш зураасыг хөдөлгөөнтэй .activeболгохын тулд дээр нэмнэ үү . .progress-stripedIE-ийн бүх хувилбарт байхгүй.

  1. <div class = "progress progress-stried active" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

Давхардсан

Олон баарыг нэг дор байрлуулж, .progressтэдгээрийг давхарлана.

  1. <div class = "progress" >
  2. <div class = "bar-success" style = " өргөн : 35 %; " ></div>
  3. <div class = "bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Сонголтууд

Нэмэлт өнгө

Явцын мөрүүд нь ижил товчлуур болон дохиоллын ангиудыг тогтмол хэв маягт ашигладаг.

  1. <div class = "progress progress-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 = "progress progress-info progress-striped" >
  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 = " өргөн : 80 % " ></div>
  12. </div>

Хөтөчийн дэмжлэг

Явцын мөрүүд нь бүх үр дүнд хүрэхийн тулд CSS3 градиент, шилжилт, хөдөлгөөнт дүрсийг ашигладаг. Эдгээр функцуудыг IE7-9 болон Firefox-ын хуучин хувилбаруудад дэмждэггүй.

Internet Explorer 10 болон Opera 12-аас өмнөх хувилбарууд нь хөдөлгөөнт дүрсийг дэмждэггүй.

Текстийн агуулгын хажууд зүүн эсвэл баруун тийш зэрэгцүүлсэн зургийг агуулсан янз бүрийн төрлийн бүрэлдэхүүн хэсгүүдийг (блогын сэтгэгдэл, жиргээ гэх мэт) бүтээхэд зориулсан хийсвэр объектын хэв маяг.

Өгөгдмөл жишээ

Өгөгдмөл медиа нь медиа объектыг (зураг, видео, аудио) агуулгын блокийн зүүн эсвэл баруун талд хөвөх боломжийг олгодог.

64x64

Хэвлэл мэдээллийн гарчиг

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Хэвлэл мэдээллийн гарчиг

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Хэвлэл мэдээллийн гарчиг

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  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 = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Хэвлэл мэдээллийн жагсаалт

Бага зэрэг нэмэлт тэмдэглэгээ хийснээр та жагсаалтын доторх медиаг ашиглаж болно (тайлбарын хэлхээс эсвэл нийтлэлийн жагсаалтад хэрэгтэй).

  • 64x64

    Хэвлэл мэдээллийн гарчиг

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class="media-list">
  2. <li class="media">
  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">Media heading</h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class="media">
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
  1. <div class="well">
  2. ...
  3. </div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!
  1. <div class="well well-large">
  2. ...
  3. </div>
Look, I'm in a well!
  1. <div class="well well-small">
  2. ...
  3. </div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

  1. <button class="close">&times;</button>

iOS devices require an href="#" for click events if you would rather use an anchor.

  1. <a class="close" href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

  1. class="pull-left"
  1. .pull-left {
  2. float: left;
  3. }

.pull-right

Float an element right

  1. class="pull-right"
  1. .pull-right {
  2. float: right;
  3. }

.muted

Change an element's color to #999

  1. class="muted"
  1. .muted {
  2. color: #999;
  3. }

.clearfix

Clear the float on any element

  1. class="clearfix"
  1. .clearfix {
  2. *zoom: 1;
  3. &:before,
  4. &:after {
  5. display: table;
  6. content: "";
  7. }
  8. &:after {
  9. clear: both;
  10. }
  11. }