Баскыч топтору

Бир нече баскычтарды бир курама компонент катары бириктирүү үчүн баскыч топторун колдонуңуз. Аларды бир катар <a>же <button>элементтер менен куруңуз.

Мыкты тажрыйбалар

Биз баскыч топторун жана куралдар тилкелерин колдонуу үчүн төмөнкү көрсөтмөлөрдү сунуштайбыз:

• Ар дайым бир эле элементти бир баскыч тобунда колдонуңуз, <a>же <button>.
• Бир эле баскычтар тобуна ар кандай түстөгү баскычтарды аралаштырбаңыз.
• Текстке кошумча же анын ордуна сөлөкөттөрдү колдонуңуз, бирок ылайыктуу жерде alt жана аталыштын текстин кошуңуз.

Түшүрмөлөрү бар (төмөндө караңыз) байланышкан баскыч топтору өзүнчө чакырылышы керек жана ар дайым көздөгөн жүрүм-турумду көрсөтүү үчүн ачылуучу каретаны камтышы керек.

Демейки мисал

HTML анкер тег баскычтары менен курулган стандарттуу баскычтар тобун кантип карайт:

<div класс = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Куралдар панелинин мисалы

<div class="btn-group">А <div class="btn-toolbar">комплекстерин татаалыраак компоненттер үчүн бириктириңиз .

<div класс = "btn-куралдар тилкеси" > 
  <div класс = "btn-group" > 
    ...
  </div>
</div>

Белгилөө кутучасы жана радио даамдары

Баскыч топтору бир гана баскыч активдүү болушу мүмкүн болгон радиолор же каалаган сандагы баскычтар активдүү болушу мүмкүн болгон белгилөө кутучалары катары да иштеши мүмкүн. Бул үчүн Javascript документтерин караңыз .

JavaScript алуу »

Баскыч топторундагы ылдый түшүүлөр

Көңүл бургула! Туура рендеринг үчүн ачылуучу баскычтары .btn-groupбар баскычтар өз алдынча оролушу керек ..btn-toolbar

Обзор жана мисалдар

Каалаган баскычты колдонуп, ылдый түшүүчү менюну а ичине жайгаштырып, .btn-groupменюнун туура белгилөөсүн камсыз кылыңыз.

Мисал белгилөө

Баскычтар тобуна окшоп, биздин белгилөөдө кадимки баскычтарды белгилөө колдонулат, бирок стилди тактоо жана Bootstrap'тин ачылуучу jQuery плагинин колдоо үчүн бир нече толуктоолор бар.

<div класс = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" 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 класс = "btn-group" > 
  ...
  <ul class = "ашылуучу менюну оңго тартуу" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Мисал белгилөө

Биз өзүнчө ачылуучу триггер катары иштеген экинчи баскыч аракетин камсыз кылуу үчүн кадимки баскычтардын ачылуучу тизмелерин кеңейтебиз.

<div класс = "btn-group" > 
  <button class = "btn" > Аракет </button> 
  <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Ашылма менюлар

Ашылма менюларды ылдыйдан өйдөгө которуштурууга болот .dropdown-menu. .caretАл жогорудан ылдый эмес, ылдыйдан өйдө жылдыруу үчүн менюнун багытын буруп, ордун өзгөртөт.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ылдый түшүүчү меню" > 
    <!-- ачылуучу меню шилтемелери -->
  </ul>
</div>

Күчтүү базалык класс

Бул жердеги бардык навигация компоненттери — өтмөктөр, таблеткалар жана тизмелер — класс аркылуу бирдей базалык белгилерди жана стилдерди бөлүшөт ..nav

Качан колдонуу керек

Таблеткалар жана таблеткалар мазмундун бөлүмдөрү же тиешелүү мазмундун барактары арасында чабыттоо үчүн эң сонун.

Компонентти тегиздөө

Навигация шилтемелерин тегиздөө үчүн .pull-leftже .pull-rightпайдалуу класстарды колдонуңуз. Эки класс тең көрсөтүлгөн багытта CSS флоатын кошот.

Негизги өтмөктөр

Шилтемелерди үзгүлтүксүз алып <ul>, кошуңуз .nav-tabs:

• Үй
• Профиль
• Кабарлар

<ul class = "nav nav-tabs" > 
  <li класс = "активдүү" > 
    <a href = "#" > Башкы </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Негизги таблеткалар

