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

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

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

Олон товчлуурыг нэг нийлмэл бүрэлдэхүүн хэсэг болгон нэгтгэхийн тулд товчлуурын бүлгүүдийг ашиглана уу. Тэдгээрийг цуврал <a>эсвэл <button>элементүүдээр бүтээ.

Та мөн багцуудыг илүү төвөгтэй төслүүдэд <div class="btn-group">нэгтгэж болно.<div class="btn-toolbar">

Тэмдэглэгээний жишээ

HTML нь зангуу шошготой товчлуураар бүтээгдсэн стандарт товчлуурын бүлгийг хэрхэн хардаг вэ:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Мөн олон бүлэгт зориулсан хэрэгслийн самбартай:

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

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

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

JavaScript авах »

Толгойгоо өргө

Товчлуурын бүлгүүдэд зориулсан CSS нь тусдаа файлд байгаа, button-groups.less.

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

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

Тэмдэглэгээний жишээ

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

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

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

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

Тэмдэглэгээний жишээ

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

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

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

Хүчтэй суурь ангилал

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

Яагаад шахмал, эм бэлдмэл

Bootstrap дээрх таб болон эмүүд нь <ul>ижил үндсэн HTML буюу холбоосуудын жагсаалт дээр бүтээгдсэн. Зөвхөн ангитай таб эсвэл эм хооронд солино уу.

Энэ хоёр сонголт нь агуулгын дэд хэсгүүд эсвэл холбогдох агуулгын хуудас хооронд шилжихэд тохиромжтой.

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

Тогтмол <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>

Stackable Таб эсвэл шахмалыг босоо болгоно

Тэднийг хэрхэн овоолох вэ

.nav-stackedТаб болон эм нь анхдагч байдлаар хэвтээ байрлалтай байдаг тул тэдгээрийг босоо байдлаар давхарласан харагдуулахын тулд хоёрдахь ангиллыг нэмэхэд л хангалттай .

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

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

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

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

Dropdowns Нарийвчилсан навигацийн бүрэлдэхүүн хэсгүүдэд зориулагдсан

Баян цэсийг хялбар болгосон

Bootstrap таб болон эмүүдийн унадаг цэсүүд нь маш хялбар бөгөөд нэмэлт HTML болон хөнгөн jQuery залгаас шаарддаг.

Bootstrap дээр унадаг цэсийг эхлүүлэх тухай баримт бичгүүдийг уншихын тулд 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 lists Энгийн давхарласан navs бүтээх нь хажуугийн самбарт тохиромжтой

Хэрэглээний загварын навигаци

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

Бүтцийн хувьд тэдгээр нь таб болон эмтэй ижил үндсэн навигацийн хэв маяг дээр бүтээгдсэн тул ашиглах, тохируулах нь энгийн зүйл юм.

Дүрс бүхий

Нэвтрүүлгийн жагсаалтыг мөн дүрсээр тоноглоход хялбар байдаг. Ангид тохирох <i>шошгыг нэмснээр та тохируулагдсан болно.

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

Холбоосуудын жагсаалтыг аваад нэмнэ class="nav nav-list"үү:

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Жагсаалтын толгой хэсэг
  </li>
  <li анги = "идэвхтэй" > 
    <a href = "#" > Нүүр хуудас </a> 
  </li>
  <li>
    <a href = "#" > Номын сан </a> 
  </li>
  ...
</ul>

Дүрс бүхий жишээ

Үүнтэй ижил жишээ, гэхдээ <i>дүрсний шошготой.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Номын сан
    </a>
  </li>
  ...
</ul>

Tabbable nav Javascript-ээр дамжуулан табуудыг амилуулах

Юу багтсан байна

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

Тэдгээрийн хооронд шилжих нь хялбар бөгөөд зөвхөн маш бага тэмдэглэгээг өөрчлөх шаардлагатай.

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

Табуудыг чихтэй болгохын тулд .nav-tabsөөр div-г class-тай хамт боож өгнө үү .tabbable.

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

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

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

Тусгай jQuery залгаас

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

JavaScript-г аваарай →

Шууд тэмдэглэгээ

Tabbable tab-г ашиглахын тулд багцлах div, tab-ийн багц болон контентын tabbable самбарын багц шаардлагатай.

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

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

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

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>

Статик навигацийн жишээ

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

Navbar шат

Navbar нь статик эсвэл суурин дэлгэцийн хувьд сайн бүтэцтэй байхын тулд хэдхэн div-г шаарддаг.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
      ...
    </div>
  </div>
</div>

