Мисал

Шилтемелердин тизмесин көрсөтүү үчүн которулуучу, контексттик меню. ачылуучу 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 класс = "ашылма" > 
  <!-- Шилтеме же ачылуучу тизмени которуштуруу үчүн баскыч -->
  <ul класс = "ашылуучу меню" ролу = "меню" 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 = "ашылуучу менюну оңго тартуу" ролу = "меню" aria-labelledby = "dLabel" >   
  ...
</ul>

Өчүрүлгөн меню параметрлери

Шилтемени өчүрүү үчүн ачылуучу тизмеге .disabledкошуңуз .<li>

<ul class = "dropdown-меню" ролу = "меню" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Кадимки шилтеме </a></li>  
  <li class = "diabled" ><a tabindex = "-1" href = "#" > Өчүрүлгөн шилтеме </a></li>   
  <li><a tabindex = "-1" href = "#" > Башка шилтеме </a></li>  
</ul>

Ашылма менюлар

Жөнөкөй белгилөө толуктоолору менен OS X сыяктуу курсордо пайда болгон ачылуучу менюлардын кошумча деңгээлин кошуңуз. Автоматтык стилдештирүү үчүн учурдагы ачылуучу менюнун .dropdown-submenuкаалаганына кошуңуз .li

Демейки

Dropup

Сол субменю

<ul класс = "ашылуучу меню" ролу = "меню" aria-labelledby = "dLabel" >   
  ...
  <li класс = "ашылуучу-субменю" > 
    <a tabindex = "-1" href = "#" > Дагы параметрлер </a>  
    <ul class = "ылдый түшүүчү ме��ю" > 
      ...
    </ul>
  </li>
</ul>

Мисалдар

Эки негизги варианттары менен бирге дагы эки конкреттүү вариациялар.

Жалгыз баскыч тобу

менен бир катар баскычтарды ороп .btnалыңыз .btn-group.

<div класс = "btn-group" > 
  <button class = "btn" > Сол </button> 
  <button class = "btn" > Орто </button> 
  <button class = "btn" > Оң </button> 
</div>

Бир нече баскыч топтору

<div class="btn-group">А <div class="btn-toolbar">комплекстерин татаалыраак компоненттер үчүн бириктириңиз .

<div класс = "btn-куралдар тилкеси" > 
  <div класс = "btn-group" > 
    ...
  </div>
</div>

Вертикалдуу баскыч топтору

Баскычтар топтомун горизонталдуу эмес, тигинен тизилгендей кылып көрсөтүңүз.

<div класс = "btn-group btn-group-vertical" > 
  ...
</div>

Белгилөө кутучасы жана радио даамдары

Баскыч топтору бир гана баскыч активдүү болушу мүмкүн болгон радиолор же каалаган сандагы баскычтар активдүү болушу мүмкүн болгон белгилөө кутучалары катары да иштеши мүмкүн. Бул үчүн JavaScript документтерин көрүңүз .

Баскыч топторундагы ылдый түшүүлөр

Көңүл бургула!Туура рендеринг үчүн ачылуучу баскычтары .btn-groupбар баскычтар өз алдынча оролушу керек ..btn-toolbar

Обзор жана мисалдар

Каалаган баскычты колдонуп, ылдый түшүүчү менюну а ичине жайгаштырып, .btn-groupменюнун туура белгилөөсүн камсыз кылыңыз.

<div класс = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Акция
    <span class = "caret" ></span> 
  </a>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Бардык баскычтардын өлчөмдөрү менен иштейт

Ачкыч баскычтары каалаган өлчөмдө иштейт: .btn-large, .btn-small, же .btn-mini.

JavaScript талап кылынат

Ачкыч баскычтары иштеши үчүн Bootstrap ачылуучу плагинди талап кылат .

Кээ бир учурларда, мисалы, мобилдик ылдый түшүүчү менюлар көрүү терезесинин сыртында кеңейтилет. Тегиздөөнү кол менен же ыңгайлаштырылган JavaScript менен чечишиңиз керек.

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Баскыч тобунун стилдерине жана белгилөөсүнө таянып, биз оңой эле бөлүү баскычын түзө алабыз. Бөлүнүүчү баскычтар сол жактагы стандарттуу аракетти жана оң жакта контексттик шилтемелер менен ылдый түшүүчү баскычты камтыйт.

<div класс = "btn-group" > 
  <button class = "btn" > Аракет </button> 
  <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Өлчөмдөрү

