Мысал

Сілтемелер тізімдерін көрсетуге арналған ауыспалы, контекстік мәзір. Ашылмалы JavaScript плагинімен интерактивті етіп жасалған .

<ul class = "ашылатын мәзір" рөлі = "мәзір" 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 class = "ашылатын мәзір" рөлі = "мәзір" 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>

Ашылмалы тізімдегі ішкі мәзірлер

Кейбір қарапайым түзетулермен OS X сияқты меңзерде пайда болатын ашылмалы мәзірлердің қосымша деңгейін қосыңыз. Автоматты сәндеу үшін бар ашылмалы мәзірдің .dropdown-submenuкез келгеніне қосыңыз .li

Әдепкі

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

Сол жақ ішкі мәзір

<ul class = "ашылатын мәзір" рөлі = "мәзір" aria-labelledby = "dLabel" >   
  ...
  <li класс = "ашылмалы-ішкі мәзір" > 
    <a tabindex = "-1" href = "#" > Қосымша опциялар </a>  
    <ul class = "ашылмалы мәзір" > 
      ...
    </ul>
  </li>
</ul>

Мысалдар

Екі негізгі нұсқа және тағы екі нақты нұсқа.

Бір түймелер тобы

Түймелердің қатарын ішіне .btnораңыз .btn-group.

<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 класс = "btn-құралдар тақтасы" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Тік түйме топтары

Түймешіктер жинағын көлденең емес, тігінен қабаттастырылған етіп көрсетіңіз.

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

Құсбелгі ұяшығы және радио дәмі

Түйме топтары тек бір түйме белсенді болуы мүмкін радио немесе түймелердің кез келген саны белсенді болуы мүмкін құсбелгілер ретінде де жұмыс істей алады. Ол үшін JavaScript құжаттарын қараңыз .

Түйме топтарындағы ашылмалы тізімдер

Ескерту!Ашылмалы тізімі бар түймелер дұрыс көрсету үшін .btn-groupa ішінде жеке оралуы керек ..btn-toolbar

Шолу және мысалдар

Ашылмалы мәзірді ашу үшін кез келген түймені пайдаланып, оны а ішіне орналастырып .btn-group, тиісті мәзір белгілеуін қамтамасыз етіңіз.

<div class = "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 class = "btn-group" > 
  <button class = "btn" > Әрекет </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ашылмалы мәзір" > 
    <!-- ашылмалы мәзір сілтемелері -->
  </ul>
</div>

Өлшемдері

Қосымша түйме сыныптарын .btn-mini, .btn-smallнемесе .btn-largeөлшемдер үшін пайдаланыңыз.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Әрекет </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "ашылатын тізім" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ашылмалы мәзір" > 
    <!-- ашылмалы мәзір сілтемелері -->
  </ul>
</div>

Ашылмалы мәзірлер

Ашылмалы мәзірлерді тікелей ата-анасына бір сыныпты қосу арқылы төменнен жоғары ауыстыруға болады .dropdown-menu. Ол .caretжоғарыдан төменге емес, төменнен жоғарыға жылжыту үшін мәзірдің бағытын аударады және оның орнын ауыстырады.

<div class = "btn-group dropup" > 
  <button class = "btn" > Ашылмалы терезе </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >  
    <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үшін қосыңыз және меңзерді жылжыту әсерлері жоқ . hrefДегенмен, атрибутты жоймайынша, сілтемелер басылатын болып қалады . Сондай-ақ, сол басулардың алдын алу үшін теңшелетін JavaScript енгізуге болады.

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

Құрамдас бөліктерді туралау

Шарлау сілтемелерін туралау үшін .pull-leftнемесе .pull-rightутилита сыныптарын пайдаланыңыз. Екі сыныпта көрсетілген бағытта CSS қалқымалы қосылады.

Жиналмалы

Қойындылар мен таблеткалар әдепкі бойынша көлденең .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>

Навигациялық тізімдер

Қосымша тақырыптары бар шарлау сілтемелерінің топтарын құрудың қарапайым және оңай жолы. Олар 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үшін әрбір қойынды үшін бірегей идентификаторды жасап, оларды ішіне ораңыз .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 құжаттары бетінде қойынды қойындыларын іске қосу жолы туралы толығырақ оқыңыз .

