Жишээ

Холбоосуудын жагсаалтыг харуулах, солих боломжтой, контекст цэс. Унтраах JavaScript залгаасыг ашиглан интерактив болгосон .

<ul class = "dropdown-цэс" үүрэг = "цэс" 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 анги = "хуваагч" ></li> 
  <li><a tabindex = "-1" href = "#" > Тусгаарлагдсан холбоос </a></li>  
</ul>

Тэмдэглэгээ

Зөвхөн унадаг цэсийг харахад шаардлагатай HTML энд байна. Та унадаг триггер болон унждаг цэсийг дотор .dropdownнь эсвэл өөр элементийг зарлах хэрэгтэй position: relative;. Дараа нь цэс үүсгэхэд л хангалттай.

<div class = "dropdown" > 
  <!-- Унждаг цэсийг сэлгэх холбоос эсвэл товчлуур -->
  <ul class = "dropdown-цэс" үүрэг = "цэс" 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 анги = "хуваагч" ></li> 
    <li><a tabindex = "-1" href = "#" > Тусгаарлагдсан холбоос </a></li>  
  </ul>
</div>

Сонголтууд

Цэсүүдийг баруун тийш зэрэгцүүлж, унадаг цэсийн нэмэлт түвшнийг нэмнэ үү.

Цэсүүдийг зэрэгцүүлж байна

Унждаг .pull-rightцэсийг .dropdown-menuбаруун тийш зэрэгцүүлэх.

<ul class = "dropdown-цэсийг баруун тийш татах" үүрэг = "цэс" aria-labelledby = "dLabel" >   
  ...
</ul>

Цэсийн сонголтыг идэвхгүй болгосон

Холбоосыг идэвхгүй болгохын тулд унадаг цэсний .disableda дээр нэмнэ үү .<li>

<ul class = "dropdown-цэс" үүрэг = "цэс" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Энгийн холбоос </a></li>  
  <li анги = "идэвхгүй" ><a tabindex = "-1" href = "#" > Идэвхгүй холбоос </a></li>   
  <li><a tabindex = "-1" href = "#" > Өөр холбоос </a></li>  
</ul>

Унтраах цэсний дэд цэсүүд

Зарим энгийн тэмдэглэгээний нэмэлтүүдээр OS X-ийнх шиг хулгана дээр гарч ирэх унадаг цэсийн нэмэлт түвшнийг нэмнэ үү. Автомат загварчлахын тулд одоо байгаа унждаг цэсний .dropdown-submenuаль нэгэнд нэмнэ үү .li

Өгөгдмөл

Унтраах

Зүүн дэд цэс

<ul class = "dropdown-цэс" үүрэг = "цэс" 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>

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

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

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

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

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

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

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

Хөнгөн өгөгдмөлүүд Ижил тэмдэглэгээ, өөр ангиуд

Энд байгаа бүх навигацийн бүрэлдэхүүн хэсгүүд - таб, эм, жагсаалт зэрэг нь ижил үндсэн тэмдэглэгээ, хэв маягийг ангиараа хуваалцдаг .nav.

Үндсэн табууд

Тогтмол <ul>холбоосыг авч, дараахыг нэмнэ .nav-tabsүү:

<ul class = "nav nav-tabs" > 
  <li анги = "идэвхтэй" > 
    <a href = "#" > Нүүр хуудас </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Үндсэн эмүүд

Үүнтэй ижил HTML-г аваарай, гэхдээ .nav-pillsоронд нь:

<ul class = "nav nav-pills" > 
  <li анги = "идэвхтэй" > 
    <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 = "идэвхгүй" ><a href = "#" > Нүүр хуудас </a></li>  
  ...
</ul>

Бүрэлдэхүүн хэсгүүдийн тохируулга

Navigation холбоосыг зэрэгцүүлэхийн тулд, .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 анги = "унадаг" > 
    <a анги = "унтраах-шилжүүлэх" 
       data-toggle = "унадаг"
       href = "#" >
        Унтраах цэс
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- холбоосууд -->
    </ul>
  </li>
</ul>

Унтраах эмүүд

<ul class = "nav nav-pills" > 
  <li анги = "унадаг" > 
    <a анги = "унтраах-шилжүүлэх" 
       data-toggle = "унадаг"
       href = "#" >
        Унтраах цэс
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- холбоосууд -->
    </ul>
  </li>
</ul>

Nav жагсаалт

Нэмэлт толгойтой navigasyon холбоосын бүлгүүдийг үүсгэх энгийн бөгөөд хялбар арга. Тэдгээрийг OS X дээрх Finder гэх мэт хажуугийн самбарт хамгийн сайн ашигладаг.