Кошумча баскыч класстарын .btn-mini, .btn-small, же .btn-largeөлчөм үчүн колдонуңуз.

<div класс = "btn-group" > 
  <button class = "btn btn-mini" > Аракет </button> 
  <баскыч класс = "btn btn-mini ачылуучу-которуу" маалымат-которуу = "ашылма" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Ашылма менюлар

Ашылма менюларды ылдыйдан өйдөгө которуштурууга болот .dropdown-menu. .caretАл жогорудан ылдый эмес, ылдыйдан өйдө жылдыруу үчүн менюнун багытын буруп, ордун өзгөртөт.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </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 үчүн кошуңуз жана эч кандай hover эффекттери жок . Бирок, атрибутту алып салмайынча, шилтемелер чыкылдала берет . Же болбосо, ошол чыкылдатуунун алдын алуу үчүн ыңгайлаштырылган JavaScriptти ишке ашырсаңыз болот.href

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Башкы </a></li>  
  ...
</ul>

Компонентти тегиздөө

Навигация шилтемелерин тегиздөө үчүн .pull-leftже .pull-rightпайдалуу класстарды колдонуңуз. Эки класс тең көрсөтүлгөн багытта CSS флоатын кошот.

Stackable

Таблеткалар жана таблеткалар демейки боюнча горизонталдуу .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 = "ылдый түшүүчү меню" > 
      <!-- шилтемелер -->
    </ul>
  </li>
</ul>

Таблеткалар ылдый түшүүчү

<ul class = "nav nav-pills" > 
  <li класс = "ашылма" > 
    <a класс = "ашылма-которуу" 
       data-toggle = "ашылма"
       href = "#" >
        Ашылма
        <b class = "caret" ></b> 
      </a>
    <ul class = "ылдый түшүүчү меню" > 
      <!-- шилтемелер -->
    </ul>
  </li>
</ul>

Nav тизмелери

Кошумча аталыштар менен навигация шилтемелеринин топторун куруунун жөнөкөй жана оңой жолу. Алар OS Xдеги Finder сыяктуу каптал тилкелерде эң жакшы колдонулат.

Мисал навигация тизмеси

Шилтемелердин тизмесин алып, кошуңуз 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>

ЭскертүүНавигация тизмесине уя салуу үчүн class="nav nav-list"каалаган уячага кошуңуз <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 class = "active" ><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 класс = "таб-панел активдүү" id = "tab1" >  
      <p> Мен 1-бөлүмдөмүн. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Саламатсызбы, мен 2-бөлүмдө турам. </p>
    </div>
  </div>
</div>

Өтмөктө өчүп калуу

Өтмөктөрдү өчүрүү үчүн, .fadeар бирине кошуңуз .tab-pane.

jQuery плагинин талап кылат

Бардык өтмөктөр биздин жеңил jQuery плагини менен иштейт. JavaScript docs бетинен өтмөктөрдү кантип жандантуу керектиги жөнүндө көбүрөөк оку .

Каалаган багытта таблет

Төмөндөгү өтмөктөр

HTML тартибин которуп, ылдый жагына өтмөктөрдү коюу үчүн класс кошуңуз.

Мен А секциясындамын.

Саламатсыздарбы, мен В секциясындамын.

Эмне болду кыз, бул С бөлүмү.

<div class = "табббол өтмөктөрү-төмөндө" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Сол жактагы өтмөктөр

Сол жактагы өтмөктөрдү коюу үчүн классты алмаштырыңыз.

Мен А секциясындамын.

Саламатсыздарбы, мен В секциясындамын.

Эмне болду кыз, бул С бөлүмү.

<div class = "tabbable өтмөктөрү-сол" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Оң жактагы өтмөктөр

Оң жактагы өтмөктөрдү коюу үчүн классты алмаштырыңыз.

Мен А секциясындамын.

Саламатсыздарбы, м��н В секциясындамын.

Эмне болду кыз, бул С бөлүмү.

<div class = "tabbable өтмөктөрү-оңго" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Негизги Navbar

Баштоо үчүн, навигация тилкелери статикалык (жогорку жагына бекитилген эмес) жана долбоордун аталышын жана негизги навигацияны колдоону камтыйт. .containerСайтыңыздын жана мазмунуңуздун туурасын белгилеген a ичинде каалаган жерге коюңуз .

<div класс = "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>

Nav шилтемелер

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-formже бири-бирин кошуңуз..pull-left.pull-right