Кез келген бағытта кестелеуге болады

Төменгі жағындағы қойындылар

HTML тәртібін аударыңыз және төменгі жағында қойындыларды қою үшін сынып қосыңыз.

Мен А бөліміндемін.

Сәлеметсіз бе, мен В бөліміндемін.

Қызым, бұл С бөлімі.

<div class = "tabbable қойындылары-төменде" > 
  <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>

Негізгі шарлау тақтасы

Бастау үшін шарлау жолақтары статикалық (жоғарыға бекітілмеген) және жоба атауы мен негізгі шарлау үшін қолдауды қамтиды. .containerСайтыңыз бен мазмұныңыздың енін орнататын a ішінде кез келген жерге біреуін қойыңыз .

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Тақырып </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Негізгі </a></li>  
      <li><a href = "#" > Сілтеме </a></li> 
      <li><a href = "#" > Сілтеме </a></li> 
    </ul>
  </div>
</div>

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

Бренд

Бренд немесе жоба атауын көрсетуге арналған қарапайым сілтеме тек якорь тегін қажет етеді.

<a class = "brand" href = "#" > Жоба атауы </a>

Навигация сілтемелері

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-form pull-left" > 
  <енгізу түрі = «мәтін» класы = «span2» >  
  <button type = "submit" class = "btn" > Жіберу </button>  
</form>

Іздеу пішіні

Неғұрлым теңшелген іздеу пішіні үшін шарлау тақтасындағы арнайы мәнерлер үшін енгізуге .navbar-searchжәне formқосыңыз ..search-query

<form class = "navbar-іздеу-солға қарай тарту" > 
  <енгізу түрі = «мәтін» класы = «іздеу-сұрау» толтырғышы = «Іздеу» >   
</form>

Құрамдас бөліктерді туралау

Шарлау сілтемелерін, іздеу пішінін немесе мәтінді туралаңыз, .pull-leftнемесе .pull-rightутилита сыныптарын пайдаланыңыз. Екі сыныпта көрсетілген бағытта CSS қалқымалы қосылады.

Ашылмалы тізімдерді пайдалану

Аздап белгілеу және ашылмалы тізімдер JavaScript плагині бар шолғышқа ашылмалы және ашылмалы терезелерді қосыңыз .

<ul class = "nav" > 
  <li класс = "ашылмалы" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "ашылатын тізім" >   
      Есептік жазба
      <b class = "caret" ></b> 
    </a>
    <ul class = "ашылмалы мәзір" > 
      ...
    </ul>
  </li>
</ul>

Қоңырау шалу ашылмалы тізімдері туралы қосымша белгілер мен ақпарат алу үшін JavaScript ашылмалы тізімдерінің құжаттамасына кіріңіз .

Мәтін

Мәтін жолдарын элементі бар .navbar-text, әдетте <p>тиісті жетекші және түс үшін тегте ораңыз.

Қосымша дисплей нұсқалары

Шарлау тақтасын көру терезесінің жоғарғы немесе төменгі жағына ең шеткі div, қосымша сыныппен бекітіңіз .navbar.

Жоғарғы жағына бекітілген

.navbar-fixed-topОған кемінде 40 пиксель қосу арқылы оның астындағы жасырын аумақты қосыңыз және есепке paddingалуды ұмытпаңыз <body>. Мұны негізгі Bootstrap CSS-тен кейін және қосымша жауап беретін CSS-тен бұрын қосуды ұмытпаңыз.

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

Төменге дейін бекітілген

.navbar-fixed-bottomОның орнына қосыңыз .

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

Статикалық жоғарғы шарлау тақтасы

қосу арқылы бетпен бірге жылжып кететін толық ені шарлау тақтасын жасаңыз .navbar-static-top. Сыныптан айырмашылығы .navbar-fixed-top, сізге ешқандай толтырғышты өзгерту қажет емес body.

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

Жауапты шарлау тақтасы

