Компонентхо

Дар Bootstrap даҳҳо ҷузъҳои дубора истифодашаванда сохта шудаанд, то паймоиш, огоҳиҳо, поповҳо ва ғайраҳоро таъмин кунанд.

Гурӯҳҳои тугмаҳо

Барои якҷоя кардани тугмаҳои сершумор ҳамчун як ҷузъи таркиб, гурӯҳҳои тугмаҳоро истифода баред. Онҳоро бо як қатор <a>ё <button>элементҳо созед.

Шумо инчунин метавонед маҷмӯи лоиҳаҳоро барои лоиҳаҳои мураккабтар муттаҳид <div class="btn-group">кунед <div class="btn-toolbar">.

Намунаи аломатгузорӣ

Ин аст, ки HTML як гурӯҳи стандартии тугмаҳои бо тугмаҳои барчаспҳои лангар сохташуда чӣ гуна назар мекунад:

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

Ва бо панели асбобҳо барои гурӯҳҳои сершумор:

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

Қуттии қайд ва маззаҳои радио

Гурӯҳҳои тугмаҳо инчунин метавонанд ҳамчун радио амал кунанд, ки дар он танҳо як тугма фаъол буда метавонад ё қуттиҳои қайдкуние, ки дар он шумораи дилхоҳ тугмаҳо метавонанд фаъол бошанд. Барои ин ҳуҷҷатҳои Javascript-ро бинед .

JavaScript-ро гиред »

Сарҳо боло

CSS барои гурӯҳҳои тугмаҳо дар файли алоҳида аст, button-groups.less.

Тугмаҳои афтанда

Ҳар гуна тугмаро истифода баред, то менюи афтандаро тавассути ҷойгир кардани он дар дохили a .btn-groupва таъмини аломати мувофиқи меню таъмин кунед.

Намунаи аломатгузорӣ

Ба монанди гурӯҳи тугмаҳо, аломатгузории мо аломати муқаррарии тугмаҳоро истифода мебарад, аммо бо як қатор иловаҳо барои такмил додани услуб ва дастгирии плагини афтанда jQuery Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "download" href = "#" >   
    Амал
    <span class = "caret" ></span> 
  </a>
  <ul class = "менюи афтанда" > 
    <!-- пайвандҳои менюи афтанда -->
  </ul>
</div>

Тугмаҳои афтанда тақсим кунед

Бар асоси услубҳои гурӯҳи тугмаҳо ва аломатгузорӣ, мо метавонем ба осонӣ тугмаи тақсимкунӣ эҷод кунем. Тугмаҳои тақсимкунӣ амали стандартиро дар тарафи чап ва гузариши афтанда дар тарафи рост бо истинодҳои контекстӣ доранд.

Намунаи аломатгузорӣ

Мо афтандаҳои муқаррарии тугмаҳоро васеъ мекунем, то амали дуюми тугмаро таъмин кунем, ки ҳамчун триггери алоҳидаи афтанда кор мекунад.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Амалиёт </a>  
  <a class = "btn dropdown-toggle" data-toggle = "download" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "менюи афтанда" > 
    <!-- пайвандҳои менюи афтанда -->
  </ul>
</div>

Пешфарзҳои сабук . Нишондиҳии якхела, синфҳои гуногун

Синфи асосии пурқувват

Ҳама ҷузъҳои нав дар ин ҷо - ҷадвалҳо, доруҳо ва рӯйхатҳо - як аломати асосӣ ва услубҳоро тавассути .navсинф мубодила мекунанд.

Чаро лавҳаҳо ва таблеткаҳо

Ҷадвалҳо ва доруҳо дар Bootstrap дар <ul>асоси ҳамон HTML, рӯйхати истинодҳо сохта шудаанд. Мубодилаи байни ҷадвалҳо ё доруҳо танҳо бо як синф.

Ҳарду имконот барои зербахшҳои мундариҷа ё паймоиш байни саҳифаҳои мундариҷаи алоқаманд бузурганд.