<форма класс = "navbar-формасы тартуу-сол" > 
  <киргизүү түрү = "текст" класс = "span2" >  
  <баскыч түрү = "тапшыруу" класс = "btn" > Тапшыруу   </button>
</form>

Издөө формасы

Көбүрөөк ыңгайлаштырылган издөө формасы үчүн, навигация тилкесинде адистештирилген стилдер үчүн киргизүүгө .navbar-searchжана formкошуңуз ..search-query

<форма класс = "navbar-издөө солго тартуу" > 
  <киргизүү түрү = "текст" класс = "издөө-суроо" толтургуч = "Издөө" >   
</form>

Компонентти тегиздөө

Навигация шилтемелерин, издөө формасын же текстти тегиздеңиз, .pull-leftже .pull-rightпайдалуу класстарды колдонуңуз. Эки класс тең көрсөтүлгөн багытта CSS флоатын кошот.

Ашылмаларды колдонуу

Бир аз белгилөө жана ачылуучу ылдыйкы JavaScript плагини менен навигацияга ачылуучу жана ачылуучу ылдыйкыларды кошуңуз .

<ul class = "nav" > 
  <li класс = "ашылма" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Каттоо эсеби
      <b class = "caret" ></b> 
    </a>
    <ul class = "ылдый түшүүчү меню" > 
      ...
    </ul>
  </li>
</ul>

Көбүрөөк белгилөө жана чалуулар боюнча маалымат алуу үчүн JavaScript ачылуучу ылдыйкы документациясына баш багыңыз .

Текст

Тексттин саптарын элементке ороп алыңыз .navbar-text, адатта <p>туура жетектөө жана түс үчүн тегге.

Кошумча дисплей вариациялары

Чабыт тилкесин көрүү терезесинин үстүнкү же ылдый жагындагы эң четки div боюнча кошумча класс менен бекитиңиз, .navbar.

Үстүнө бекитилди

Кошуңуз .navbar-fixed-topжана анын астындагы жашыруун аймакты эсепке алууну унутпаңыз 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 класс = "navbar navbar-static-top" > 
  ...
</div>

Жооптуу навигация

Жыйырылган жооп берүүчү навигация тилкесин ишке ашыруу үчүн, навигация тилкеңиздин мазмунун камтыган div менен ороп .nav-collapse.collapse, жана навигация тилкесин которуу баскычын кошуңуз .btn-navbar.

<div класс = "navbar" > 
  <div class = "navbar-inner" > 
    <div класс = "контейнер" > 
 
      <!-- .btn-navbar жыйылган навигация мазмуну үчүн которгуч катары колдонулат -->
      <a класс = "btn btn-navbar" data-toggle = "кыйратуу" 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-форма, ж.б. -->
      </div>
 
    </div>
  </div>
</div>

Көңүл бургула! Жооптуу навигация кыйратуучу плагинди жана жооп берүүчү Bootstrap CSS файлын талап кылат .

Инверттелген вариация

кошуу менен навигация панелинин көрүнүшүн өзгөртүңүз .navbar-inverse.

<div класс = "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 класс = "беттөө" > 
  <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 класс = "беттөө" > 
  <ul>
    <li класс = "өчүрүлгөн" ><a href = "#" > « </a></li>  
    <li класс = "активдүү" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Сиз каалаган стилдерди сактап, чыкылдатуу функциясын алып салуу үчүн жигердүү же өчүрүлгөн анкерлерди аралыктарга алмаштыра аласыз.

<div класс = "беттөө" > 
  <ul>
    <li класс = "өчүрүлгөн" ><span> « </span></li> 
    <li класс = "активдүү" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Өлчөмдөрү

Чоңураак же кичирээк беттештирүүнү каалайсызбы? Кошумча өлчөмдөр үчүн .pagination-large, .pagination-small, же кошуңуз ..pagination-mini

<div class = "pageation pagination-lorge" > 
  <ul>
    ...
  </ul>
</div>
<div класс = "беттөө" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div класс = "баракчаларды пагинациялоо-мини" > 
  <ul>
    ...
  </ul>
</div>

Тегиздөө

Барактоо шилтемелеринин тегиздөөсүн өзгөртүү үчүн эки кошумча класстын бирин кошуңуз: .pagination-centeredжана .pagination-right.

<div класс = "баракчаларды барактоо борборлоштурулган" > 
  ...
</div>

<div класс = "баракчаларды беттөө-оң" > 
  ...