Жауап беретін шарлау тақтасын іске қосу үшін шарлау тақтасының мазмұнын div ішіне орап, .nav-collapse.collapseшарлау тақтасының ауыстырып-қосқыш түймешігін қосыңыз, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
 
      <!-- .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 collapse" > 
        <!-- .nav, .navbar-іздеу, .navbar-форма, т.б. -->
      </div>
 
    </div>
  </div>
</div>

Ескерту! Жауапты шарлау тақтасы ыдырау плагинін және жауап беретін Bootstrap CSS файлын қажет етеді .

Төңкерілген вариация

қосу арқылы шарлау тақтасының көрінісін өзгертіңіз .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Мысалдар

Жалғыз мысал бірнеше беттерде көрсетілуі мүмкін ретінде көрсетілген.

<ul class = "нан үгіндісі" > 
  <li><a href = "#" > Басты </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Кітапхана </a> <span class = "divider" > / </span></li>   
  <li класс = "белсенді" > Деректер </li> 
</ul>

Стандартты беттеу

Rdio арқылы шабыттандырылған қарапайым беттеу, қолданбалар мен іздеу нәтижелері үшін тамаша. Үлкен блокты жіберіп алу қиын, оңай масштабталады және үлкен басу аймақтарын қамтамасыз етеді.

<div class = "беттеу" > 
  <ul>
    <li><a href = "#" > Алдыңғы </a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > Келесі </a></li> 
  </ul>
</div>

Опциялар

Өшірілген және белсенді күйлер

Сілтемелер әртүрлі жағдайлар үшін теңшеуге болады. Басылмайтын .disabledсілтемелер үшін және .activeағымдағы бетті көрсету үшін пайдаланыңыз.

<div class = "беттеу" > 
  <ul>
    <li class = "diabled" ><a href = "#" > Алдыңғы </a></li>  
    <li класс = "белсенді" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Қажетті мәнерлерді сақтай отырып, басу мүмкіндігін жою үшін белсенді немесе өшірілген якорьдерді аралықтарға ауыстыруға болады.

<div class = "беттеу" > 
  <ul>
    <li class = "diabled" ><span> Алдыңғы </span></li> 
    <li класс = "белсенді" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Өлшемдері

Үлкенірек немесе кішірек беттеуді қалайсыз ба? Қосымша өлшемдер үшін .pagination-large, .pagination-small, немесе қосыңыз ..pagination-mini

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "беттеу" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Туралау

Беттеу сілтемелерінің туралануын өзгерту үшін екі қосымша сыныптың бірін қосыңыз: .pagination-centeredжәне .pagination-right.

<div class = "беттеу беттерінде орталықтандырылған" > 
  ...
</div>

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

Пейжер

Жеңіл белгілеу мен стильдермен қарапайым беттеуді іске асыруға арналған жылдам алдыңғы және келесі сілтемелер. Бұл блогтар немесе журналдар сияқты қарапайым сайттар үшін тамаша.

Әдепкі мысал

Әдепкі бойынша, пейджер сілтемелерді ортаға салады.

<ul class = "пейджер" > 
  <li><a href = "#" > Алдыңғы </a></li> 
  <li><a href = "#" > Келесі </a></li> 
</ul>

Тураланған сілтемелер

Немесе әр сілтемені бүйірлеріне туралауға болады:

<ul class = "пейджер" > 
  <li класс = «алдыңғы» > 
    <a href = "#" > ← Үлкенірек </a> 
  </li>
  <li класс = «келесі» > 
    <a href = "#" > Жаңарақ → </a> 
  </li>
</ul>

Қосымша өшірілген күй

Пейджерлік сілтемелер беттеудегі жалпы .disabledутилита класын да пайдаланады.

<ul class = "пейджер" > 
  <li class = "бұрынғы өшірілген" > 
    <a href = "#" > ← Үлкенірек </a> 
  </li>
  ...
</ul>

Жапсырмалар

Жапсырмалар	Белгілеу
Әдепкі	`<span class="label">Default</span>`
Жетістік	`<span class="label label-success">Success</span>`
Ескерту	`<span class="label label-warning">Warning</span>`
Маңызды	`<span class="label label-important">Important</span>`
Ақпарат	`<span class="label label-info">Info</span>`
Кері	`<span class="label label-inverse">Inverse</span>`

