Мисол

Менюи ивазшаванда, контекстӣ барои намоиши рӯйхати истинодҳо. Бо плагини афтанда 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 class = "тақсимкунанда" ></li> 
  <li><a tabindex = "-1" href = "#" > Пайванди ҷудошуда </a></li>  
</ul>

Нишондиҳӣ

Танҳо ба менюи афтанда нигаред, дар ин ҷо HTML лозим аст. Шумо бояд триггери афтанда ва менюи афтандаро дар дохили .dropdown, ё элементи дигаре, ки эълон мекунад, печонед position: relative;. Пас танҳо менюро эҷод кунед.

<div class = "афтанда" > 
  <!-- Пайванд ё тугма барои иваз кардани афтанда -->
  <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 class = "тақсимкунанда" ></li> 
    <li><a tabindex = "-1" href = "#" > Пайванди ҷудошуда </a></li>  
  </ul>
</div>

Имконот

Менюҳоро ба рост ҳамоҳанг созед ва сатҳҳои иловагии афтандаҳоро илова кунед.

Мутобиқсозии менюҳо

Илова .pull-rightба a .dropdown-menuба рост мувофиқ кардани менюи афтанда.

<ul class = "pull-down-menu" нақши = "меню" aria-labelledby = "dLabel" >   
  ...
</ul>

Зерменюҳо дар афтандаҳо

Сатҳи иловагии менюҳои афтандаро илова кунед, ки дар кунҷ ба мисли менюҳои OS X бо баъзе иловаҳои оддии аломатгузорӣ пайдо мешаванд. Ба .dropdown-submenuягон liменюи афтанда барои ороиши худкор илова кунед.

Пешфарз

Таркиб

Зерменюи чап

<ul class = "Менюи афтанда" нақши = "меню" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <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 class = "btn-panel" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

Маҷмӯи тугмаҳоро на ба таври уфуқӣ амудӣ ҷойгир кунед.

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

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

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

Намоишҳои афтанда дар гурӯҳҳои тугмаҳо

Сарҳо боло!.btn-groupТугмаҳои дорои афтандаҳо бояд ба таври инфиродӣ дар дохили худ печонида шаванд .btn-toolbar.

Барраси ва мисолҳо

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "download" 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> 
  < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >  
    <span class = "caret" ></span> 
  </ тугма >
  <ul class = "менюи афтанда" > 
    <!-- пайвандҳои менюи афтанда -->
  </ul>
</div>

Андозаҳо

Синфҳои тугмаҳои иловагӣ .btn-mini, .btn-small, ё .btn-largeбарои андозагирӣ истифода баред.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Амал </button> 
  < класси тугма = "btn btn-mini dropdown-toggle" data-toggle = " афтанда " >  
    <span class = "caret" ></span> 
  </ тугма >
  <ul class = "менюи афтанда" > 
    <!-- пайвандҳои менюи афтанда -->
  </ul>
</div>

Менюҳои афтанда

Менюҳои афтанда инчунин метавонанд бо илова кардани як синф ба волидайни фаврии .dropdown-menu. Он самти .caretменюро тағир медиҳад ва худи менюро иваз мекунад, то аз поён боло ба ҷои боло ба поён ҳаракат кунад.

<div class = "btn-group drop" > 
  <button class = "btn" > Тарки </button> 
  < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >  
    <span class = "caret" ></span> 
  </ тугма >
  <ul class = "менюи афтанда" > 
    <!-- пайвандҳои менюи афтанда -->
  </ul>
</div>

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

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

Варақаҳои асосӣ

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

Ҳолати ғайрифаъол

Барои ҳама ҷузъҳои нав (ҷадвалҳо, ҳабҳо ё рӯйхат) .disabledбарои истинодҳои хокистарӣ илова кунед ва ҳеҷ гуна эффектҳои холӣ нест . Аммо, агар шумо атрибутро нест кунед, истинодҳо кликшаванда боқӣ мемонанд href. Интихобан, шумо метавонед JavaScript-и фармоиширо барои пешгирии ин кликҳо татбиқ кунед.

<ul class = "nav nav-pills" > 
  ...
  <li class = "diabled" ><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 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>

Рӯйхати нав

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

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

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

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Сарлавҳаи рӯйхат </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Китобхона </a></li> 
  ...
</ul>