Ошол эле HTMLди алыңыз, бирок .nav-pillsанын ордуна колдонуңуз:

• Үй
• Профиль
• Кабарлар

<ul class = "nav nav-pills" > 
  <li класс = "активдүү" > 
    <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 плагинин гана талап кылат.

Bootstrap'те ачылуучу тизмелерди баштоо боюнча документтерди окуу үчүн Javascript барагына өтүңүз.

ылдый түшүүчү өтмөктөр

• Үй
• Жардам
• Ашылма
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li класс = "ашылма" > 
    <a класс = "ашылма-которуу" 
       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 класс = "ашылма" > 
    <a класс = "ашылма-которуу" 
       data-toggle = "ашылма"
       href = "#" >
        Ашылма
        <b class = "caret" ></b> 
      </a>
    <ul class = "ылдый түшүүчү меню" > 
      <!-- шилтемелер -->
    </ul>
  </li>
</ul>

Колдонмо стилиндеги навигация

Nav тизмелери кошумча аталыштар менен навигация шилтемелеринин топторун түзүүнүн жөнөкөй жана оңой жолун камсыз кылат. Алар OS Xдеги Finder сыяктуу каптал тилкелерде эң жакшы колдонулат.

Структуралык жактан алар өтмөктөр жана таблеткалар сыяктуу негизги навигация стилдеринде курулган, ошондуктан колдонуу жана ыңгайлаштыруу оңой.

Иконалар менен

Nav тизмелерин иконалар менен жабдуу оңой. Класс менен туура <i>тегди кошуңуз жана сиз орнотуңуз.

Горизонталдык бөлгүчтөр

Класс менен бош тизме элементин түзүп, горизонталдуу бөлгүчтү кошуңуз .divider, мисалы:

<ul class = "nav nav-list" > 
  ...
  <li класс = "бөлүүчү" ></li> 
  ...
</ul>

Мисал навигация тизмеси

Шилтемелердин тизмесин алып, кошуңуз class="nav nav-list":

<ul class = "nav nav-list" > 
  <li класс = "nav-header" > 
    Тизме аталышы
  </li>
  <li класс = "активдүү" > 
    <a href = "#" > Башкы </a> 
  </li>
  <li>
    <a href = "#" > Китепкана </a> 
  </li>
  ...
</ul>

Пиктограммалар менен мисал

Ошол эле мисал, бирок <i>иконалар үчүн тэгдер менен.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i класс = "икон-китеп" >> </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 класс = "таб-панел активдүү" id = "tab1" >  
      <p> Мен 1-бөлүмдөмүн. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Саламатсызбы, мен 2-бөлүмдө турам. </p>
    </div>
  </div>
</div>

Төмөндөгү өтмөктөр

HTML тартибин которуп, ылдый жагына өтмөктөрдү коюу үчүн класс кошуңуз.

<div class = "табббол өтмөктөрү-төмөндө" > 
  <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 өтмөктөрү-оңго" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar склад

Navbar статикалык же стационардык дисплей үчүн жакшы структуралаш үчүн бир нече гана дивдерди талап кылат.

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

Туруктуу навигация

Чабыт тилкесин көрүү терезесинин үстүнкү же ылдый жагындагы эң четки div боюнча кошумча класс менен бекитиңиз, .navbar.

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

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

Navbarты чаптаганда, астындагы жашыруун аймакты эсепке алууну унутпаңыз. 40px же андан көп толтурууну кошуңуз<body> . Муну негизги Bootstrap CSSден кийин жана кошумча жооп берүүчү CSSден мурун кошуңуз.

Бренд аты

Брендиңизди же долбооруңуздун аталышын көрсөтүү үчүн жөнөкөй шилтемеге анкер теги гана керек.

<a класс = "бренд" href = "#" >  
  Долбоордун аты
</a>

Navbarдагы формалар

Форманы навигация тилкесинде туура стилдештирүү жана жайгаштыруу үчүн, төмөндө көрсөтүлгөндөй тиешелүү класстарды кошуңуз. Демейки форма үчүн, аны туура тегиздөө үчүн .navbar-formже бири-бирин кошуңуз..pull-left.pull-right

<форма класс = "navbar-формасы тартуу-сол" > 
  <киргизүү түрү = "текст" класс = "span2" >  
