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

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

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

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

Шилдэг туршлагууд

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

Нэг товчлуурын бүлэгт ижил элементийг үргэлж ашиглаарай, <a>эсвэл <button>.
Нэг товчлуурын бүлэгт өөр өөр өнгийн товчлууруудыг хольж болохгүй.
Текстээс гадна эсвэл оронд нь дүрсийг ашиглах боловч тохиромжтой тохиолдолд alt болон гарчгийн текстийг оруулахаа мартуузай.

Унждаг товчлууртай холбоотой товчлуурын бүлгүүдийг (доороос харна уу) тусад нь дуудах ёстой бөгөөд зориулалтын зан төлөвийг харуулахын тулд унадаг тэмдэглэгээг үргэлж оруулах ёстой.

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

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

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

Хэрэгслийн самбарын жишээ

Илүү төвөгтэй бүрэлдэхүүн хэсгүүдийн хувьд багцуудыг <div class="btn-group">a болгон нэгтгэнэ .<div class="btn-toolbar">

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

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

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

JavaScript авах »

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

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

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

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

Дурын товчлуурыг ашиглан доош унадаг цэсийг 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>

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

Унтраах товчлуурууд ямар ч хэмжээтэй ажилладаг. таны товчлуурын хэмжээ .btn-large, .btn-small, эсвэл .btn-mini.

JavaScript шаарддаг

Унтраах товчлуурууд нь ажиллахын тулд Bootstrap унадаг залгаасыг шаарддаг .

Зарим тохиолдолд гар утас гэх мэт унадаг цэсүүд харах цонхны гадна талд гарч ирдэг. Та гар аргаар эсвэл захиалгат JavaScript ашиглан зэрэгцүүлэлтийг шийдэх хэрэгтэй.

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

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

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

Хэмжээ

Хэмжээ тогтоохын тулд нэмэлт товчлуурын ангилал .btn-mini, .btn-small, эсвэл ашиглана уу .btn-large.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- унадаг цэсний холбоосууд -->
  </ul>
</div>

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

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

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

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

Унждаг цэсийг мөн -ийн шууд эцэг эхэд нэг анги нэмснээр доороос дээш сольж болно .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.

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

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

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

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

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

Тогтмол <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 жагсаалтууд нь нэмэлт толгойн тусламжтайгаар навигацийн холбоосын бүлгүүдийг үүсгэх энгийн бөгөөд хялбар аргыг өгдөг. Тэдгээрийг OS X дээрх Finder гэх мэт хажуугийн самбарт хамгийн сайн ашигладаг.

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

Дүрс бүхий

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

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

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

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

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 active" 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

Харах цонхны дээд эсвэл доод хэсэгт байрлах навигацийн самбарыг хамгийн гадна талын div дээр нэмэлт ангиллаар засаарай .navbar.

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

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

Navbar-г наахдаа доор нь нуугдсан хэсгийг анхаарч үзэхээ мартуузай. 40px буюу түүнээс дээш хэмжээг нэмэх<body> . Үүнийг үндсэн Bootstrap CSS-ийн дараа болон нэмэлт хариу үйлдэл үзүүлэх CSS-ийн өмнө нэмэхээ мартуузай.

Брэндийн нэр

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

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

Navbar дахь маягтууд

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

<form class = "navbar-form pull-left" > 
  <оролтын төрөл = "текст" анги = "span2" >  
</form>

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

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

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

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

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

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

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

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

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

Javascript → авна уу

Navbar дээрх текст

Текстийн мөрүүдийг шошгонд боож <p>, зөв хөтлөх, өнгө оруулах.

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

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

Жишээ

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

Тэмдэглэгээ

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

<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-ээс санаа авсан хэт энгийн бөгөөд хамгийн бага хэв маягтай хуудаснууд нь програмууд болон хайлтын илэрцүүдэд тохиромжтой. Том блок нь алдахад хэцүү, хялбархан өргөжүүлэх боломжтой бөгөөд том товшилтын хэсгүүдийг өгдөг.

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

Холбоосыг тохируулах боломжтой бөгөөд хэд хэдэн нөхцөлд тохирох ангиллын дагуу ажилладаг. .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>

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

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

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

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

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

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

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

<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">Success</span>`
Анхааруулга	`<span class="label label-warning">Warning</span>`
Чухал	`<span class="label label-important">Important</span>`
Мэдээлэл	`<span class="label label-info">Info</span>`
Урвуу	`<span class="label label-inverse">Inverse</span>`

тухай

Тэмдгүүд нь ямар нэгэн үзүүлэлт эсвэл тоолоход зориулагдсан жижиг, энгийн бүрэлдэхүүн хэсгүүд юм. Тэдгээрийг ихэвчлэн Mail.app гэх мэт имэйл үйлчлүүлэгчид эсвэл түлхэх мэдэгдлийн мобайл апп-уудаас олдог.

Боломжтой ангиуд

Нэр	Жишээ	Тэмдэглэгээ
Өгөгдмөл	1	`<span class="badge">1</span>`
Амжилт	2	`<span class="badge badge-success">2</span>`
Анхааруулга	4	`<span class="badge badge-warning">4</span>`
Алдаа	6	`<span class="badge badge-error">6</span>`
Мэдээлэл	8	`<span class="badge badge-info">8</span>`
Урвуу	10	`<span class="badge badge-inverse">10</span>`

Баатар нэгж

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

Тэмдэглэгээ

Өөрийн агуулгыг дараах байдлаар боож өгнө divүү:

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

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

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

Илүү их судла

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

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

<div class = "page-header" > 
  <h1> Жишээ хуудасны толгой хэсэг </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.

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

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

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

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

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

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

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

Тэмдэглэгээ

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

<ul class = "thumbnails" > 
  <li анги = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <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" data-dississ = "alert" > × </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" data-dississ = "alert" > × </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>

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

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

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

Хөдөлгөөнт

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

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

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

Нэмэлт өнгө

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

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

Хатуу өнгөнүүдтэй адил бид янз бүрийн судалтай дэвшилтэт баартай.

Зан төлөв

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

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

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

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

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

Худаг

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

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

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

Хаах дүрс

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

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

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

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

Шилдэг туршлагууд

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

Хэрэгслийн самбарын жишээ

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

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

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

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

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

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

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

JavaScript шаарддаг

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

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

Хэмжээ

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

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

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

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

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

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

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

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

Үндсэн эмүүд

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

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

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

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

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

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

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

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

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

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

Дүрс бүхий

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

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

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

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

Юу багтсан

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

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

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

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

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

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

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

Navbar

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

Navbar шат

Тогтмол navbar

Брэндийн нэр

Navbar дахь маягтууд

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

Navigation холбоосууд

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

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

Navbar дээрх текст

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

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

Жишээ

Тэмдэглэгээ

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

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

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

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

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

Жишээ

Тэмдэглэгээ

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

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

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

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

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

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

Тэмдгийн үзүүлэлтүүд болон уншаагүй тоо

тухай

Боломжтой ангиуд

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