Navbar-г харах цонхны дээд талд бэхлэхийн тулд .navbar-fixed-topхамгийн гадна талын div дээр нэмнэ үү .navbar. Та өөрийн CSS дээр padding-top: 40px;өөрийн <body>.

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

Брэндийн нэр

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

<a анги = "брэнд" href = "#" >  
  Төслийн нэр
</a>

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

Хайлтын маягтууд нь ангитай navbar дотроос захиалгат хэв маягийг хүлээн авдаг .navbar-search. .pull-leftҮүнийг тохируулахын тулд эсвэл .pull-rightдээр оруулна уу form.

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

Нэмэлт хариу үйлдэл үзүүлэх хувилбар

Таны дээд самбар дахь агуулгын хэмжээнээс хамааран та хариу үйлдэл үзүүлэх сонголтуудыг хэрэгжүүлэхийг хүсч болно. Ингэхийн тулд div, агуулсан .nav-collapse.collapsenavigation контентоо боож, 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" > 
        <!-- .nav, .navbar-хайлт, .navbar-form гэх мэт -->
      </div>
 
    </div>
  </div>
</div>

Анхаар! Хариуцлагатай navbar нь задлах залгаасыг шаарддаг .

Navigation холбоосууд

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

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

Унтраах цэсүүдийг нэмж байна

Nav-т унадаг цэс нэмэх нь маш энгийн боловч манай javascript залгаасыг ашиглах шаардлагатай .

<ul class = "nav" > 
  <li анги = "унадаг" > 
    <a href = "#" 
          анги = "унтраах сэлгэх"
          data-toggle = "унадаг" >
          Данс
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

JavaScript-г аваарай →

Яагаад тэдгээрийг ашиглах вэ

Breadcrumb навигацыг хэрэглэгчдэд програм эсвэл сайт дотор хаана байгааг харуулах арга болгон ашигладаг боловч үндсэн навигацид ашигладаггүй. Хамгийн үр дүнтэй байхын тулд тэдгээрийн хэрэглээг сийрэг, товчхон байлгах хэрэгтэй.

Жишээ

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

Тэмдэглэгээ

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

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

Олон тооны хуудасны хуудаслалт

Хэзээ хэрэглэх вэ

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

Статистик хуудасны холбоосууд

Холбоосыг тохируулах боломжтой бөгөөд хэд хэдэн нөхцөлд тохирох ангиллын дагуу ажилладаг. .disabledтовших боломжгүй холбоосууд болон .activeодоогийн хуудасны хувьд.

Уян хатан тохируулга

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

Жишээ

Үндсэн хуудасны бүрэлдэхүүн хэсэг нь уян хатан бөгөөд хэд хэдэн хувилбараар ажилладаг.

Тэмдэглэгээ

Боодолтой <div>, хуудаснууд нь зүгээр л нэг <ul>.

<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 = "#" > Дараагийн </a></li> 
  </ul>
</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>

Шошго	Тэмдэглэгээ
Өгөгдмөл	`<span class="label">Default</span>`
Шинэ	`<span class="label label-success">New</span>`
Анхааруулга	`<span class="label label-warning">Warning</span>`
Чухал	`<span class="label label-important">Important</span>`
Мэдээлэл	`<span class="label label-info">Info</span>`

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

Анхдагч байдлаар, 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.

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

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

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

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

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

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

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

Тэмдэглэгээ

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

<ul class = "thumbnails" > 
  <li анги = "span3" > 
    <a href = "#" анги = "өнгөц зураг" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "thumbnails" > 
  <li анги = "span3" > 
    <div class = "thumbnail" > 
      <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 залгаастай ирдэг бөгөөд тэдгээрийг хурдан бөгөөд хялбархан халдаг.

Plugin авах »

Жишээ сэрэмжлүүлэг

Мессеж болон нэмэлт хаах дүрсийг энгийн ангитай div-д боож өгнө үү.

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

<div анги = "анхаарал" > 
  <a class = "close" > × </a> 
  <strong> Анхааруулга! </strong> Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.
</div>

.alert-blockСтандарт сэрэмжлүүлгийн мессежийг нэмэлт дүүргэлт, текстийн удирдлага, .alert-headingтохирох гарчигт гэсэн хоёр нэмэлт ангиар хялбархан сунгана уу .

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

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

<div class = "alert alert-block" > 
  <a class = "close" > × </a> 
  <h4 class = "alert-heading" > Анхааруулга! </h4> 
  Өөрийгөө шалгасан нь дээр, чи...
</div>

Контекст хувилбарууд Анхааруулгын утгыг өөрчлөхийн тулд нэмэлт анги нэмнэ

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

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

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