</form>

Көбүрөөк ыңгайлаштырылган издөө формасы үчүн, навигация тилкесинде адистештирилген стилдер үчүн киргизүүгө .navbar-searchжана formкошуңуз ..search-query

<форма класс = "navbar-издөө солго тартуу" > 
  <киргизүү түрү = "текст" класс = "издөө-суроо" толтургуч = "Издөө" >   
</form>

Кошумча жооп берүү��ү вариация

Сиздин үстүнкү панелиңиздеги мазмундун көлөмүнө жараша, сиз жооп берүүчү опцияларды ишке ашыргыңыз келиши мүмкүн. Бул үчүн, div камтыган navigation мазмунуңузду ороп .nav-collapse.collapse, жана навигация тилкесин которуу баскычын кошуңуз .btn-navbar.

<div класс = "navbar" > 
  <div class = "navbar-inner" > 
    <div класс = "контейнер" > 
 
      <!-- .btn-navbar жыйылган навигация мазмуну үчүн которгуч катары колдонулат -->
      <a класс = "btn btn-navbar" data-toggle = "кыйратуу" 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" > 
        <!-- .nav, .navbar-издөө, .navbar-форма, ж.б. -->
      </div>
 
    </div>
  </div>
</div>

Nav шилтемелер

Nav элементтерин иретсиз тизмелер аркылуу кошуу оңой.

<ul class = "nav" > 
  <li класс = "активдүү" > 
    <a href = "#" > Башкы </a> 
  </li>
  <li><a href = "#" > Шилтеме </a></li> 
  <li><a href = "#" > Шилтеме </a></li> 
</ul>

Бош тизме элементи жана жөнөкөй класс менен навигация шилтемелериңизге бөлгүчтөрдү оңой кошо аласыз. Жөн гана муну шилтемелердин ортосуна кошуңуз:

<ul class = "nav" > 
  ...
  <li класс = "бөлүүчү-вертикал" ></li> 
  ...
</ul>

Компонентти тегиздөө

Навигацияны, издөө формасын же текстти тегиздөө үчүн же .pull-leftколдонуңуз.pull-right пайдалуу класстарды колдонуңуз. Эки класс тең көрсөтүлгөн багытта CSS флоатын кошот.

Ашылма менюларды кошуу

Навигага ылдый түшүүчүлөрдү жана түшүүчүлөрдү кошуу өтө жөнөкөй, бирок биздин JavaScript плагинибизди колдонууну талап кылат .

<ul class = "nav" > 
  <li класс = "ашылма" > 
    <a href = "#" 
          класс = "ашылма-которуу"
          data-toggle = "ашылма" >
          Каттоо эсеби
          <b class = "caret" ></b> 
    </a>
    <ul class = "ылдый түшүүчү меню" > 
      ...
    </ul>
  </li>
</ul>

JavaScript алуу →

Чабыт тилкесиндеги текст

Тексттин саптарын туура алып баруу жана түс үчүн <.navbar-text>тегге ороп коюңуз.<p>

Эмне үчүн аларды колдонушат

Breadcrumb навигациясы колдонуучуларга алар колдонмонун же сайттын ичинде кайда экенин көрсөтүүнүн жолу катары колдонулат, бирок негизги навигация үчүн эмес. Эң натыйжалуу болушу үчүн аларды сейрек жана кыскача колдонуңуз.

Мисалдар

Бир эле мисал, ал бир нече барактарда көрсөтүлүшү мүмкүн.

• Үй

• Негизги бет /
• Китепкана

• Негизги бет /
• Китепкана /
• Маалыматтар

Белгилөө

HTML сиздин шилтемелер менен стандарттуу иретсиз тизмеңиз.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Башкы </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Китепкана </a> <span class = "divider" > / </span>   
  </li>
  <li класс = "активдүү" > Маалыматтар </li> 
</ul>

Качан колдонуу керек

Rdio аркылуу шыктандырган өтө жөнөкөй жана минималдуу стилдеги баракчалар, колдонмолор жана издөө натыйжалары үчүн эң сонун. Чоң блокту өткөрүп жиберүү кыйын, оңой масштабдалат жана чоң чыкылдатуу аймактарын камсыз кылат.

Статистикалуу барак шилтемелери

