Компоненттер

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript алуу »

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

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

Түймөктүн ачылуучу тизмелери

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

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

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

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

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

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

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

  1. <div класс = "btn-group" >
  2. <button class = "btn" > Аракет </button>
  3. <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ылдый түшүүчү меню" >
  7. <!-- ачылуучу меню шилтемелери -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ылдый түшүүчү меню" >
  7. <!-- ачылуучу меню шилтемелери -->
  8. </ul>
  9. </div>

Мультикон-баракчалар

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

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

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

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

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

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

Мисалдар

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

Белгилөө

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

  1. <div класс = "беттөө" >
  2. <ul>
  3. <li><a href = "#" > Мурунку </a></li>
  4. <li класс = "активдүү" >
  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 = "пейжер" >
  2. <li>
  3. <a href = "#" > Мурунку </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Кийинки </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "пейжер" >
  2. <li класс = "мурунку" >
  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 сыяктуу электрондук почта кардарларында же push эскертмелери үчүн мобилдик колдонмолордо кездешет.

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

аты Мисал Белгилөө
Демейки 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 класс = "баатыр-бирдик" >
  2. <h1> рубрика </h1>
  3. <p> Теги </p>
  4. <p>
  5. < а класс = "btn btn-primary btn-large" >
  6. Көбүрөөк билүү
  7. </a>
  8. </p>
  9. </div>

Салам дүйнө!

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

Көбүрөөк билүү

Барактын аталышы

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

  1. <div class = "page-header" >
  2. <h1> Мисал беттин аталышы </h1>
  3. </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

Белгилөө

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

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

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

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

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

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

Эскертүү!

Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң. Nulla vitae elit libero, pharetra augue. Кошумча commodo cursus magna, vel scelerisque nisl consectetur et.

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

Контексттик альт��рнативалар Эскертүүнүн коннотациясын өзгөртүү үчүн кошумча класстарды кошуңуз

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

О, шак! Бир нече нерсени өзгөртүп, кайра тапшырып көрүңүз.
  1. <div класс = "эсгертме-ката" >
  2. ...
  3. </div>

Ийгилик

Мыкты жасалды! Сиз бул маанилүү эскертүү билдирүүсүн ийгиликтүү окудуңуз.
  1. <div класс = "эскертүүчү эскертүү-ийгилик" >
  2. ...
  3. </div>

Маалымат

Көңүл бургула! Бул эскертүүгө көңүл буруңуз, бирок бул өтө маанилүү эмес.
  1. <div класс = "эскертүүчү эскертүү маалыматы" >
  2. ...
  3. </div>

Мисалдар жана белгилөө

Негизги

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

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

Striped

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

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

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

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

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

Параметрлер жана браузерди колдоо

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

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

Сызык барлар

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

Жүрүм-турум

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

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

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

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

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

Wells

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

Карачы, мен кудуктун ичиндемин!
  1. <div класс = "жакшылык" >
  2. ...
  3. </div>

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

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

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

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

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