</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 класс = "мурунку өчүрүлгөн" > 
    <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>`

Оңой жыгылат

Жөнөкөй ишке ашыруу үчүн энбелгилер жана бейджиктер (CSS'тин :emptyселектору аркылуу) ичинде эч кандай мазмун жок болгондо жөн эле кулап калат.

Баатыр бирдиги

Сайтыңыздагы негизги мазмунду көрсөтүү үчүн жеңил, ийкемдүү компонент. Бул маркетинг жана мазмуну оор сайттарда жакшы иштейт.

Салам дүйнө!

Бул жөнөкөй баатыр бирдиги, өзгөчөлөнгөн мазмунга же маалыматка кошумча көңүл буруу үчүн жөнөкөй jumbotron стилиндеги компонент.

Көбүрөөк билүү

<div класс = "баатыр-бирдик" > 
  <h1> рубрика </h1>
  <p> Теги </p>
  <p>
    < а класс = "btn btn-primary btn-large" > 
      Көбүрөөк билүү
    </a>
  </p>
</div>

Барактын аталышы

h1Барактагы мазмундун бөлүктөрүн туура бөлүштүрүү жана бөлүү үчүн жөнөкөй кабык . h1Ал демейки small, элементин жана башка көптөгөн компоненттерди (кошумча стилдер менен) колдоно алат .

<div class = "page-header" > 
  <h1> Үлгү беттин аталышы <кичинекей> Баш аты үчүн субтекст </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-gridv1.4 чейин) сүрөттөр же видеолор торчолору, сүрөт издөө натыйжалары, чекене өнүмдөр, портфолио жана башка көптөгөн нерселер үчүн эң сонун. Алар шилтемелер же статикалык мазмун болушу мүмкүн.

Жөнөкөй, ийкемдүү белгилөө

Эскизди белгилөө жөнөкөй — ulкаалаган сандагы liэлементтер менен гана талап кылынат. Ал ошондой эле өтө ийкемдүү, мазмунуңузду ороп коюу үчүн бир аз көбүрөөк белгилөө менен мазмундун каалаган түрүнө мүмкүнчүлүк берет.

Тор мамычасынын өлчөмдөрүн колдонот

.span2Акырында, эскиздер компоненти же сыяктуу учурдагы тор системасынын класстарын колдонот.span3Акырында, эскиздер компоненти эскиз өлчөмдөрүн көзөмөлдөө

Белгилөө

Мурда айтылгандай, эскиздер үчүн талап кылынган белги жеңил жана жөнөкөй. Шилтемеленген сүрөттөр үчүн демейки жөндөөнү карап көрүңүз :

<ul class = "эскиз сүрөттөр" > 
  <li класс = "span4" > 
    <a href = "#" класс = "эскиз" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Эскиздеги ыңгайлаштырылган HTML мазмуну үчүн белгилөө бир аз өзгөрөт. Блок деңгээлиндеги мазмунга каалаган жерде уруксат берүү үчүн, биз окшошту <a>алмаштырабыз <div>:

<ul class = "эскиз сүрөттөр" > 
  <li класс = "span4" > 
    <div класс = "эскиз" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Эскиз энбелгиси </h3>
      <p> Эскиздин коштомо жазуусу... </p>
    </div>
  </li>
  ...
</ul>

Дагы мисалдар

Сизге жеткиликтүү болгон ар кандай тор класстары менен бардык варианттарыңызды изилдеңиз. Ошондой эле ар кандай өлчөмдөрдү аралаштырып, дал келтире аласыз.

Демейки эскертүү

.alertНегизги эскертүү билдирүүсү үчүн каалаган текстти жана кошумча четке кагуу баскычын ороп алыңыз .

Эскертүү! Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң.

<div класс = "эскертүү" > 
  <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "эскертүү" > × </button>   
  <strong> Эскертүү! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз.
</div>

Баш тартуу баскычтары

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

<a href = "#"   class = "жабуу" data-dississ = "alert" > × </a>

Же болбосо, <button>маалымат атрибуту бар элементти колдонсоңуз болот, аны биз документтерибиз үчүн тандап алганбыз. Колдонуп жатканда <button>, сиз камтышыңыз керек, type="button"болбосо формаларыңыз тапшырбашы мүмкүн.

<баскыч түрү = "баскыч" класс  = "жабуу" маалымат-башкаруу = "эскертүү" > × </button>

JavaScript аркылуу эскертүүлөрдү четке кагуу

Эскертүүлөрдү тез жана оңой алып салуу үчүн alerts jQuery плагинин колдонуңуз .

Параметрлер

Узунураак билдирүүлөр үчүн эскертме ораманын үстүнкү жана астындагы толтурууну кошуу менен көбөйтүңүз .alert-block.

Эскертүү!

Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң. Nulla vitae elit libero, pharetra augue. Кошумча commodo cursus magna, vel scelerisque nisl consectetur et.

<div  класс = "эскертүүчү эскертүү-блок" >
  <баскыч түрү = "баскычы" класс = "жабуу" маалымат-башкаруу =   "эскертүү" > × </button>
  <h4> Эскертүү! </h4>
  Өзүңдү текшерип көр, сен андай эмессиң...
</div>

Контексттик альтернативалар

Эскертүүнүн коннотациясын өзгөртүү үчүн кошумча класстарды кошуңуз.

Ката же коркунуч

О, шак! Бир нече нерсени өзгөртүп, кайра тапшырып көрүңүз.

<div класс = "эсгертме-ката" > 
  ...
</div>

Ийгилик

Мыкты жасалды! Сиз бул маанилүү эскертүү билдирүүсүн ийгиликтүү окудуңуз.

<div класс = "эскертүүчү эскертүү-ийгилик" > 
  ...
</div>

Маалымат

Көңүл бургула! Бул эскертүүгө көңүл буруңуз, бирок бул өтө маанилүү эмес.

<div класс = "эскертүүчү эскертүү маалыматы" > 
  ...
</div>

Мисалдар жана белгилөө

Негизги

Вертикалдуу градиент менен демейки прогресс тилкеси.

<div класс = "прогресс" > 
  <div class = "bar" style = " туурасы : 60 %; " ></div>   
</div>

Striped

Чаардуу эффект түзүү үчүн градиент колдонот. IE7-8де жеткиликтүү эмес.

<div класс = "прогресс-сызык" > 
  <div class = "bar" style = " туурасы : 20 %; " ></div>   
</div>

Анимацияланган

Оңдон солго сызыктарды жандандыруу үчүн .activeкошуу . .progress-stripedIE бардык версияларында жеткиликтүү эмес.

<div класс = "прогресс прогресс-сызык активдүү" > 
  <div class = "bar" style = " туурасы : 40 %; " ></div>   
</div>

Үйүлгөн

.progressАларды тизүү үчүн бир нече тилкеге салыңыз.

<div класс = "прогресс" > 
  <div class = "бар-ийгилик" style = " туурасы : 35 %; " ></div>   
  <div class = "бар-эскертүү" style = " туурасы : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " туурасы : 10 %; " ></div>   
</div>

Параметрлер

Кошумча түстөр

Прогресс тилкелери бирдей баскычтардын айрымдарын жана ырааттуу стилдер үчүн эскертүү класстарын колдонот.

<div класс = "прогресс маалыматы" > 
  <div class = "bar" style = " туурасы : 20 % " ></div>   
</div>
<div класс = "прогресс прогресс-ийгилик" > 
  <div class = "bar" style = " туурасы : 40 % " ></div>   
</div>
<div class = "прогресс-эскертүү" > 
  <div class = "bar" style = " туурасы : 60 % " ></div>   
</div>
<div класс = "прогресс-коркунуч" > 
  <div class = "bar" style = " туурасы : 80 % " ></div>   
</div>

Сызык барлар

Катуу түстөр сыяктуу, бизде ар кандай сызыкча прогресс тилкелери бар.

<div класс = "прогресс прогресс-маалымат прогресс-сызык" > 
  <div class = "bar" style = " туурасы : 20 % " ></div>   
</div>
<div класс = "прогресс прогресс-ийгилик прогресс-сызык" > 
  <div class = "bar" style = " туурасы : 40 % " ></div>   
</div>
<div класс = "прогресс-эскертүү прогресс-сызык" > 
  <div class = "bar" style = " туурасы : 60 % " ></div>   
</div>
<div класс = "прогресс прогресс-коркунучтуу прогресс-сызык" > 
  <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 класс = "медиа" > 
  <a class = "pull-left" href = "#" >  
    <img класс = "медиа-объект" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Медиа аталышы </h4> 
    ...
 
    <!-- Уюшкан медиа объект -->
    <div класс = "медиа" > 
      ...
    </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.

Кыстарылган медиа аталышы
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.

Кыстарылган медиа аталышы
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.

Кыстарылган медиа аталышы
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.
Медиа аталышы
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 класс = "медиа" > 
    <a class = "pull-left" href = "#" >  
      <img класс = "медиа-объект" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Медиа аталышы </h4> 
      ...
 
      <!-- Уюшкан медиа объект -->
      <div класс = "медиа" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Кудукту элементке жөнөкөй эффект катары колдонуңуз, ага кошумча эффект берүү.

Карачы, мен кудуктун ичиндемин!

<div класс = "жакшылык" > 
  ...
</div>

Кошумча класстар

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

Карачы, мен кудуктун ичиндемин!

<div class = "жакшы жакшы чоң" > 
  ...
</div>

Карачы, мен кудуктун ичиндемин!

<div class = "жакшы-кичинекей" > 
  ...
</div>

Жабуу сөлөкөтү

Модаль жана эскертүүлөр сыяктуу мазмунду четке кагуу үчүн жалпы жабуу сөлөкөтүн колдонуңуз.

<button class = "жабуу" > × </button>

href="#"Эгер сиз анкерди колдонгуңуз келсе, iOS түзмөктөрү үчүн чыкылдатуу окуялары талап кылынат .

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

Жардамчы класстар

Чакан дисплей же жүрүм-турумду өзгөртүү үчүн жөнөкөй, багытталган класстар.

.pull-left

Элементти солго сүзүү

класс = "солго тартуу"

. солго тартуу { _
  float : left ;
}

.pull-right

Элементти оңго сүзүү

класс = "оңго тартуу"

. оңго тартуу { _
  float : right ;
}

.үнсүз

Элементтин түсүн өзгөртүү#999

класс = "үнсүз"

. үнсүз {
  түс : #999; 
}

.clearfix

floatКаалаган элементти тазалаңыз

класс = "тазалоо"

. тазалоо {
  * чоңойтуу : 1 ; 
  &: мурун ,
  &: кийин {
    дисплей : стол ;
    мазмун : "" ; 
  }
  &: кийин {
    ачык : экөө тең ;
  }
}

Ашылма менюлар

Мисал

Белгилөө

Параметрлер

Менюларды тегиздөө

Өчүрүлгөн меню параметрлери

Ашылма менюлар

Баскыч топтору

Мисалдар

Жалгыз баскыч тобу

Бир нече баскыч топтору

Вертикалдуу баскыч топтору

Белгилөө кутучасы жана радио даамдары

Баскыч топторундагы ылдый түшүүлөр

Баскыч ачылуучу менюлар

Обзор жана мисалдар

Бардык баскычтардын өлчөмдөрү менен иштейт

JavaScript талап кылынат

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Өлчөмдөрү

Ашылма менюлар

Nav: өтмөктөр, таблеткалар жана тизмелер

Жеңил демейкилер Бир эле белгилөө, башка класстар

Негизги өтмөктөр

Негизги таблеткалар

Өчүрүлгөн абал

Компонентти тегиздөө

Stackable

Үйүлгөн өтмөктөр

Топтолгон таблеткалар

Ашылма тизмелер

ылдый түшүүчү өтмөктөр

Таблеткалар ылдый түшүүчү

Nav тизмелери

Мисал навигация тизмеси

Горизонталдык бөлгүчтөр

Табула турган навигация

Табылды мисал

Өтмөктө өчүп калуу

jQuery плагинин талап кылат

Каалаган багытта таблет

Төмөндөгү өтмөктөр

Сол жактагы өтмөктөр

Оң жактагы өтмөктөр

Navbar

Негизги Navbar

Navbar компоненттери

Бренд

Nav шилтемелер

Формалар

Издөө формасы

Компонентти тегиздөө

Ашылмаларды колдонуу

Текст

Кошумча дисплей вариациялары

Үстүнө бекитилди

Түбүнө чейин бекитилген

Статикалык үстүнкү навигация тилкеси

Жооптуу навигация

Инверттелген вариация

Нан күкүмдөрү

Мисалдар

Беттештирүү Мазмун аркылуу пейджинг жүргүзүү үчүн эки вариант

Стандарттык пагинация

Параметрлер

Өчүрүлгөн жана активдүү мамлекеттер

Өлчөмдөрү

Тегиздөө

Пейжер

Демейки мисал

Тегизделген шилтемелер

Кошумча өчүрүлгөн абал

Белгилер жана значоктор

Энбелгилер

Белгилер

Оңой жыгылат

Типографиялык компоненттер

Баатыр бирдиги

Салам дүйнө!

Барактын аталышы