Шилтемелер ыңгайлаштырылган жана туура класс менен бир катар шарттарда иштейт. .disabledбасылбаган шилтемелер жана .activeучурдагы барактар ​​үчүн.

Ийкемдүү тегиздөө

Барактоо шилтемелеринин тегиздөөсүн өзгөртүү үчүн эки кошумча класстын бирин кошуңуз: .pagination-centeredжана .pagination-right.

Мисалдар

Демейки пагинация компоненти ийкемдүү жана бир катар вариацияларда иштейт.

Белгилөө

Оролгон <div>, барактоо жөн гана <ul>.

<div класс = "беттөө" > 
  <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классты колдонушат.

Демейки мисал

Демейки боюнча, пейджер шилтемелерди борборлойт.

• Мурунку
• Кийинки

<ul class = "пейжер" > 
  <li>
    <a href = "#" > Мурунку </a> 
  </li>
  <li>
    <a href = "#" > Кийинки </a> 
  </li>
</ul>

Тегизделген шилтемелер

Же болбосо, ар бир шилтемени тараптарга тегиздей аласыз:

• ← Улгайган
• Жаңыраак →

<ul class = "пейжер" > 
  <li класс = "мурунку" > 
    <a href = "#" > ← Эски </a> 
  </li>
  <li класс = "кийинки" > 
    <a href = "#" > Жаңыраак → </a> 
  </li>
</ul>

Жөнүндө

Белгилер индикаторду же кандайдыр бир санды көрсөтүү үчүн кичинекей, жөнөкөй компоненттер. Алар көбүнчө Mail.app сыяктуу электрондук почта кардарларында же push эскертмелери үчүн мобилдик колдонмолордо кездешет.

Жеткиликтүү класстар

Bootstrap сиздин сайтыңыздагы мазмунду көрсөтүү үчүн баатыр бирдиги деп аталган жеңил, ийкемдүү компонентти камсыз кылат. Бул маркетинг жана мазмуну оор сайттарда жакшы иштейт.

Белгилөө

Мазмунуңузду divлайк менен ороп алыңыз:

<div класс = "баатыр-бирдик" > 
  <h1> рубрика </h1>
  <p> Теги </p>
  <p>
    < а класс = "btn btn-primary btn-large" > 
      Көбүрөөк билүү
    </a>
  </p>
</div>

h1Барактагы мазмундун бөлүктөрүн туура бөлүштүрүү жана бөлүү үчүн жөнөкөй кабык . h1Ал демейки small, элементин жана башка көптөгөн компоненттерди (кошумча стилдер менен) колдоно алат .

<div class = "page-header" > 
  <h1> Мисал беттин аталышы </h1>
</div>

Демейки эскиздер

Демейки боюнча, Bootstrap эскиздери минималдуу талап кылынган белгилөө менен байланышкан сүрөттөрдү көрсөтүү үчүн иштелип чыккан.

Жогорку ылайыкташтырылган

Бир аз кошумча белгилөө менен, эскиздерге аталыштар, абзацтар же баскычтар сыяктуу каалаган HTML мазмунун кошууга болот.

• 

  Эскиз энбелгиси

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Акция Акция

• 

  Эскиз энбелгиси

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Акция Акция

Эмне үчүн эскиздерди колдонуу керек

Эскиз (мурун .media-gridv1.4 чейин) сүрөттөр же видеолор торчолору, сүрөт издөө натыйжалары, чекене өнүмдөр, портфолио жана башка көптөгөн нерселер үчүн эң сонун. Алар шилтемелер же статикалык мазмун болушу мүмкүн.

Жөнөкөй, ийкемдүү белгилөө

Эскизди белгилөө жөнөкөй — ulкаалаган сандагы liэлементтер менен гана талап кылынат. Ал ошондой эле өтө ийкемдүү, мазмунуңузду ороп коюу үчүн бир аз көбүрөөк белгилөө менен мазмундун каалаган түрүнө мүмкүнчүлүк берет.

Тор мамычасынын өлчөмдөрүн колдонот

Акырында, эскиздер компоненти эскиз өлчөмдөрүн көзөмөлдөө үчүн учурдагы тор тутумунун класстарын колдонот — .span2же — сыяктуу..span3

Белгилөө

Мурда айтылгандай, эскиздер үчүн талап кылынган белги жеңил жана жөнөкөй. Шилтемеленген сүрөттөр үчүн демейки жөндөөнү карап көрүңүз :

