Компоненти

Десетки компоненти за многократна употреба са вградени в Bootstrap, за да осигурят навигация, предупреждения, изскачащи съобщения и много повече.

Групи бутони

Използвайте групи бутони, за да свържете няколко бутона заедно като един съставен компонент. Изградете ги с поредица от <a>или <button>елементи.

Най-добри практики

Препоръчваме следните насоки за използване на групи бутони и ленти с инструменти:

  • Винаги използвайте един и същ елемент в една група бутони <a>или <button>.
  • Не смесвайте бутони с различни цветове в една и съща група бутони.
  • Използвайте икони в допълнение или вместо текст, но не забравяйте да включите алтернативен и заглавен текст, където е подходящо.

Свързани групи бутони с падащи менюта (вижте по-долу) трябва да се извикват отделно и винаги да включват каретка за падащо меню, за да укаже желаното поведение.

Пример по подразбиране

Ето как изглежда 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">в <div class="btn-toolbar">за по-сложни компоненти.

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

Кутия за отметка и аромати на радиото

Групите бутони могат също да функционират като радиостанции, където само един бутон може да е активен, или квадратчета за отметка, където произволен брой бутони могат да бъдат активни. Вижте документите на Javascript за това.

Вземете javascript »

Падащи менюта в групи бутони

Горе главата! Бутоните с падащи менюта трябва да бъдат индивидуално опаковани в собствените си .btn-groupв рамките на .btn-toolbarза правилно изобразяване.

Падащи менюта с бутони

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

Използвайте който и да е бутон, за да задействате падащо меню, като го поставите в рамките на .btn-groupи предоставите правилното маркиране на менюто.

Примерно маркиране

Подобно на група бутони, нашето маркиране използва обикновено маркиране на бутони, но с няколко допълнения за усъвършенстване на стила и поддръжка на плъгина jQuery за падащо меню на Bootstrap.

  1. <div class = "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 class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- връзки към падащото меню -->
  5. </ul>
  6. </div>

Примерно маркиране

Разширяваме падащите менюта с нормални бутони, за да предоставим второ действие на бутона, което работи като отделен тригер за падащо меню.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Действие </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  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. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  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 = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Предишна </a></li>
  4. <li class = "active" >
  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 клас = "предишен" >
  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 предоставя лек, гъвкав компонент, наречен hero unit, за показване на съдържание на вашия сайт. Работи добре на маркетингови и богати на съдържание сайтове.

Маркиране

Опаковайте съдържанието си divтака:

  1. <div class = "hero-unit" >
  2. <h1> Заглавие </h1>
  3. <p> Слоган </p>
  4. <p>
  5. <a class = "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-gridдо v1.4) са страхотни за мрежи от снимки или видеоклипове, резултати от търсене на изображения, продукти на дребно, портфолио и много други. Те могат да бъдат връзки или статично съдържание.

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

Маркирането на миниатюри е просто – всичко, което е необходимо, е a ulс произволен брой елементи. liОсвен това е супер гъвкав, позволяващ всякакъв тип съдържание само с малко повече маркиране, за да обвие вашето съдържание.

Използва размери на колони от мрежата

И накрая, компонентът за миниатюри използва съществуващи класове на мрежова система - като .span2или .span3- за контрол на размерите на миниатюрите.

Маркирането

Както бе споменато по-рано, необходимото маркиране за миниатюри е леко и ясно. Ето преглед на настройката по подразбиране за свързани изображения :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

За персонализирано HTML съдържание в миниатюри маркирането се променя леко. За да позволим съдържание на ниво блок навсякъде, ние заменяме <a>с <div>подобно така:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  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 = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Предупреждение! </strong> Най-добре е да проверите себе си, не изглеждате много добре.
  4. </div>

Горе главата! Устройствата с iOS изискват href="#"за отхвърляне на предупреждения. Не забравяйте да включите него и атрибута data за икони за затваряне на котва. Като алтернатива можете да използвате <button>елемент с атрибута data, което сме избрали да направим за нашите документи. Когато използвате <button>, трябва да включите type="button"или вашите формуляри може да не бъдат изпратени.

Лесно разширете стандартното предупредително съобщение с два незадължителни класа: .alert-blockза повече подложки и текстови контроли и .alert-headingза съответстващо заглавие.

Внимание!

Най-добре проверете себе си, не изглеждате много добре. Nulla vitae elit libero, a 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 = "alert alert-error" >
  2. ...
  3. </div>

Успех

Много добре! Успешно прочетохте това важно предупредително съобщение.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Информация

Горе главата! Този сигнал се нуждае от вашето внимание, но не е особено важен.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Примери и маркиране

Основен

Лента за напредък по подразбиране с вертикален градиент.

  1. <div class = "напредък" >
  2. <div class = "bar"
  3. style = " ширина : 60 %; " ></div>
  4. </div>

Раирана

Използва градиент за създаване на раиран ефект (без IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " ширина : 20 %; " ></div>
  4. </div>

Анимиран

Взема примера с ивици и го анимира (без IE).

  1. <div class = "напредък напредък-ивици
  2. активен" >
  3. <div class = "bar"
  4. style = " ширина : 40 %; " ></div>
  5. </div>

Опции и поддръжка на браузър

Допълнителни цветове

Лентите за напредъка използват някои от едни и същи бутони и класове за предупреждение за последователни стилове.

Раирани барове

Подобно на плътните цветове, имаме разнообразни ленти за прогрес.

Поведение

Лентите за напредъка използват CSS3 преходи, така че ако динамично регулирате ширината чрез javascript, тя плавно ще преоразмерява.

Ако използвате .activeкласа, вашите .progress-stripedленти за напредък ще анимират ивиците отляво надясно.

Поддръжка на браузър

Лентите за напредък използват CSS3 градиенти, преходи и анимации, за да постигнат всичките си ефекти. Тези функции не се поддържат в IE7-9 или по-стари версии на Firefox.

Opera и IE не поддържат анимации в момента.

Уелс

Използвайте кладенеца като прост ефект върху елемент, за да му придадете ефект на вмъкване.

Виж, в кладенец съм!
  1. <div class = "well" >
  2. ...
  3. </div>

Икона за затваряне

Използвайте общата икона за затваряне, за да отхвърлите съдържание като модални и сигнали.

  1. <button class = "close" > × </button>

Устройствата с iOS изискват href="#" за събития с кликване, ако предпочитате да използвате котва.

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