ШарҳБарои ҷойгиркунӣ дар рӯйхати нав, class="nav nav-list"ба ҳама гуна лона дохил кунед <ul>.

Тақсимкунакҳои уфуқӣ

Бо эҷоди як ҷузъи рӯйхати холӣ бо синф як тақсимкунандаи уфуқӣ илова кунед .divider, ба монанди:

<ul class = "nav nav-list" > 
  ...
  <li class = "тақсимкунанда" ></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 class = "tab-pane фаъол" 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-ро тағир диҳед ва синферо илова кунед, то ҷадвалҳоро дар поён ҷойгир кунед.

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

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

Чӣ гап духтар, ин қисмати 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>

Навори асосӣ

Барои оғоз кардан, наворҳо статикӣ мебошанд (ба боло собит нестанд) ва дастгирии номи лоиҳа ва паймоиши асосиро дар бар мегиранд. Якеро дар ҳама ҷо дар дохили a ҷойгир кунед .container, ки паҳнои сайт ва мундариҷаи шуморо муқаррар мекунад.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Унвон </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > Пайванд </a></li> 
      <li><a href = "#" > Пайванд </a></li> 
    </ul>
  </div>
</div>

Компонентҳои Navbar

Бренд

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

<a class = "brand" href = "#" > Номи лоиҳа </a>

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

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

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

Шумо метавонед ба осонӣ ба истинодҳои нави худ тақсимкунакҳоро бо ҷузъи рӯйхати холӣ ва синфи оддӣ илова кунед. Танҳо инро дар байни истинодҳо илова кунед:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Шаклҳо

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

<form class = "navbar-form pull-ceft" > 
  < навъи вуруд = "матн" синфи = "span2" >  
  <button type = " submit" class = "btn" > Ирсол < /button>  
</form>

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

Барои шакли ҷустуҷӯи бештар фармоишгари, .navbar-searchба formва .search-queryба вуруд барои сабкҳои махсус дар навор илова кунед.

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

Ҳамоҳангсозии ҷузъҳо

Истинодҳои нав, шакли ҷустуҷӯ ё матнро ҳамоҳанг созед, синфҳо .pull-leftё утилитаҳоро истифода баред. .pull-rightҲарду синфҳо шинокунандаи CSS-ро дар самти муайяншуда илова мекунанд.

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

Иловаи афтандаҳо ва афтандаҳо ба нав бо каме аломатгузорӣ ва плагини афтандаҳои JavaScript .

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

Барои аломатгузории бештар ва маълумот дар бораи афтандаҳои занг ба ҳуҷҷатҳои афтандаҳои JavaScript муроҷиат кунед.

Матн

Сатрҳои матнро дар элемент бо .navbar-text, одатан дар <p>теги барои пешбарӣ ва ранги дуруст печонед.

Вариантҳои намоиши ихтиёрӣ

Наворро дар боло ё поёни намоишгоҳ бо як синфи иловагӣ дар div, .navbar.

Ба боло собит шудааст

Илова кунед .navbar-fixed-topва фаромӯш накунед, ки майдони пинҳонии зери онро бо илова кардани ҳадди аққал 40px paddingба <body>. Боварӣ ҳосил кунед, ки онро пас аз CSS-и асосии Bootstrap ва пеш аз 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 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-colapse colapse" > 
        <!-- .нав, .навбар-кофтуков, .навбар-форма ва гайра -->
      </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 class = "фаъол" > Маълумот </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 class = "фаъол" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Шумо метавонед ба таври ихтиёрӣ лангарҳои фаъол ё ғайрифаъолро барои фосила иваз кунед, то ки функсияи клик ҳангоми нигоҳ доштани услубҳои пешбинишуда хориҷ карда шавад.

<div class = "саҳифагузорӣ" > 
  <ul>
    <li class = "diabled" ><span> Пешина </span></li> 
    <li class = "фаъол" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Андозаҳо

Саҳифаҳои калонтар ё хурдтарро мехоҳед? .pagination-large, .pagination-small, ё .pagination-miniбарои андозаҳои иловагӣ илова кунед .

<div class = "pagination pagination-lage" > 
  <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 = "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>

Ҳолати ихтиёрии ғайрифаъол

Пайвандҳои пейжерӣ инчунин .disabledсинфи умумии утилитаро аз саҳифагузорӣ истифода мебаранд.