<ul class = "эскиз сүрөттөр" > 
  <li класс = "span3" > 
    <a href = "#" класс = "эскиз" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Эскиздеги ыңгайлаштырылган HTML мазмуну үчүн белгилөө бир аз өзгөрөт. Блок деңгээлиндеги мазмунга каалаган жерде уруксат берүү үчүн, биз окшошту <a>алмаштырабыз <div>:

<ul class = "эскиз сүрөттөр" > 
  <li класс = "span3" > 
    <div класс = "эскиз" > 
      <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 класс = "эскертүү" > 
  <button class = "жабуу" data-dississ = "эскертүү" > × </button>  
  <strong> Эскертүү! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз.
</div>

Көңүл бургула! iOS түзмөктөрү href="#"эскертүүлөрдү жокко чыгарууну талап кылат. Аны жана анкерди жабуу сүрөтчөлөрү үчүн маалымат атрибутун камтууну унутпаңыз. Же болбосо, <button>маалымат атрибуту бар элементти колдонсоңуз болот, аны биз документтерибиз үчүн тандап алганбыз. Колдонуп жатканда <button>, сиз камтышыңыз керек, type="button"болбосо формаларыңыз тапшырбашы мүмкүн.

Стандарттык эскертүү билдирүүсүн эки кошумча класс менен оңой кеңейтиңиз: .alert-blockкөбүрөөк толтуруу жана тексттик башкаруу .alert-headingүчүн жана дал келген аталыш үчүн.

<div класс = "эскертүүчү эскертүү-блок" > 
  <a class = "close" data-dississ = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Эскертүү! </h4> 
  Өзүңдү текшерип көр, сен андай эмессиң...
</div>

Ката же коркунуч

<div класс = "эсгертме-ката" > 
  ...
</div>

Ийгилик

<div класс = "эскертүүчү эскертүү-ийгилик" > 
  ...
</div>

Маалымат

<div класс = "эскертүүчү эскертүү маалыматы" > 
  ...
</div>

Негизги

Вертикалдуу градиент менен демейки прогресс тилкеси.

<div класс = "прогресс" > 
  <div класс = "бар" 
       style = " width : 60 %; " ></div> 
</div>

Striped

Чаардуу эффект түзүү үчүн градиент колдонот (IE жок).

<div класс = "прогресс-сызык" > 
  <div класс = "бар" 
       style = " width : 20 %; " ></div> 
</div>

Анимацияланган

Чаардуу мисалды алып, аны жандандырат (IE жок).

<div класс = "прогресс-сызык 
     активдүү" >
  <div класс = "бар" 
       style = " width : 40 %; " ></div> 
</div>

Кошумча түстөр

Прогресс тилкелери бирдей баскычтардын айрымдарын жана ырааттуу стилдер үчүн эскертүү класстарын колдонот.

Сызык барлар

Катуу түстөр сыяктуу, бизде ар кандай сызыкча прогресс тилкелери бар.

Жүрүм-турум

Прогресс тилкелери CSS3 өткөөлдөрүн колдонушат, андыктан кеңдигин javascript аркылуу динамикалык түрдө туураласаңыз, анын өлчөмү акырындап өзгөрөт.

Эгер сиз .activeклассты колдонсоңуз, .progress-stripedпрогресс тилкелериңиз солдон оңго сызыктарды жандандырат.

Браузерди колдоо

Прогресс тилкелери бардык эффекттерге жетүү үчүн CSS3 градиенттерин, өтүүлөрдү жана анимацияларды колдонушат. Бул функциялар IE7-9 же Firefoxтун эски версияларында колдоого алынбайт.

Opera жана IE учурда анимацияларды колдобойт.

Wells

Кудукту элементке жөнөкөй эффект катары колдонуңуз, ага кошумча эффект берүү.

<div класс = "жакшылык" > 
  ...
</div>

Жабуу сөлөкөтү

Модаль жана эскертүүлөр сыяктуу мазмунду четке кагуу үчүн жалпы жабуу сөлөкөтүн колдонуңуз.

×

<button class = "жабуу" > × </button> 

Эгер анкерди колдонсоңуз, iOS түзмөктөрү чыкылдатуу окуялары үчүн href="#" белгисин талап кылат.

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