Компонентхо

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

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

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

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

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

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

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

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

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

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

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

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

  1. <div class = "btn-panel" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

JavaScript-ро гиред »

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

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

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

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "download" href = "#" >
  3. Амал
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "менюи афтанда" >
  7. <!-- пайвандҳои менюи афтанда -->
  8. </ul>
  9. </div>

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

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

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

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

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


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

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

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

Андозаҳо

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

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

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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Амалиёт </button>
  3. < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >
  4. <span class = "caret" ></span>
  5. </ тугма >
  6. <ul class = "менюи афтанда" >
  7. <!-- пайвандҳои менюи афтанда -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "btn-group drop" >
  2. <button class = "btn" > Тарки </button>
  3. < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >
  4. <span class = "caret" ></span>
  5. </ тугма >
  6. <ul class = "менюи афтанда" >
  7. <!-- пайвандҳои менюи афтанда -->
  8. </ul>
  9. </div>

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

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

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

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

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

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

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

Мисолхо

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

Нишондиҳӣ

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

  1. <div class = "саҳифагузорӣ" >
  2. <ul>
  3. <li><a href = "#" > Пешина </a></li>
  4. <li class = "фаъол" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Оянда </a></li>
  11. </ul>
  12. </div>

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

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

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

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

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

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

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Пешина </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Оянда </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "pager" >
  2. <li class = "пешина" >
  3. <a href = "#" > калонсол </a>
  4. </li>
  5. <li синфи = "оянда" >
  6. <a href = "#" > Навтар → </a>
  7. </li>
  8. </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-important">6</span>
Маълумот 8 <span class="badge badge-info">8</span>
Баръакс 10 <span class="badge badge-inverse">10</span>

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

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

Нишондиҳӣ

Мундариҷаи худро ба divмонанди монанд гузоред:

  1. <div class = "қаҳрамон-воҳид" >
  2. <h1> Сарлавҳа </h1>
  3. <p> Тасвир </p>
  4. <p>
  5. <a class = "btn btn-primary btn-lage" >
  6. Бисёр омӯхтан
  7. </a>
  8. </p>
  9. </div>

Салом Ҷаҳон!

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

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

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

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

  1. <div class = "сарлавҳаи саҳифа" >
  2. <h1> Намунаи сарлавҳаи саҳифа </h1>
  3. </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- барои назорати андозаҳои эскиз.

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

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

  1. <ul class = "анҷараҳо" >
  2. <li class = "span3" >
  3. <a href = "#" class = "анғаз" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "анҷараҳо" >
  2. <li class = "span3" >
  3. <div class = "анғаз" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Нишони ангораи </h5>
  6. <p> Сарлавҳаи хурд дар ин ҷо... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

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

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

Бо Bootstrap 2, мо синфи асосиро содда кардем: .alertба ҷои .alert-message. Мо инчунин ҳадди ақали тамғаи заруриро кам кардем <p>- ба таври нобаёнӣ ҳеҷ талаб карда намешавад, танҳо берунии <div>.

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

Барои як ҷузъи устувортар бо рамзи камтар, мо намуди фарқкунандаи огоҳиҳои блок, паёмҳоеро, ки бо пуркунии бештар ва маъмулан матни бештар меоянд, хориҷ кардем. Синф низ ба .alert-block.


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

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

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

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

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

Огоҳӣ! Беҳтарин худатонро тафтиш кунед, шумо он қадар хуб намебинед.
  1. <div class = "огоҳӣ" >
  2. <button class = "close" data-dississ = "alert" > × </button>
  3. <strong> Огоҳӣ! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед.
  4. </div>

Сарҳо боло! Дастгоҳҳои iOS href="#"барои рад кардани огоҳиҳо талаб мекунанд. Боварӣ ҳосил кунед, ки он ва атрибути маълумотро барои нишонаҳои пӯшидаи лангар дохил кунед. Интихобан, шумо метавонед <button>унсуреро бо атрибути додаҳо истифода баред, ки мо онро барои ҳуҷҷатҳои худ интихоб кардаем. Ҳангоми истифодаи <button>, шумо бояд дохил type="button"кунед ё варақаҳои шумо пешниҳод карда намешаванд.

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

Огоҳӣ!

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

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

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

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

Оҳ афсӯс! Якчанд чизро тағир диҳед ва дубора пешниҳод кунед.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Муваффакият

Офарин! Шумо ин паёми огоҳкунандаи муҳимро бомуваффақият хонед.
  1. <div class = "alert alert-sccess" >
  2. ...
  3. </div>

Маълумот

Сарҳо боло! Ин огоҳӣ ба таваҷҷӯҳи шумо ниёз дорад, аммо ин хеле муҳим нест.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

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

Асосӣ

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

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

рахдор

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

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

Аниматсия

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

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

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

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

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

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

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

Рафтор

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

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

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

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

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

Уэллс

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

Ана, ман дар чоҳ ҳастам!
  1. <div class = "хуб" >
  2. ...
  3. </div>

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

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

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

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

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