Белгілер

Аты	Мысал	Белгілеу
Әдепкі	1	`<span class="badge">1</span>`
Жетістік	2	`<span class="badge badge-success">2</span>`
Ескерту	4	`<span class="badge badge-warning">4</span>`
Маңызды	6	`<span class="badge badge-important">6</span>`
Ақпарат	8	`<span class="badge badge-info">8</span>`
Кері	10	`<span class="badge badge-inverse">10</span>`

Оңай жиналмалы

:emptyЕшқандай мазмұн болмаған кезде , оңай іске асыру үшін белгілер мен танымбелгілер жай ғана құлап кетеді (CSS селекторы арқылы ).

Батыр бірлігі

Сайтыңыздағы негізгі мазмұнды көрсетуге арналған жеңіл, икемді компонент. Ол маркетингтік және мазмұнды сайттарда жақсы жұмыс істейді.

Сәлем Әлем!

Бұл қарапайым батыр бірлігі, таңдаулы мазмұнға немесе ақпаратқа қосымша назар аударуға арналған қарапайым джумботрон стиліндегі компонент.

Көбірек білу үшін

<div класс = "қаһарман-бірлік" > 
  <h1> Тақырып </h1>
  <p> Тақырып </p>
  <p>
    <a класс = "btn btn-primary btn-large" > 
      Көбірек білу үшін
    </a>
  </p>
</div>

Бет тақырыбы

h1Беттегі мазмұн бөлімдерін дұрыс бөлуге және сегменттеуге арналған қарапайым қабық . Ол h1әдепкі small, элементін, сондай-ақ көптеген басқа компоненттерді (қосымша мәнерлермен) пайдалана алады.

<div class = "бет тақырыбы" > 
  <h1> Бет тақырыбының мысалы <small> Тақырыпқа арналған ішкі мәтін </small></h1>
</div>

Әдепкі нобайлар

Әдепкі бойынша, Bootstrap нобайлары ең аз талап етілетін белгілеулері бар байланыстырылған кескіндерді көрсетуге арналған.

Жоғары теңшелетін

Біраз қосымша белгілеу арқылы тақырыптар, абзацтар немесе түймелер сияқты кез келген HTML мазмұнын нобайларға қосуға болады.

Нобай белгісі

Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

Әрекет Әрекет
Нобай белгісі

Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

Әрекет Әрекет
Нобай белгісі

Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

Әрекет Әрекет

Неліктен нобайларды пайдалану керек

Нобайлар (бұрын .media-gridv1.4 нұсқасына дейін) фотосуреттер немесе бейне торлары, кескін іздеу нәтижелері, бөлшек сауда өнімдері, портфолиолар және т.б. үшін тамаша. Олар сілтемелер немесе тұрақты мазмұн болуы мүмкін.

Қарапайым, икемді белгілеу

Нобайды белгілеу қарапайым — элементтердің ulкез келген саны бар a 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 type = "button" класс = "жабу" data-dississ = "ескерту" > × </button>   
  <strong> Ескерту! </strong> Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз.
</div>

Жабу түймелері

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

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

Сонымен қатар, сіз деректер төлсипаты бар элементті пайдалана аласыз <button>, оны біз құжаттарымыз үшін жасауды таңдадық. пайдалану <button>кезінде қосу керек, әйтпесе type="button"пішіндер жібермеуі мүмкін.

<button type = "button" класс = "жабу" data-dississ = "ескерту" > × </button>

JavaScript арқылы ескертулерді қабылдамаңыз

Ескертулерді жылдам және оңай өшіру үшін ескертулер jQuery плагинін пайдаланыңыз .

Опциялар

Ұзақ хабарлар үшін ескерту орауышының үстіңгі және астыңғы жағындағы толтырғышты қосу арқылы көбейтіңіз .alert-block.

Ескерту!

Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз. Nulla vitae elit libero, pharetra augue. Commodo cursus magna, немесе scelerisque nisl consectetur et.