Ҷадвалҳои асосӣ

<ul>Пайвандҳои мунтазамро гиред ва илова кунед .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "фаъол" > 
    <a href = "#" > Хона </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Таблетҳои асосӣ

Ҳамин HTML-ро гиред, аммо ба ҷои ин истифода баред .nav-pills:

<ul class = "nav nav-pills" > 
  <li class = "фаъол" > 
    <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>

Равзанаҳо Барои ҷузъҳои пешрафтаи nav

Менюҳои бой осонтар карда шуданд

Менюҳои афтанда дар ҷадвалҳо ва доруҳои Bootstrap хеле осонанд ва танҳо каме HTML иловагӣ ва плагини сабуки jQuery талаб мекунанд.

Ба саҳифаи Javascript равед, то ҳуҷҷатҳоро дар бораи оғоз кардани афтандаҳо дар Bootstrap хонед.

Ҷадвалҳо бо афтандаҳо

<ul class = "nav nav-tabs" > 
  <li class = "афтанда" > 
    <a class = "афтанда-гузариш" 
       data-toggle = "афтанда"
       href = "#" >
        Поёнафтода
        <b class = "caret" ></b> 
      </a>
    <ul class = "менюи афтанда" > 
      <!-- пайвандҳо -->
    </ul>
  </li>
</ul>

Таблетҳо бо афтандаҳо

<ul class = "nav nav-pills" > 
  <li class = "афтанда" > 
    <a class = "афтанда-гузариш" 
       data-toggle = "афтанда"
       href = "#" >
        Поёнафтода
        <b class = "caret" ></b> 
      </a>
    <ul class = "менюи афтанда" > 
      <!-- пайвандҳо -->
    </ul>
  </li>
</ul>

Рӯйхати Nav Навъҳои оддии ҳамҷояшударо созед, ки барои лавҳаҳои паҳлӯӣ хубанд

Навигатсия дар услуби барнома

Рӯйхати Nav роҳи содда ва осони сохтани гурӯҳҳои истинодҳои навро бо сарлавҳаҳои ихтиёрӣ таъмин мекунанд. Онҳо беҳтарин дар панелҳои паҳлӯӣ ба монанди Finder дар OS X истифода мешаванд.

Структурӣ, онҳо дар ҳамон услубҳои асосии навсозӣ ба мисли ҷадвалҳо ва доруҳо сохта шудаанд, аз ин рӯ истифода ва мутобиқсозӣ осон аст.

Бо нишонаҳо

Рӯйхати Nav низ бо нишонаҳо осон аст. Теги мувофиқро <i>бо синф илова кунед ва шумо муқаррар кардаед.

Намунаи рӯйхати нав

Рӯйхати истинодҳоро гиред ва илова кунед class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Сарлавҳаи рӯйхат
  </li>
  <li class = "фаъол" > 
    <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 Ҷадвалҳоро тавассути JavaScript зинда кунед

Чӣ дохил карда шудааст

Бо як плагини оддӣ ҷадвалҳои худро зинда кунед, то байни мундариҷа тавассути ҷадвалҳо гузаред. Bootstrap ҷадвалҳои ҷадвалбандиҳоро дар чаҳор услуб муттаҳид мекунад: боло (пешфарз), рост, поён ва чап.

Тағир байни онҳо осон аст ва танҳо тағир додани аломати хеле камро талаб мекунад.

Намунаи ҷадвал

Барои ҷадвалбандии ҷадвалбандҳо, .nav-tabsdiv-ро бо синфи дигар печонед .tabbable.

Ман дар қисмати 1 ҳастам.

Салом, ман дар қисми 2 ҳастам.

Чӣ гап духтар, ин қисми 3 аст.

Васлкунаки фармоишии jQuery

