Компоненти

Десетици компоненти за повеќекратна употреба се вградени во Bootstrap за да обезбедат навигација, предупредувања, поповери и многу повеќе.

Групи на копчиња

Користете групи на копчиња за да споите повеќе копчиња заедно како една композитна компонента. Изградете ги со низа <a>или <button>елементи.

Најдобри практики

Ги препорачуваме следниве упатства за користење групи копчиња и алатници:

  • Секогаш користете го истиот елемент во една група копчиња <a>или <button>.
  • Не мешајте копчиња со различни бои во иста група копчиња.
  • Користете икони како додаток или наместо текст, но не заборавајте да вклучите алт и наслов текст каде што е соодветно.

Поврзани групи на копчиња со паѓачки склопки (види подолу) треба да се повикуваат одделно и секогаш да вклучуваат паѓачка лента за да го означат планираното однесување.

Стандарден пример

Еве како HTML изгледа за стандардна група копчиња изградена со копчиња за ознаки за сидро:

  1. <div class = "btn-група" >
  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 class = "btn-toolbar" >
  2. <div class = "btn-група" >
  3. ...
  4. </div>
  5. </div>

Поле за избор и радио вкусови

Групите на копчиња можат да функционираат и како радија, каде што може да биде активно само едно копче, или полиња за избор, каде што може да биде активен кој било број на копчиња. Погледнете ги Javascript документите за тоа.

Добијте го Javascript »

Спуштање во групи на копчиња

Главите горе! Копчињата со паѓачки копчиња мора да бидат поединечно завиткани во нив .btn-groupза .btn-toolbarправилно прикажување.

Спуштање на копчињата

Преглед и примери

Користете кое било копче за да активирате паѓачко мени со тоа што ќе го ставите во a .btn-groupи ќе обезбедите соодветна ознака на менито.

Пример за обележување

Слично на групата копчиња, нашата ознака користи редовно обележување на копчињата, но со неколку додатоци за да го усоврши стилот и да го поддржи паѓачкиот приклучок за jQuery на Bootstrap.

  1. <div class = "btn-група" >
  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 class = "btn-група" >
  2. ...
  3. <ul class = "паѓачкото мени повлекување-десно" >
  4. <!-- линкови од паѓачкото мени -->
  5. </ul>
  6. </div>

Пример за обележување

Ги прошируваме нормалните паѓачки копчиња за да обезбедиме второ дејство на копче кое работи како посебен активирач за паѓање.

  1. <div class = "btn-група" >
  2. <button class = "btn" > Дејство </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = „паѓачко мени“ >
  7. <!-- линкови од паѓачкото мени -->
  8. </ul>
  9. </div>

Испаѓачки менија

Паѓачките менија, исто така, може да се префрлаат од долу нагоре со додавање на една класа на непосредниот родител на .dropdown-menu. Ќе ја преврти насоката на .caretи ќе го препозиционира самото мени за да се движи од дното нагоре наместо од врвот надолу.

  1. <div class = "отпаѓање на групата btn" >
  2. <button class = "btn" > Испаѓање </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "паѓачко" >
  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 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 = „пејџер“ >
  2. <li>
  3. <a href = "#" > Претходна </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Следно </a>
  7. </li>
  8. </ul>

Порамнети врски

Алтернативно, можете да ја усогласите секоја врска со страните:

  1. <ul class = „пејџер“ >
  2. <li class = „претходна“ >
  3. <a href = "#" > Постари </a>
  4. </li>
  5. <li class = „следно“ >
  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-large" >
  6. Научи повеќе
  7. </a>
  8. </p>
  9. </div>

Здраво свету!

Ова е едноставна херојска единица, едноставна компонента во стилот на џамботрон за привлекување дополнително внимание на истакнатата содржина или информации.

Научи повеќе

Заглавие на страницата

Едноставна обвивка за h1соодветно распоредување и сегментирање на делови од содржината на страницата. Може да го користи h1стандардниот smallелемент, како и повеќето други компоненти (со дополнителни стилови).

  1. <div class = „заглавие на страницата“ >
  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-gridдо верзијата 1.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-dismiss = "alert" > × </button>
  3. <strong> Предупредување! </strong> Најдобро проверете се, не изгледате премногу добро.
  4. </div>

Главите горе! Уредите со iOS бараат href="#"отфрлање на предупредувањата. Не заборавајте да го вклучите и атрибутот податоци за иконите за затворање на сидро. Алтернативно, можете да користите <button>елемент со атрибутот податоци, што се одлучивме да го направиме за нашите документи. Кога користите <button>, мора да вклучите type="button"или вашите формулари можеби нема да се достават.

Лесно проширете ја стандардната порака за предупредување со две изборни класи: .alert-blockза повеќе контроли за полнење и текст и .alert-headingза совпаѓање на насловот.

Предупредување!

Најдобро проверете се, не изгледате премногу добро. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Предупредување! </h4>
  4. Најдобро проверете се, не сте ...
  5. </div>

Контекстуални алтернативи Додајте изборни класи за да ја промените конотацијата на предупредувањето

Грешка или опасност

О, брзо! Променете неколку работи и обидете се повторно да поднесете.
  1. <div class = "предупредување-грешка за предупредување" >
  2. ...
  3. </div>

Успех

Добро сторено! Успешно ја прочитавте оваа важна порака за предупредување.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Информации

Главите горе! На ова предупредување му треба вашето внимание, но не е многу важно.
  1. <div class = "информации за предупредување за предупредување" >
  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" > × </button>

На уредите со iOS им е потребен href="#" за настани со кликнување ако повеќе користите сидро.

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