Navigation жагсаалтын жишээ

Холбоосуудын жагсаалтыг аваад нэмнэ 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>

Анхаарна ууNavigation жагсаалтын дотор үүрлэхийн тулд class="nav nav-list"дурын nested дээр оруулна уу <ul>.

Хэвтээ хуваагч

Ангитай хоосон жагсаалт үүсгэх замаар хэвтээ хуваагч нэмнэ .divider, жишээ нь:

<ul class = "nav nav-list" > 
  ...
  <li анги = "хуваагч" ></li> 
  ...
</ul>

Хэвлэх боломжтой

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

Таблетийн жишээ

Табуудыг чих боломжтой болгохын тулд таб .tab-paneбүрт өвөрмөц ID-г үүсгээд тэдгээрийг дотор нь боож өгнө үү .tab-content.

Би 1-р хэсэгт байна.

Сайн байна уу, би 2-р хэсэгт байна.

Яасан бэ охин минь, энэ бол 3-р хэсэг.

<div class = "tabbable" > <!-- Зөвхөн зүүн/баруун таб -->-д шаардлагатай  
  <ul class = "nav nav-tabs" > 
    <li анги = "идэвхтэй" ><a href = "#tab1" data-toggle = "tab" > 1-р хэсэг </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2-р хэсэг </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane идэвхтэй" id = "tab1" >  
      <p> Би 1-р хэсэгт байна. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Сайн байна уу, би 2-р хэсэгт байна. </p>
    </div>
  </div>
</div>

Таб дотор бүдгэрэх

Табуудыг бүдгэрүүлэхийн .fadeтулд тус бүр дээр нэмнэ үү .tab-pane.

jQuery залгаас шаарддаг

Бүх tab-tab-ууд нь манай jQuery нэмэлт өргөтгөлөөр ажилладаг. JavaScript docs хуудаснаас tabbable табуудыг хэрхэн амилуулах талаар дэлгэрэнгүй уншина уу .

Ямар ч чиглэлд товшилт хийх боломжтой

Доод талд байгаа табууд

HTML-ийн дарааллыг эргүүлж, доод хэсэгт табуудыг оруулах анги нэмнэ үү.

Би А хэсэгт байна.

Сайн байна уу, би В хэсэгт байна.

Охин минь, энэ бол С хэсэг.

<div class = "tabbable tab-доор" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Зүүн талд байгаа табууд

Зүүн талд табуудыг оруулахын тулд ангиа соль.

Би А хэсэгт байна.

Сайн байна уу, би В хэсэгт байна.

Охин минь, энэ бол С хэсэг.

<div class = "tabbable tab-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Баруун талд байгаа табууд

Баруун талд байгаа табуудыг оруулахын тулд ангиа соль.

Би А хэсэгт байна.

Сайн байна уу, би В хэсэгт байна.

Охин минь, энэ бол С хэсэг.

<div class = "tabbable tab-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Үндсэн навигац

Эхлэхийн тулд navbars нь хөдөлгөөнгүй (дээд талд нь тогтоогдоогүй) бөгөөд төслийн нэр болон үндсэн навигацийн дэмжлэгийг агуулдаг. .containerТаны сайт болон агуулгын өргөнийг тохируулдаг -ын дотор аль нэг газар байрлуул .

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Гарчиг </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Нүүр хуудас </a></li>  
      <li><a href = "#" > Холбоос </a></li> 
      <li><a href = "#" > Холбоос </a></li> 
    </ul>
  </div>
</div>

Navbar бүрэлдэхүүн хэсгүүд

Брэнд

Таны брэнд эсвэл төслийн нэрийг харуулах энгийн холбоос нь зөвхөн зангуу шошгыг шаарддаг.

<a class = "brand" href = "#" > Төслийн нэр </a>

Navigation холбоосууд

Nav-ын зүйлсийг эрэмблэгдээгүй жагсаалтаар нэмэхэд хялбар байдаг.

<ul class = "nav" > 
  <li анги = "идэвхтэй" > 
    <a href = "#" > Нүүр хуудас </a> 
  </li>
  <li><a href = "#" > Холбоос </a></li> 
  <li><a href = "#" > Холбоос </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li анги = "хуваагч-босоо" ></li> 
  ...
</ul>

Маягтууд