Ҳама ҷадвалҳои ҷадвалбандишаванда аз плагини сабуки jQuery мо таъмин карда мешаванд. Муфассалтар дар бораи чӣ гуна ба ҳаёт овардани ҷадвалбандиҳо дар саҳифаи ҳуҷҷатҳои JavaScript хонед.

JavaScript-ро гиред →

Нишондиҳии мустақим

Истифодаи ҷадвалбандиҳои ҷадвалбандишаванда div, маҷмӯи ҷадвалҳо ва маҷмӯи панелҳои ҷадвалбандишавандаи мундариҷаро талаб мекунад.

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Бахши 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Бахши 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane фаъол" id = "1" >  
      <p> Ман дар Бахши 1 ҳастам. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Салом, ман дар бахши 2 ҳастам. </p>
    </div>
  </div>
</div>

Табб дар ҳама самт

Табларзаҳо дар поён

Тартиби HTML-ро тағир диҳед ва синферо илова кунед, то ҷадвалҳоро дар поён ҷойгир кунед.

Ман дар бахши А.

Салом, ман дар бахши В ҳастам.

Чӣ гап духтар, ин қисмати C аст.

<div class = "tabbable ҷадвалбандиҳо-дар зер" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Ҷадвалҳо дар тарафи чап

Синфро иваз кунед, то ҷадвалҳоро дар тарафи чап ҷойгир кунед.

Ман дар бахши А.

Салом, ман дар бахши В ҳастам.

Чӣ гап духтар, ин қисмати C аст.

<div class = "tabbable ҷадвалбандиҳо-чап" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Ҷадвалҳо дар тарафи рост

Синфро иваз кунед, то ҷадвалҳоро дар тарафи рост ҷойгир кунед.

Ман дар бахши А.

Салом, ман дар бахши В ҳастам.

Чӣ гап духтар, ин қисмати C аст.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Намунаи нави панели статикӣ

Намунаи нави панели статикӣ (ба боло собит нест) бо номи лоиҳа, паймоиш ва шакли ҷустуҷӯ.

Исҳоқҳои Навбар

Навбар танҳо чанд div-ро талаб мекунад, то онро барои намоиши статикӣ ё собит созанд.

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

Барои он, ки наворро дар болои равзанаи намоиш собит созад, .navbar-fixed-topба div, .navbar. Дар CSS-и худ ба шумо инчунин лозим меояд, ки такрори онро тавассути илова padding-top: 40px;ба <body>.

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

Номи бренд

Истиноди оддӣ барои нишон додани номи бренд ё лоиҳаи шумо танҳо теги лангарро талаб мекунад.

<a class = "бренд" href = "#" >  
  Номи лоиҳа
</a>

Шакли ҷустуҷӯ

Шаклҳои ҷустуҷӯ услубҳои фармоиширо дар навор бо .navbar-searchсинф мегиранд. Барои мувофиқ кардани он дохил кунед .pull-leftё .pull-rightдар form.

<form class = "navbar-search pull-left" > 
  < навъи вуруд = "матн" синфи = " ҷойгиркунандаи ҷустуҷӯ" = "Ҷустуҷӯ" >   
</form>

Варианти ҷавобии ихтиёрӣ

Вобаста аз миқдори мундариҷа дар панели болоии худ, шумо метавонед имконоти ҷавобиро амалӣ кунед. Барои ин, мундариҷаи нави худро дар div, .nav-collapse.collapse, печонед ва тугмаи ивазкунандаи навбарро илова кунед .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
 
      <!-- .btn-navbar ҳамчун гузариш барои мӯҳтавои навбарбанди пӯшида истифода мешавад -->
      <a class = "btn btn-navbar" data-toggle = "colapse" 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" > 
        <!-- .нав, .навбар-кофтуков, .навбар-форма ва гайра -->
      </div>
 
    </div>
  </div>
</div>

Сарҳо боло! Навбарҳои ҷавобгӯ плагини фурӯпоширо талаб мекунанд .

