Компонентхо

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

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

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

Таҷрибаҳои беҳтарин

Мо дастурҳои зеринро барои истифодаи гурӯҳҳои тугмаҳо ва панелҳои асбобҳо тавсия медиҳем:

Ҳамеша як элементро дар як гурӯҳи тугмаҳо истифода баред, <a>ё <button>.
Тугмаҳои рангҳои гуногунро дар як гурӯҳи тугмаҳо омехта накунед.
Ба ғайр аз матн ё ба ҷои матн нишонаҳо истифода баред, аммо мутмаин бошед, ки дар ҳолати зарурӣ матни alt ва сарлавҳаро дохил кунед.

Гурӯҳҳои Тугмаҳои алоқаманд бо афтандаҳо (ба поён нигаред) бояд алоҳида даъват карда шаванд ва ҳамеша дорои каретаи афтанда барои нишон додани рафтори пешбинишуда.

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

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

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Намунаи панели асбобҳо

Маҷмӯаҳои <div class="btn-group">a- <div class="btn-toolbar">ро барои ҷузъҳои мураккабтар муттаҳид кунед.

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

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

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

JavaScript-ро гиред »

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

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

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

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

Ҳар гуна тугмаро истифода баред, то менюи афтандаро тавассути ҷойгир кардани он дар дохили 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>

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

Тугмаҳои афтанда дар ҳама гуна андоза кор мекунанд. андозаи тугмаҳои шумо ба .btn-large, .btn-small, ё .btn-mini.

JavaScript талаб мекунад

Тугмаҳои афтанда барои кор кардани плагини афтанда Bootstrap талаб мекунанд .

Дар баъзе мавридҳо, ба монанди мобилӣ, менюҳои афтанда берун аз намоишгоҳ васеъ мешаванд. Шумо бояд ҳамоҳангиро дастӣ ё бо javascript фармоишӣ ҳал кунед.

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

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

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

Андозаҳо

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

<div class = "btn-group" > 
  ...
  <ul class = "download-меню pull-right" > 
    <!-- пайвандҳои менюи афтанда -->
  </ul>
</div>

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

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

<div class = "btn-group" > 
  <button class = "btn" > Амалиёт </button> 
  < синфи тугма = "btn 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синф мубодила мекунанд.

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

Ҷадвалҳо ва доруҳо барои бахшҳои мундариҷа ё паймоиш байни саҳифаҳои мундариҷаи алоқаманд бузурганд.

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

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

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

<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>бо синф илова кунед ва шумо муқаррар кардаед.

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

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

<ul class = "nav nav-list" > 
  ...
  <li class = "тақсимкунанда" ></li> 
  ...
</ul>

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

Рӯйхати истинодҳоро гиред ва илова кунед 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>

Навори собит

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

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

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

Вақте, ки шумо навбарро часпонед, дар хотир доред, ки майдони пинҳоншудаи зери онро ҳисоб кунед. Илова кардани 40px ё бештар аз он ба <body>. Боварӣ ҳосил кунед, ки онро пас аз CSS-и асосии Bootstrap ва пеш аз CSS-и ихтиёрии посухдиҳанда илова кунед.

Номи бренд

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

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

Форматҳо дар навор

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

<form class = "navbar-form pull-ceft" > 
  < навъи вуруд = "матн" синфи = "span2" >  
</form>

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

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

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

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

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

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

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

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

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

Javascript → гиред

Матн дар навор

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

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

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

Мисолхо

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

Нишондиҳӣ

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

<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 илҳом гирифта шудааст, барои барномаҳо ва натиҷаҳои ҷустуҷӯ олӣ аст. Блоки калонро аз даст додан душвор аст, ба осонӣ миқёспазир аст ва минтақаҳои калони кликро таъмин мекунад.

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

Истинодҳо танзимшавандаанд ва дар як қатор ҳолатҳо бо синфи дуруст кор мекунанд. .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>

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

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

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

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

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

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

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

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

Дар бораи

Нишонҳо ҷузъҳои хурд ва оддӣ барои намоиш додани нишондиҳанда ё ҳисобҳои як навъ мебошанд. Онҳо одатан дар муштариёни почтаи электронӣ ба монанди Mail.app ё дар барномаҳои мобилӣ барои огоҳиномаҳо пайдо мешаванд.

Синфҳои дастрас

Ном	Мисол	Нишондиҳӣ
Пешфарз	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-error">6</span>`
Маълумот	8	`<span class="badge badge-info">8</span>`
Баръакс	10	`<span class="badge badge-inverse">10</span>`

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

Bootstrap як ҷузъи сабук ва чандирро таъмин мекунад, ки барои намоиш додани мундариҷа дар сайти шумо воҳиди қаҳрамон номида мешавад. Он дар сайтҳои маркетинг ва мундариҷаи вазнин хуб кор мекунад.

Нишондиҳӣ

Мундариҷаи худро дар лайк печонед div:

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

Салом Ҷаҳон!

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

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

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

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

<div class = "сарлавҳаи саҳифа" > 
  <h1> Намунаи сарлавҳаи саҳифа </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.

Амал Амал

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

Эскизҳо (қаблан .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" data-dississ = "alert" > × </a>  
  <strong> Огоҳӣ! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед.
</div>

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

Огоҳӣ!

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

<div class = "alert alert-block" > 
  <a class = "close" data-dississ = "alert" > × </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 синфи = "бар" 
       style = " паҳнои : 60 %; " ></div> 
</div>

рахдор

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

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

Аниматсия

Мисоли рахро мегирад ва онро аниме мекунад (нест IE).

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

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

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

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

Барҳои рахдор

Ба монанди рангҳои сахт, мо барҳои пешрафти рахҳои гуногун дорем.

Рафтор

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

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

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

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

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

Уэллс

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

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

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

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

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

<a class = "наздик" > × </a>

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

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

Таҷрибаҳои беҳтарин

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

Намунаи панели асбобҳо

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

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

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

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

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

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

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

JavaScript талаб мекунад

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

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

Андозаҳо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рӯйхати Nav Сохтани навсозиҳои оддӣ, ки барои панелҳои паҳлӯӣ олӣ аст

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

Бо нишонаҳо

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

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

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

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

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

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

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

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

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

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

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

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

Навбар

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

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

Навори собит

Номи бренд

Форматҳо дар навор

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

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

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

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

Матн дар навор

Нонпораҳо

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

Мисолхо

Нишондиҳӣ

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

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

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

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

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

Мисолхо

Нишондиҳӣ

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

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

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

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

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

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

Нишондиҳандаҳо Нишондиҳандаҳо ва ҳисобҳои хонданашуда

Дар бораи

Синфҳои дастрас

Қисмҳои типографӣ Сарлавҳаи саҳифа ва воҳиди қаҳрамон барои сегментатсия кардани мундариҷа