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

Олон товчлуурыг нэг нийлмэл бүрэлдэхүүн хэсэг болгон нэгтгэхийн тулд товчлуурын бүлгүүдийг ашиглана уу. Тэдгээрийг цуврал <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>

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

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

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

• Гэр
• Профайл
• Мессежүүд

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

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

• Гэр
• Профайл
• Мессежүүд

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

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

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

Bootstrap дээр унадаг цэсийг эхлүүлэх тухай баримт бичгүүдийг уншихын тулд Javascript хуудас руу очно уу.

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

• Гэр
• Туслаач
• Унтраах цэс
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• Гэр
• Туслаач
• Унтраах цэс
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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>

Юу багтсан

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

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

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

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

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

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

Javascript → авна уу

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

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

Баруун эсвэл зүүн зэрэгцүүлсэн табын хувьд .nav-tabsболон .tab-contentдотор нь ороорой .tabbable.

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

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

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

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

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 дээрх төрөлжсөн хэв маягийн оролт дээр болон дээр нэмнэ .navbar-searchүү .form.search-query

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

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 дээрх текст

Текстийн мөрүүдийг <.navbar-text>ихэвчлэн <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>

тухай

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

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

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

Тэмдэглэгээ

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

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

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 анги = "анхаарал" > 
  <button class = "close" data-dississ = "anert" > × </button>  
  <strong> Анхааруулга! </strong> Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.
</div>

Анхаараарай! iOS төхөөрөмжүүд href="#"нь сэрэмжлүүлгийг хаахыг шаарддаг. Үүнийг болон зангуу хаах дүрсний өгөгдлийн атрибутыг оруулахаа мартуузай. Эсвэл та <button>бидний баримт бичигт ашиглахаар сонгосон өгөгдлийн шинж чанартай элементийг ашиглаж болно. Хэрэглэхдээ <button>та оруулах ёстойtype="button" , эс тэгвээс таны маягтыг илгээхгүй байж болно.

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

<div class = "alert alert-block" > 
  <a class = "close" data-dississ = "alert" href = "#" > × </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>

Хаах дүрс

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

×

<button class = "хаах" > ​​× </button> 

Хэрэв та зангуу ашиглахыг илүүд үзвэл товшилтын үйл явдлуудын хувьд iOS төхөөрөмжид href="#" шаардлагатай.

<a class = "close" href = "#" > × </a>