Истинодҳои нав

Ҷузъҳои Навро тавассути рӯйхатҳои бетартиб илова кардан осон аст.

<ul class = "nav" > 
  <li class = "фаъол" > 
    <a href = "#" > Хона </a> 
  </li>
  <li><a href = "#" > Пайванд </a></li> 
  <li><a href = "#" > Пайванд </a></li> 
</ul>

Илова кардани афтандаҳо

Илова кардани афтандаҳо ба нав хеле содда аст, аммо истифодаи плагини javascript-и моро талаб мекунад .

<ul class = "nav" > 
  <li class = "афтанда" > 
    <a href = "#" 
          синф = "афтанда-гузариш"
          data-toggle = "афтанда" >
          Ҳисоб
          <b class = "caret" ></b> 
    </a>
    <ul class = "менюи афтанда" > 
      ...
    </ul>
  </li>
</ul>

JavaScript-ро гиред →

Чаро онҳоро истифода баред

Навигатсияи Breadcrumb ҳамчун роҳи нишон додани корбарон дар куҷо будани онҳо дар дохили барнома ё сайт истифода мешавад, аммо на барои паймоиши ибтидоӣ. Истифодаи онҳоро камёфт ва мухтасар нигоҳ доред, то самараноктар бошад.

Мисолхо

Намунаи ягона нишон дода шудааст, ки он метавонад дар якчанд саҳифа намоиш дода шавад.

Нишондиҳӣ

HTML рӯйхати стандартии шумо бо истинодҳост.

<ul class = "нонреза" > 
  <li>
    <a href = "#" > Хона </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Китобхона </a> <span class = "divider" > / </span>   
  </li>
  <li class = "фаъол" > 
    <a href = "#" > Маълумот </a> 
  </li>
</ul>

Саҳифабандии бисёрсоҳавӣ

Кай истифода бурдан

Саҳифабандии ултра содда ва ҳадди ақал услубӣ, ки аз ҷониби Rdio илҳом гирифта шудааст, барои барномаҳо ва натиҷаҳои ҷустуҷӯ олӣ аст. Блоки калонро аз даст додан душвор аст, ба осонӣ миқёспазир аст ва минтақаҳои калони кликро таъмин мекунад.

Истинодҳои саҳифаи давлатӣ

Истинодҳо танзимшавандаанд ва дар як қатор ҳолатҳо бо синфи дуруст кор мекунанд. .disabledбарои истинодҳои кликнашаванда ва .activeбарои саҳифаи ҷорӣ.

Ҳамоҳангсозии чандир

Барои тағир додани ҳамбастагии пайвандҳои саҳифабандӣ яке аз ду синфи ихтиёриро илова кунед: .pagination-centeredва .pagination-right.

Мисолхо

Ҷузъи пешфарзии саҳифагузорӣ чандир аст ва дар як қатор вариантҳо кор мекунад.

Нишондиҳӣ

Парпечшуда дар як <div>, саҳифагузорӣ танҳо як <ul>аст.

<div class = "саҳифабандӣ" > 
  <ul>
    <li><a href = "#" > Пешина </a></li> 
    <li class = "фаъол" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > Оянда </a></li> 
  </ul>
</div>

Пейжер Барои истинодҳои фаврии қаблӣ ва оянда

Дар бораи пейджер

Ҷузъи пейҷер маҷмӯи истинодҳо барои амалҳои оддии саҳифагузорӣ бо аломатгузории сабук ва ҳатто сабкҳои сабуктар аст. Ин барои сайтҳои оддӣ ба монанди блогҳо ё маҷаллаҳо хеле хуб аст.

Намунаи пешфарз

Бо нобаёнӣ, пейджер истинодҳоро марказ мекунад.

<ul class = "pager" > 
  <li>
    <a href = "#" > Пешина </a> 
  </li>
  <li>
    <a href = "#" > Оянда </a> 
  </li>
</ul>