<div class = "alert alert-block" > 
  <button type = "button" класс = "жабу" data-dississ = "ескерту" > × </button>   
  <h4> Ескерту! </h4>
  Өзіңізді тексерген дұрыс, сіз...
</div>

Мәтінмәндік баламалар

Ескертудің коннотациясын өзгерту үшін қосымша сыныптарды қосыңыз.

Қате немесе қауіп

О, шап! Бірнеше нәрсені өзгертіп, қайта жіберіп көріңіз.

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

Жетістік

Жарайсың! Сіз осы маңызды ескерту хабарын сәтті оқыдыңыз.

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

ақпарат

Ескерту! Бұл ескерту назарыңызды қажет етеді, бірақ бұл өте маңызды емес.

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

Мысалдар және белгілеу

Негізгі

Тік градиенті бар әдепкі орындалу жолағы.

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

Жолақты

Жолақ әсерін жасау үшін градиентті пайдаланады. IE7-8 нұсқасында қол жетімді емес.

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

Анимациялық

Жолақтарды оңнан солға қарай жандандыру үшін .activeқосыңыз . .progress-stripedIE барлық нұсқаларында қол жетімді емес.

<div class = "прогресс-жолақты белсенді" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Қапталған

Оларды жинақтау үшін бірнеше жолақты бірдей .progressетіп салыңыз.

<div класс = "прогресс" > 
  <div class = "bar-success" style = " ені : 35 %; " ></div>   
  <div class = "bar-warning" style = " ені : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " ені : 10 %; " ></div>   
</div>

Опциялар

Қосымша түстер

Прогресс жолақтары дәйекті мәнерлер үшін бірдей түймелердің кейбірін және ескерту сыныптарын пайдаланады.

<div class = "прогресс-ақпарат" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "прогресс прогресс-табыс" > 
  <div class = "bar" style = " ені : 40 % " ></div>   
</div>
<div class = "прогресс туралы ескерту" > 
  <div class = "bar" style = " ені : 60 % " ></div>   
</div>
<div class = "прогресс-қауіпті" > 
  <div class = "bar" style = " ені : 80 % " ></div>   
</div>

Жолақты жолақтар

Қатты түстерге ұқсас, бізде әртүрлі жолақты прогресс жолақтары бар.

<div class = "прогресс прогресс-ақпарат прогресс-жолақ" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "прогресс прогресс-сәттілік прогресс-жолақты" > 
  <div class = "bar" style = " ені : 40 % " ></div>   
</div>
<div class = "прогресс-ескерту прогресс-жолақты" > 
  <div class = "bar" style = " ені : 60 % " ></div>   
</div>
<div class = "прогресс прогресс-қауіпті прогресс-жолақты" > 
  <div class = "bar" style = " ені : 80 % " ></div>   
</div>

Браузерді қолдау

Прогресс жолақтары олардың барлық әсерлеріне жету үшін CSS3 градиенттерін, ауысуларын және анимацияларын пайдаланады. Бұл мүмкіндіктерге IE7-9 немесе Firefox-тың ескі нұсқаларында қолдау көрсетілмейді.

Internet Explorer 10 және Opera 12 нұсқаларынан бұрынғы нұсқалар анимацияларды қолдамайды.

Мәтіндік мазмұнмен қатар солға немесе оңға тураланған кескінді көрсететін компоненттердің әртүрлі түрлерін (мысалы, блог пікірлері, твиттер және т.б.) құруға арналған дерексіз нысан мәнерлері.

Әдепкі мысал

Әдепкі медиа медиа нысанын (суреттер, бейне, аудио) мазмұн блогының сол немесе оң жағына жылжытуға мүмкіндік береді.

Бұқаралық ақпарат құралдарының тақырыбы

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, 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, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.

Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.

Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.

Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.
Бұқаралық ақпарат құралдарының тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, 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>

Ұңғымалар

Шұңқырды элементке кірістірілген әсер беру үшін қарапайым әсер ретінде пайдаланыңыз.

Қараңдар, мен құдықта жатырмын!

<div класс = «жақсы» > 
  ...
</div>

Қосымша сабақтар