Navbar дотор маягтыг зөв загварчилж, байрлуулахын тулд доор үзүүлсэн шиг тохирох ангиудыг нэмнэ үү. Өгөгдмөл маягтын хувьд зөв зэрэгцүүлэхийн тулд эсвэл .navbar-formаль нэгийг нь оруулна уу..pull-left.pull-right

<form class = "navbar-form pull-left" > 
  <оролтын төрөл = "текст" анги = "span2" >  
  <button type = "submit" class = "btn" > Илгээх </button>  
</form>

Хайлтын маягт

Илүү өөрчилсөн хайлтын маягтыг харахын тулд navbar дээрх төрөлжсөн хэв маягийн оролт дээр болон дээр нэмнэ .navbar-searchүү .form.search-query

<form class = "navbar-search pull-left" > 
  <оролтын төрөл = "текст" анги = "хайлтын асуулга" орлуулагч = "Хайлт" >   
</form>

Бүрэлдэхүүн хэсгүүдийн тохируулга

Navigation холбоос, хайлтын маягт эсвэл текстийг зэрэгцүүлж, .pull-leftэсвэл .pull-rightхэрэгслийн ангиллыг ашиглана уу. Хоёр анги хоёулаа заасан чиглэлд CSS float нэмнэ.

Унтраах цэсийг ашиглах

Бага зэрэг тэмдэглэгээ болон унадаг JavaScript залгаасыг ашиглан унадаг цэс болон уналтуудыг Nav-д нэмнэ үү .

<ul class = "nav" > 
  <li анги = "унадаг" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Данс
      <b class = "caret" ></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

Унаж буй responsive navbar-г хэрэгжүүлэхийн тулд navbar контентоо div, агуулсан дотор .nav-collapse.collapseороож, navbar сэлгэх товчийг нэмнэ үү .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
 
      <!-- .btn-navbar нь навигацийн хураангуй контентын унтраалга болгон ашигладаг -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Хэрэв та харуулахыг хүсвэл брэндээ орхихоо мартуузай -->
      <a class = "brand" href = "#" > Төслийн нэр </a>  
 
      <!-- 940px буюу түүнээс бага хэмжээгээр нуухыг хүссэн бүх зүйлээ энд байрлуул -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-хайлт, .navbar-form гэх мэт -->
      </div>
 
    </div>
  </div>
</div>

Анхаар! Хариуцлагатай navbar нь задлах залгаас болон хариу үйлдэл үзүүлэх Bootstrap CSS файлыг шаарддаг .

Урвуу өөрчлөлт

Нэмэх замаар navbar-ийн харагдах байдлыг өөрчил .navbar-inverse.

<div class = "navbar navbar-урвуу" > 
  ...
</div>

Жишээ

Нэг жишээг олон хуудсан дээр харуулах боломжтой.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Нүүр хуудас </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Номын сан </a> <span class = "divider" > / </span></li>   
  <li анги = "идэвхтэй"  > Өгөгдөл </li>
</ul>

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

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

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

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

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

Хэмжээ

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

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "хуудас" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Тохируулга

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

<div class = "pagination pageization-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Пэйжер

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

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

Анхдагч байдлаар, пейжер нь холбоосыг төвлөрүүлдэг.

<ul class = "пейжер" > 
  <li><a href = "#" > Өмнөх </a></li> 
  <li><a href = "#" > Дараагийн </a></li> 
</ul>

Зэрэгцүүлсэн холбоосууд

Эсвэл та холбоос бүрийг хажуу тал руу нь зэрэгцүүлж болно:

<ul class = "пейжер" > 
  <li анги = "өмнөх" > 
    <a href = "#" > ← Хуучин </a> 
  </li>
  <li анги = "дараагийн" > 
    <a href = "#" > Шинэ → </a> 
  </li>
</ul>

Нэмэлт идэвхгүй байдал

Пэйжерийн холбоосууд нь хуудасны жагсаалтаас ерөнхий .disabledхэрэглээний ангиллыг мөн ашигладаг.

<ul class = "пейжер" > 
  <li class = "өмнөх идэвхгүй" > 
    <a href = "#" > ← Хуучин </a> 
  </li>
  ...
</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 загварын бүрэлдэхүүн хэсэг юм.

Илүү их судла

<div анги = "баатар-нэгж" > 
  <h1> Гарчиг </h1>
  <p> Тайлбар </p>
  <p>
    <a анги = "btn btn-primary btn-large" > 
      Илүү их судла
    </a>
  </p>
</div>

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

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

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

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

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

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

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

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

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.

Үйлдэл Үйлдэл
Өнгөц зургийн шошго

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.