Пайвандҳои ҳамоҳангшуда

Интихобан, шумо метавонед ҳар як пайвандро ба паҳлӯҳо мувофиқ созед:

<ul class = "pager" > 
  <li class = "пешина" > 
    <a href = "#" > ← калонсол </a> 
  </li>
  <li синфи = "оянда" > 
    <a href = "#" > Навтар → </a> 
  </li>
</ul>

Тамғакоғазҳо	Нишондиҳӣ
Пешфарз	`<span class="label">Default</span>`
Нав	`<span class="label label-success">New</span>`
Огоҳӣ	`<span class="label label-warning">Warning</span>`
Муҳим	`<span class="label label-important">Important</span>`
Маълумот	`<span class="label label-info">Info</span>`

Суратҳои пешфарз

Бо нобаёнӣ, эскизи Bootstrap барои намоиш додани тасвирҳои алоқаманд бо аломати ҳадди ақали зарурӣ тарҳрезӣ шудааст.

Хеле танзимшаванда

Бо каме аломатгузории иловагӣ, мумкин аст, ки ҳама гуна мундариҷаи HTML-ро ба монанди сарлавҳаҳо, параграфҳо ё тугмаҳо ба эскизҳо илова кунед.

Нишони ангора

Дар ин ҷо хеле осон аст, дар он ҷо осонтар мешавад. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.

Амал Амал
Нишони ангора

Дар ин ҷо хеле осон аст, дар он ҷо осонтар мешавад. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.

Амал Амал

Чаро эскизҳоро истифода баред

Эскизҳо (қаблан .media-gridто v1.4) барои шабакаҳои аксҳо ё видеоҳо, натиҷаҳои ҷустуҷӯи тасвирҳо, маҳсулоти чакана, портфелҳо ва ғайра бузурганд. Онҳо метавонанд истинодҳо ё мундариҷаи статикӣ бошанд.

Нишондиҳии оддӣ, чандир

Нишон додани тасвири ангора оддӣ аст - танҳо як чизи зарурӣ ulбо ҳама гуна шумораи liэлементҳо аст. Он инчунин хеле чандир аст ва имкон медиҳад, ки ҳама гуна мундариҷа бо каме бештар аломатгузорӣ карда шавад, то мундариҷаи шуморо печонед.

Андозаи сутуни шабакаро истифода мебарад

Ниҳоят, ҷузъи ангораи тасвирҳо синфҳои мавҷудаи системаи шабакаро истифода мебарад - ба монанди .span2ё .span3- барои назорати андозаҳои эскиз.

Нишондиҳанда

Тавре ки қаблан зикр гардид, аломатгузории зарурӣ барои эскизҳо сабук ва осон аст. Дар ин ҷо ба танзимоти пешфарз барои тасвирҳои алоқаманд нигаред :

<ul class = "анғазҳо" > 
  <li class = "span3" > 
    <a href = "#" class = "анғаз" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Барои мундариҷаи HTML-и фармоишӣ дар эскизҳо, аломатгузорӣ каме тағир меёбад. Барои иҷозат додан ба мундариҷаи сатҳи блок дар ҳама ҷо, мо онро <a>ба <div>монанди ин иваз мекунем:

<ul class = "анғазҳо" > 
  <li class = "span3" > 
    <div class = "анғаз" > 
      <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 меояд, ки паёмҳои огоҳкунандаро дастгирӣ мекунад ва онҳоро зуд ва осон нест мекунад.

Плагинро гиред »

Намунаҳои огоҳӣ

Паёми худ ва тасвири пӯшидаи ихтиёриро дар div бо синфи оддӣ печонед.

× Огоҳӣ! Беҳтарин худатонро тафтиш кунед, шумо он қадар хуб намебинед.

<div class = "огоҳӣ" > 
  <a class = "close" > × </a> 
  <strong> Огоҳӣ! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед.
</div>