<ul class = "pager" > 
  <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>`

Воҳиди қаҳрамон

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

Салом Ҷаҳон!

Ин як воҳиди оддии қаҳрамон, як ҷузъи оддии ҷамботрон барои ҷалби таваҷҷӯҳи иловагӣ ба мундариҷа ё иттилооти мушаххас аст.

Бисёр омӯхтан

<div class = "қаҳрамон-воҳид" > 
  <h1> Сарлавҳа </h1>
  <p> Тасвир </p>
  <p>
    <a class = "btn btn-primary btn-lage" > 
      Бисёр омӯхтан
    </a>
  </p>
</div>

Сарлавҳаи саҳифа

Як қабати оддӣ барои h1ҷойгиркунии мувофиқ ва тақсим кардани қисмҳои мундариҷа дар саҳифа. Он метавонад h1пешфарз small, элемент ва инчунин аксари ҷузъҳои дигарро (бо сабкҳои иловагӣ) истифода барад.

<div class = "сарлавҳаи саҳифа" > 
  <h1> Намунаи сарлавҳаи саҳифа <small> Зерматн барои сарлавҳа </small></h1>
</div>

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

Бо нобаёнӣ, ангораҳои 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.

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

Дар ин ҷо хеле осон аст, осонтар аст. 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 = "span4" > 
    <a href = "#" class = "анғаз" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "анҷараҳо" > 
  <li class = "span4" > 
    <div class = "анғаз" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Нишони ангораи </h3>
      <p> Сарлавҳаи эскиз... </p>
    </div>
  </li>
  ...
</ul>

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

Ҳама имконоти худро бо синфҳои гуногуни шабака, ки ба шумо дастрасанд, омӯзед. Шумо инчунин метавонед андозаи гуногунро омехта кунед ва мувофиқат кунед.

Огоҳии пешфарз

.alertБарои паёми ҳушдори асосии огоҳӣ ҳама гуна матн ва тугмаи радкунии ихтиёриро печонед .

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

<div class = "огоҳӣ" > 
  < навъи тугма = "тугма" синф = "пӯшидан" data-dississ = "огоҳӣ" > × </button>   
  <strong> Огоҳӣ! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед.
</div>

Бекор кардани тугмаҳо

Браузерҳои Mobile Safari ва Mobile Opera, ба ғайр аз data-dismiss="alert"атрибут, href="#"барои бекор кардани огоҳиҳо ҳангоми истифодаи <a>тег талаб мекунанд.

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

Интихобан, шумо метавонед <button>унсуреро бо атрибути додаҳо истифода баред, ки мо онро барои ҳуҷҷатҳои худ интихоб кардаем. Ҳангоми истифодаи <button>, шумо бояд дохил type="button"кунед ё варақаҳои шумо пешниҳод карда намешаванд.

< навъи тугма = "тугма" синф = "пӯшидан" data-dississ = "огоҳӣ" > × </button>

Огоҳиҳоро тавассути JavaScript рад кунед

Васлкунаки jQuery огоҳиҳоро барои зуд ва осон бекор кардани огоҳиҳо истифода баред .

Имконот

Барои паёмҳои дарозтар, бо илова кардани замима дар боло ва поёни бастабандии огоҳкунанда зиёд .alert-blockкунед.

Огоҳӣ!

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

<div class = "alert alert-block" > 
  < навъи тугма = "тугма" синф = "пӯшидан" data-dississ = "огоҳӣ" > × </button>   
  <h4> Огоҳӣ! </h4>
  Беҳтараш худатро санҷед, шумо не...
</div>

Алтернативаҳои контекстӣ

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

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

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

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

Муваффакият

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

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

Маълумот

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

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

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

Асосӣ

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

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

рахдор

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

<div class = "пешрафти пешравӣ" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

Аниматсия

Барои аниматсия кардани рахҳои рост ба чап ба .activeилова кунед. .progress-stripedДар ҳама версияҳои IE дастрас нест.

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

Чуста

Якчанд панҷараҳоро дар як ҷо ҷойгир .progressкунед, то онҳоро ҷамъ кунед.

<div class = "пешрафт" > 
  <div class = "bar 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 = " бари : 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 = " бари : 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 нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.

Сарлавҳаи ВАО

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Сарлавҳаи медиа </h4> 
    ...
 
    <!-- Объекти медиавӣ -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Рӯйхати ВАО

Бо каме аломатгузории иловагӣ, шумо метавонед дар дохили рӯйхат медиаро истифода баред (барои риштаҳои шарҳ ё рӯйхати мақолаҳо муфид аст).

Сарлавҳаи ВАО

Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.

Сарлавҳаи васоити ахбори омма
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.

Сарлавҳаи васоити ахбори омма
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.

Сарлавҳаи васоити ахбори омма
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
Сарлавҳаи ВАО
Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Сарлавҳаи медиа </h4> 
      ...
 
      <!-- Объекти медиавӣ -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Уэллс

Чӯҷаро ҳамчун эффекти оддӣ ба элемент истифода баред, то ба он эффекти дохилӣ диҳад.

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

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

Дарсҳои ихтиёрӣ

Ҷойгиркунии назорат ва кунҷҳои мудавваршуда бо ду синфи тағирдиҳандаи ихтиёрӣ.

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

<div class = "хуб-калон" > 
  ...
</div>

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

<div class = "хуб-хурд" > 
  ...
</div>

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

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

<button class = "close" > × </ тугма >

Дастгоҳҳои iOS барои рӯйдодҳои клик бояд href="#"-ро талаб кунанд, агар шумо мехоҳед лангарро истифода баред.

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

Синфҳои ёрирасон

Дарсҳои оддӣ ва мутамарказ барои намоиши хурд ё тағир додани рафтор.

.чап кашед

Элементро ба чап шино кунед

синф = "кашидани чап"

. кашидан - чап {
  шинокунанда : чап ;
}

.рост кашед

Элементро ба рост шино кунед

синф = "кашидани рост"

. кашидан - рост {
  шинокунанда : рост ;
}

.хомуш

Ранги элементро ба#999

синф = "хомушшуда"

. хомӯш {
  ранг : #999; 
}

.clearfix

floatДар ҳама гуна элемент тоза кунед

синф = "тозакунӣ"

. тоза кардан {
  * масштаб : 1 ; 
  &: пеш аз ,
  &: баъд аз {
    намоиш : ҷадвал ;
    мундариҷа : "" ; 
  }
  &: баъд аз {
    равшан : ҳарду ;
  }
}

Менюҳои афтанда

Мисол

Нишондиҳӣ

Имконот

Мутобиқсозии менюҳо

Зерменюҳо дар афтандаҳо

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

Мисолхо

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

Гурӯҳҳои сершумори тугмаҳо

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

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

Намоишҳои афтанда дар гурӯҳҳои тугмаҳо

Менюҳои афтанда тугма

Барраси ва мисолҳо

Бо ҳама андозаи тугмаҳо кор мекунад

JavaScript-ро талаб мекунад

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

Андозаҳо

Менюҳои афтанда

Нав: ҷадвалҳо, доруҳо ва рӯйхатҳо

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

Варақаҳои асосӣ

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

Ҳолати ғайрифаъол

Ҳамоҳангсозии ҷузъҳо

Дастгиршаванда

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

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

Равзанаҳои афтанда

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

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

Рӯйхати нав

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

Тақсимкунакҳои уфуқӣ

Навсозии ҷадвал

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

Пажӯҳиш дар ҷадвалҳо

Васлкунаки jQuery -ро талаб мекунад

Табб дар ҳама гуна самт

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

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

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

Навбар

Навори асосӣ

Компонентҳои Navbar

Бренд

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

Шаклҳо

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

Ҳамоҳангсозии ҷузъҳо

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

Матн

Вариантҳои намоиши ихтиёрӣ

Ба боло собит шудааст

Ба поён собит

Навори болои статикӣ

Навбари ҷавобӣ

Варианти баръакс

Нонпораҳо

Мисолхо

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

Саҳифабандии стандартӣ

Имконот

Ҳолатҳои ғайрифаъол ва фаъол

Андозаҳо

Ҳамоҳангсозӣ

Пейжер

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

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

Ҳолати ихтиёрии ғайрифаъол

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

Тамғакоғазҳо

Нишонҳо

Қисмҳои типографӣ

Воҳиди қаҳрамон

Салом Ҷаҳон!

Сарлавҳаи саҳифа

Намунаи сарлавҳаи саҳифа Зерматн барои сарлавҳа

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