Амжилт

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

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

Мэдээлэл

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

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

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

Үндсэн

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

<div class = "progress" > 
  <div анги = "бар" 
       style = " өргөн : 60 %; " ></div> 
</div>

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

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

<div class = "хөгжлийн явц-мэдээлэл 
     дэвшил судалтай" >
  <div анги = "бар" 
       style = " өргөн : 20 %; " ></div> 
</div>

Хөдөлгөөнт

Судалчлагдсан жишээг авч, хөдөлгөөнтэй болгодог.

<div class = "хөгжил дэвшил-аюул 
     дэвшилтэт судалтай идэвхтэй" >
  <div анги = "бар" 
       style = " өргөн : 40 %; " ></div> 
</div>

Сонголтууд болон хөтчийн дэмжлэг

Нэмэлт өнгө

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

.progress-info
.progress-success
.progress-danger

Эсвэл та БАГА файлуудыг тохируулж, өөрийн өнгө, хэмжээгээр эргүүлэх боломжтой.

Зан төлөв

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

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

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

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

Opera одоогоор хөдөлгөөнт дүрсийг дэмждэггүй.

Худаг

Худагийг элемент дээр энгийн эффект болгон ашиглан оруулгад оруулаарай.

Хараач, би худагт байна!

<div class = "худаг" > 
  ...
</div>

Тэмдгүүд

Уншаагүй тоо эсвэл энгийн үзүүлэлт болгон элемент дээр тэмдэг ашиглана уу.

<span class = "badge" > 3 </div>

Хаах дүрс

Модал болон сэрэмжлүүлэг зэрэг контентыг хаахын тулд ерөнхий хаах дүрс тэмдгийг ашиглана уу.

<a анги = "хаах" > × </a>

Товчлуурын бүлгүүд Нэгдэх товчлуурууд нь илүү олон хэрэгслийн мөртэй төстэй үйл ажиллагаа юм

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

Тэмдэглэгээний жишээ

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

Толгойгоо өргө

Товчлуурын унадаг цэс Товчлуурын бүлгүүд дээр бүтээгдсэн контекст унадаг цэсүүд

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

Тэмдэглэгээний жишээ

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

Тэмдэглэгээний жишээ

Nav, таб, эм. Маш сайн тохируулж болох жагсаалт маягийн навигаци

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

Хүчтэй суурь ангилал

Яагаад шахмал, эм бэлдмэл

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

Үндсэн эмүүд

Stackable Таб эсвэл шахмалыг босоо болгоно

Тэднийг хэрхэн овоолох вэ

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

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

Dropdowns Нарийвчилсан навигацийн бүрэлдэхүүн хэсгүүдэд зориулагдсан

Баян цэсийг хялбар болгосон

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

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

Nav lists Энгийн давхарласан navs бүтээх нь хажуугийн самбарт тохиромжтой

Хэрэглээний загварын навигаци

Дүрс бүхий

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

Дүрс бүхий жишээ

Tabbable nav Javascript-ээр дамжуулан табуудыг амилуулах

Юу багтсан байна

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

Тусгай jQuery залгаас

Шууд тэмдэглэгээ

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

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

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

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

Navbar

Статик навигацийн жишээ

Navbar шат

Брэндийн нэр

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

Нэмэлт хариу үйлдэл үзүүлэх хувилбар

Navigation холбоосууд

Унтраах цэсүүдийг нэмж байна

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

Яагаад тэдгээрийг ашиглах вэ

Жишээ

Тэмдэглэгээ

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

Олон тооны хуудасны хуудаслалт

Хэзээ хэрэглэх вэ

Статистик хуудасны холбоосууд

Уян хатан тохируулга

Жишээ

Тэмдэглэгээ

Пэйжер Өмнөх болон дараагийн холбоосыг хурдан авах боломжтой

Пейжерийн тухай

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

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

Inline хаягууд Текстийг тэмдэглэж, тэмдэглэнэ

Өнгөц зураг Зураг, видео, текст болон бусад зүйлсийн сүлжээ

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

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

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

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

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

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

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

Тэмдэглэгээ

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

Амжилт, анхааруулга , алдааны мэдэгдлийн дохионы загварууд

Хөнгөн жингийн өгөгдмөл

Дахин бичсэн үндсэн анги

Ганц анхааруулах мессеж

Javascript-тэй маш сайн ажилладаг

Жишээ сэрэмжлүүлэг

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

Контекст хувилбарууд Анхааруулгын утгыг өөрчлөхийн тулд нэмэлт анги нэмнэ