Паёми огоҳии стандартиро бо ду синфи ихтиёрӣ ба осонӣ васеъ кунед: .alert-blockбарои пуркунии бештар ва назорати матн ва .alert-headingбарои сарлавҳаи мувофиқ.

Огоҳӣ!

Беҳтарин худатонро тафтиш кунед, шумо он қадар хуб намебинед. Nulla vitae elit libero, a augue pharetra. Тамошо кунед, ки шумо метавонед ба таври васеъ истифода баред.

<div class = "alert alert-block" > 
  <a class = "close" > × </a> 
  <h4 class = "alert-heading" > Огоҳӣ! </h4> 
  Беҳтараш худатро санҷед, шумо не...
</div>

Алтернативаҳои контекстӣ синфҳои ихтиёриро барои тағир додани коннотацияи огоҳӣ илова кунед

Хатогӣ ё хатар

× Оҳ афсӯс! Якчанд чизро тағир диҳед ва дубора пешниҳод кунед.

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

Муваффакият

× Офарин! Шумо ин паёми огоҳкунандаи муҳимро бомуваффақият хонед.

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

Маълумот

× Сарҳо боло! Ин огоҳӣ ба таваҷҷӯҳи шумо ниёз дорад, аммо ин хеле муҳим нест.

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

Намунаҳо ва нишонаҳо

Асосӣ

Сатри пешфарз бо градиенти амудӣ.

<div class = "пешрафт" > 
  <div class = "бар" 
       style = " паҳнои : 60 %; " ></div> 
</div>

рахдор

Барои эҷод кардани эффекти рахдор градиентро истифода мебарад.

<div class = "пешрафт-маълумот 
     пешравй-рах» >
  <div class = "бар" 
       style = " паҳнои : 20 %; " ></div> 
</div>

Аниматсия

Намунаи рахро мегирад ва онро аниме мекунад.

<div class = "пешрафт-хатар 
     пешравй-рахи фаъол» >
  <div class = "бар" 
       style = " паҳнои : 40 %; " ></div> 
</div>

Параметрҳо ва дастгирии браузер

Рангҳои иловагӣ

Барҳои пешрафт баъзе аз ҳамон номҳои синфро ҳамчун тугмаҳо ва огоҳиҳо барои ороиши шабеҳ истифода мебаранд.

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

Интихобан, шумо метавонед файлҳои LESS-ро танзим кунед ва рангҳо ва андозаи худро тағир диҳед.

Рафтор

Барҳои пешравӣ гузаришҳои CSS3-ро истифода мебаранд, аз ин рӯ, агар шумо паҳниро тавассути javascript динамикӣ танзим кунед, он ба осонӣ андозааш тағир меёбад.

Агар шумо .activeсинфро истифода баред, .progress-stripedпанҷараҳои пешрафти шумо рахҳои чап ба ростро аниматсионӣ хоҳанд кард.

Дастгирии браузер

Барҳои пешрафт градиентҳо, гузаришҳо ва аниматсияҳои CSS3-ро барои ноил шудан ба ҳама эффектҳои худ истифода мебаранд. Ин хусусиятҳо дар IE7-8 ё версияҳои кӯҳнаи Firefox дастгирӣ намешаванд.

Opera дар айни замон аниматсияҳоро дастгирӣ намекунад.

Уэллс

Хубро ҳамчун эффекти оддӣ ба элемент истифода баред, то ба он таъсири дохилшаванда диҳад.

Ана, ман дар чоҳ ҳастам!

<div class = "хуб" > 
  ...
</div>

Нишонҳо

Нишонро дар элемент барои ҳисобҳои хонданашуда ё ҳамчун нишондиҳандаи оддӣ истифода баред.

<span class = "нишона" > 3 </div>

Нишонаи пӯшида

Барои рад кардани мундариҷа ба монанди модальҳо ва огоҳиҳо, нишонаи пӯшидаи умумиро истифода баред.

<a class = "паст" > × </a>

