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

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

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

Азбаски ҷадвалҳо ва ҳабҳо ба таври нобаёнӣ уфуқӣ мебошанд, танҳо як синфи дуюмро илова кунед .nav-stacked, то онҳо ба таври амудӣ ҷойгир шаванд.

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

• Хона
• Профил
• Паёмҳо

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

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

• Хона
• Профил
• Паёмҳо

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

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

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

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

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

• Хона
• Кумак
• Поёнафтода
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• Хона
• Кумак
• Поёнафтода
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

Рӯйхатҳои 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>

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

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

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

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

Барои пажмурда шудани ҷадвалҳо, .fadeба ҳар як .tab-pane.

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

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

Javascript → гиред

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

Барои ҷадвалбандии ҷадвалбандҳо, .tab-paneбарои ҳар як ҷадвал дорои ID-и беназир эҷод кунед ва онҳоро дар .tab-content.

Барои варақаҳои рост ё чап мувофиқшуда, .nav-tabsва .tab-contentдар -ро печонед .tabbable.

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

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

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

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

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

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

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

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

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

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

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

<div class = "tabbable 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 ё бештар аз padding ба <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ва .search-queryба вуруд барои сабкҳои махсус дар навор илова кунед.

<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 → гиред

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

Сатрҳои матнро дар <.navbar-text>, одатан дар <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>

Дар бораи

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

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

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

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

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

<div class = "alert alert-block" > 
  <a class = "close" data-dississ = "alert" href = "#" > × </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>

рахдор

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

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

Аниматсия

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

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

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

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

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

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

Рафтор

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

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

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

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

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

Уэллс

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

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

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

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

×

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

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

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