Үйлдэл Үйлдэл
Өнгөц зургийн шошго

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

Тэмдэглэгээ

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

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

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

<ul class = "thumbnails" > 
  <li анги = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Өнгөц зургийн шошго </h3>
      <p> Өнгөц зургийн тайлбар... </p>
    </div>
  </li>
  ...
</ul>

Илүү олон жишээ

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

Өгөгдмөл сэрэмжлүүлэг

.alertАнхааруулгын үндсэн мессежийг авахын тулд дурын бичвэр болон нэмэлт хаах товчийг ороорой .

Анхааруулга! Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.

<div анги = "анхаарал" > 
  <button type = "товчлуур" анги = "хаах" data-dississ = "анхаарал" > × </button>   
  <strong> Анхааруулга! </strong> Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.
</div>

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

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

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

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

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

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

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

Сонголтууд

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

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

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

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

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

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

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

Өө гэнэтийн! Хэд хэдэн зүйлийг өөрчлөөд дахин оруулахыг оролдоно уу.

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

Амжилт

Сайн хийлээ! Та энэхүү чухал сэрэмжлүүлэг мессежийг амжилттай уншсан.

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

Мэдээлэл

Анхаар! Энэ сэрэмжлүүлэгт таны анхаарал хэрэгтэй байгаа ч энэ нь тийм ч чухал биш юм.

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

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

Үндсэн

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

<div class = "progress" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

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

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

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

Хөдөлгөөнт

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

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

Давхардсан

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

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

Сонголтууд

Нэмэлт өнгө

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

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

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

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

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

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

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

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

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

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.

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

<div class = "media" > 
  <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 = "media" > 
      ...
    </div>
  </div>
</div>

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

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

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

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.

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.

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.

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

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
 
      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

Look, I'm in a well!

<div class="well">
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!

<div class="well well-large">
  ...
</div>

Look, I'm in a well!

<div class="well well-small">
  ...
</div>

Close icon

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

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

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

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

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"

.pull-right {
  float: right;
}

.muted

Change an element's color to #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Унждаг цэсүүд

Жишээ

Тэмдэглэгээ

Сонголтууд

Цэсүүдийг зэрэгцүүлж байна

Цэсийн сонголтыг идэвхгүй болгосон

Унтраах цэсний дэд цэсүүд

Товчлуурын бүлгүүд

Жишээ

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

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

Босоо товчлуурын бүлгүүд

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

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

Унждаг товчлуурын цэсүүд

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

Бүх хэмжээтэй товчлууруудтай ажилладаг

JavaScript шаарддаг

Унтраах товчлууруудыг хуваах

Хэмжээ

Унтраах цэсүүд

Nav: таб, эм, жагсаалт

Хөнгөн өгөгдмөлүүд Ижил тэмдэглэгээ, өөр ангиуд

Үндсэн табууд

Үндсэн эмүүд

Идэвхгүй байдал

Бүрэлдэхүүн хэсгүүдийн тохируулга

Оволох боломжтой

Давхардсан цонхнууд

Давхардсан эм

Унтраах цэсүүд

Унтраах цонхтой табууд

Унтраах эмүүд

Nav жагсаалт

Navigation жагсаалтын жишээ

Хэвтээ хуваагч

Хэвлэх боломжтой

Таблетийн жишээ

Таб дотор бүдгэрэх

jQuery залгаас шаарддаг

Ямар ч чиглэлд товшилт хийх боломжтой

Доод талд байгаа табууд

Зүүн талд байгаа табууд

Баруун талд байгаа табууд

Navbar

Үндсэн навигац

Navbar бүрэлдэхүүн хэсгүүд

Брэнд

Navigation холбоосууд

Маягтууд

Хайлтын маягт

Бүрэлдэхүүн хэсгүүдийн тохируулга

Унтраах цэсийг ашиглах

Текст

Нэмэлт дэлгэцийн хувилбарууд

Дээд талд нь зассан

Доод талд нь зассан

Статик дээд навигац

Хариуцлагатай navbar

Урвуу өөрчлөлт

Талхны үйрмэг

Жишээ

Хуудсууд дамжуулан хуудаслах хоёр сонголт

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

Сонголтууд

Тахир дутуу болон идэвхтэй төлөвүүд

Хэмжээ

Тохируулга

Пэйжер

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

Зэрэгцүүлсэн холбоосууд

Нэмэлт идэвхгүй байдал

Шошго, тэмдэг

Шошго

Тэмдгүүд

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

Хэвлэлийн бүрэлдэхүүн хэсгүүд

Баатар нэгж

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

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