Гурӯҳҳои тугмаҳо Тугмаҳоро барои функсияҳои бештар ба панели асбобҳо ҳамроҳ кунед

Гурӯҳҳои тугмаҳо

Намунаи аломатгузорӣ

Қуттии қайд ва маззаҳои радио

Сарҳо боло

Тугмаҳои афтанда Менюҳои афтанда контекстӣ, ки дар гурӯҳҳои тугмаҳо сохта шудаанд

Тугмаҳои афтанда

Намунаи аломатгузорӣ

Тугмаҳои афтанда тақсим кунед

Намунаи аломатгузорӣ

Нав, ҷадвалҳо ва ҳабҳо Навигатсия бо услуби рӯйхат хеле танзимшаванда

Пешфарзҳои сабук . Нишондиҳии якхела, синфҳои гуногун

Синфи асосии пурқувват

Чаро лавҳаҳо ва таблеткаҳо

Ҷадвалҳои асосӣ

Таблетҳои асосӣ

Stackable Ҷадвалҳо ё доруҳоро амудӣ созед

Чӣ тавр онҳоро ҷамъ кардан

Варақаҳои ҷамъшуда

Таблетҳои ҷамъшуда

Равзанаҳо Барои ҷузъҳои пешрафтаи nav

Менюҳои бой осонтар карда шуданд

Ҷадвалҳо бо афтандаҳо

Таблетҳо бо афтандаҳо

Рӯйхати Nav Навъҳои оддии ҳамҷояшударо созед, ки барои лавҳаҳои паҳлӯӣ хубанд

Навигатсия дар услуби барнома

Бо нишонаҳо

Намунаи рӯйхати нав

Намуна бо нишонаҳо

Нави Tabbable Ҷадвалҳоро тавассути JavaScript зинда кунед

Чӣ дохил карда шудааст

Намунаи ҷадвал

Васлкунаки фармоишии jQuery

Нишондиҳии мустақим

Табб дар ҳама самт

Табларзаҳо дар поён

Ҷадвалҳо дар тарафи чап

Ҷадвалҳо дар тарафи рост

Навбар

Намунаи нави панели статикӣ

Исҳоқҳои Навбар

Номи бренд

Шакли ҷустуҷӯ

Варианти ҷавобии ихтиёрӣ

Истинодҳои нав

Илова кардани афтандаҳо

Нонпораҳо

Чаро онҳоро истифода баред

Мисолхо

Нишондиҳӣ

Саҳифагузорӣ Ду имконоти пейджинг тавассути мундариҷа

Саҳифабандии бисёрсоҳавӣ

Кай истифода бурдан

Истинодҳои саҳифаи давлатӣ

Ҳамоҳангсозии чандир

Мисолхо

Нишондиҳӣ

Пейжер Барои истинодҳои фаврии қаблӣ ва оянда

Дар бораи пейджер

Намунаи пешфарз

Пайвандҳои ҳамоҳангшуда

Тамғакоғазҳои дарунсохт Тамғагузорӣ ва шарҳи матн

Анкараҳо Шабакаҳои тасвирҳо, видеоҳо, матнҳо ва ғайра

Суратҳои пешфарз

Хеле танзимшаванда

Нишони ангора

Нишони ангора

Чаро эскизҳоро истифода баред

Нишондиҳии оддӣ, чандир

Андозаи сутуни шабакаро истифода мебарад

Нишондиҳанда

Мисолҳои бештар

Сабкҳои огоҳӣ барои муваффақият, огоҳӣ ва паёмҳои хатогӣ

Пешфарзҳои сабук

Синфи асоси аз нав навишташуда

Паёми огоҳии ягона

Бо JavaScript хеле хуб меравад

Намунаҳои огоҳӣ

Огоҳӣ!

Алтернативаҳои контекстӣ синфҳои ихтиёриро барои тағир додани коннотацияи огоҳӣ илова кунед