Басқару толтырғышы және екі қосымша модификатор класы бар дөңгелек бұрыштар.

Қараңдар, мен құдықта жатырмын!

<div class = "жақсы-үлкен" > 
  ...
</div>

Қараңдар, мен құдықта жатырмын!

<div class = «жақсы-кіші» > 
  ...
</div>

Жабу белгішесі

Модальдер мен ескертулер сияқты мазмұнды жабу үшін жалпы жабу белгішесін пайдаланыңыз.

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

Егер зәкірді пайдаланғыңыз келсе, iOS құрылғылары басу оқиғалары үшін href="#" белгісін қажет етеді.

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

Көмекші сыныптар

Кішігірім дисплейге немесе мінез-құлықты өзгертуге арналған қарапайым, бағытталған сабақтар.

.солға тартыңыз

Элементті солға жылжытыңыз

сынып = «солға тарту»

. тарту - солға {
  қалқымалы : солға ;
}

.оңға тартыңыз

Элементті оңға жылжытыңыз

сынып = «оңға тарту»

. тарту - оңға {
  қалқымалы : оң жақ ;
}

.дыбысы өшірілді

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

сынып = «үні өшірілді»

. дыбысы өшірілген {
  түс : #999; 
}

.clearfix

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

сынып = «тазалау»

. тазалау {
  * масштабтау : 1 ; 
  &: бұрын ,
  &: кейін {
    көрсету : кесте ;
    мазмұны : "" ; 
  }
  &: кейін {
    анық : екеуі де ;
  }
}

Ашылмалы мәзірлер

Мысал

Белгілеу

Опциялар

Мәзірлерді туралау

Ашылмалы тізімдегі ішкі мәзірлер

Түйме топтары

Мысалдар

Бір түймелер тобы

Бірнеше түймелер тобы

Тік түйме топтары

Құсбелгі ұяшығы және радио дәмі

Түйме топтарындағы ашылмалы тізімдер

Түймелердің ашылмалы мәзірлері

Шолу және мысалдар

Барлық түйме өлшемдерімен жұмыс істейді

JavaScript қажет

Бөлу түймелерінің ашылмалы тізімдері

Өлшемдері

Ашылмалы мәзірлер

Навигация: қойындылар, таблеткалар және тізімдер

Жеңіл әдепкі мәндер Бірдей белгілеу, әртүрлі сыныптар

Негізгі қойындылар

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

Өшірілген күй

Құрамдас бөліктерді туралау

Жиналмалы

Біріктірілген қойындылар

Біріктірілген таблеткалар

Ашылмалы тізімдер

Ашылмалы тізімдері бар қойындылар

Ашылмалы тізімі бар таблеткалар

Навигациялық тізімдер

Мысал шарлау тізімі

Көлденең бөлгіштер

Қойынды шарлау

Таблетка үлгісі

Қойындыларда өшеді

jQuery плагинін қажет етеді

Кез келген бағытта кестелеуге болады

Төменгі жағындағы қойындылар

Сол жақтағы қойындылар

Оң жақтағы қойындылар

Navbar

Негізгі шарлау тақтасы

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

Бренд

Навигация сілтемелері

Пішіндер

Іздеу пішіні

Құрамдас бөліктерді туралау

Ашылмалы тізімдерді пайдалану

Мәтін

Қосымша дисплей нұсқалары

Жоғарғы жағына бекітілген

Төменге дейін бекітілген

Статикалық жоғарғы шарлау тақтасы

Жауапты шарлау тақтасы

Төңкерілген вариация

Нан үгінділері

Мысалдар

Беттеу Мазмұн бойынша беттеу үшін екі опция

Стандартты беттеу

Опциялар

Өшірілген және белсенді күйлер

Өлшемдері

Туралау

Пейжер

Әдепкі мысал

Тураланған сілтемелер

Қосымша өшірілген күй

Белгілер мен белгілер

Жапсырмалар

Белгілер

Оңай жиналмалы

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

Батыр бірлігі

Сәлем Әлем!

Бет тақырыбы

Мысал бет тақырыбы Тақырыпқа арналған ішкі мәтін