Десетки компоненти за многократна употреба са вградени в Bootstrap, за да осигурят навигация, предупреждения, изскачащи съобщения и много повече.
Изключително опростена и минималистична пагинация, вдъхновена от Rdio, чудесна за приложения и резултати от търсене. Големият блок е трудно да се пропусне, лесно се мащабира и осигурява големи области за щракване.
Връзките могат да се персонализират и работят при редица обстоятелства с правилния клас. .disabled
за връзки, върху които не може да се кликне, и .active
за текуща страница.
Добавете един от два незадължителни класа, за да промените подравняването на връзките за страници: .pagination-centered
и .pagination-right
.
Компонентът за страниране по подразбиране е гъвкав и работи в редица варианти.
Обвито в <div>
, пагинацията е просто <ul>
.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > Предишна </a></li>
- <li class = "active" >
- <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>
Компонентът за пейджър е набор от връзки за прости реализации на страници с леко маркиране и дори по-леки стилове. Страхотен е за прости сайтове като блогове или списания.
По подразбиране пейджърът центрира връзките.
- <ul class = "pager" >
- <li>
- <a href = "#" > Предишен </a>
- </li>
- <li>
- <a href = "#" > Напред </a>
- </li>
- </ul>
Като алтернатива можете да подравните всяка връзка към страните:
- <ul class = "pager" >
- <li клас = "предишен" >
- <a href = "#" > ← По-стари </a>
- </li>
- <li class = "следващ" >
- <a href = "#" > По-нов → </a>
- </li>
- </ul>
Етикети | Маркиране |
---|---|
По подразбиране | <span class="label">Default</span> |
Нов | <span class="label label-success">New</span> |
Внимание | <span class="label label-warning">Warning</span> |
важно | <span class="label label-important">Important</span> |
Информация | <span class="label label-info">Info</span> |
По подразбиране миниатюрите на Bootstrap са проектирани да показват свързани изображения с минимално необходимо маркиране.
С малко допълнително маркиране е възможно да добавите всякакъв вид HTML съдържание като заглавия, параграфи или бутони в миниатюри.
Миниатюрите (преди това .media-grid
до v1.4) са страхотни за мрежи от снимки или видеоклипове, резултати от търсене на изображения, продукти на дребно, портфолио и много други. Те могат да бъдат връзки или статично съдържание.
Маркирането на миниатюри е просто – всичко, което е необходимо, е a ul
с произволен брой елементи. li
Освен това е супер гъвкав, позволяващ всякакъв тип съдържание само с малко повече маркиране, за да обвие вашето съдържание.
И накрая, компонентът за миниатюри използва съществуващи класове на мрежова система - като .span2
или .span3
- за контрол на размерите на миниатюрите.
Както бе споменато по-рано, необходимото маркиране за миниатюри е леко и ясно. Ето преглед на настройката по подразбиране за свързани изображения :
- <ul class = "thumbnails" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
За персонализирано HTML съдържание в миниатюри маркирането се променя леко. За да позволим съдържание на ниво блок навсякъде, ние заменяме <a>
с <div>
подобно така:
- <ul class = "thumbnails" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Етикет с миниатюра </h5>
- <p> Надпис на миниатюра точно тук... </p>
- </div>
- </li>
- ...
- </ul>
С Bootstrap 2 опростихме базовия клас: .alert
вместо .alert-message
. Ние също така намалихме минимално изискваното маркиране - не <p>
се изисква по подразбиране, само външният <div>
.
За по-издръжлив компонент с по-малко код премахнахме диференциращия външен вид за предупреждения за блокиране, съобщения, които идват с повече подложки и обикновено повече текст. Класът също е променен на .alert-block
.
Bootstrap идва със страхотен плъгин jQuery, който поддържа предупредителни съобщения, което прави отхвърлянето им бързо и лесно.
Опаковайте вашето съобщение и незадължителна икона за затваряне в div с прост клас.
- <div class = "alert" >
- <a class = "close" > × </a>
- <strong> Предупреждение! </strong> Най-добре е да проверите себе си, не изглеждате много добре.
- </div>
Лесно разширете стандартното предупредително съобщение с два незадължителни класа: .alert-block
за повече подложки и текстови контроли и .alert-heading
за съответстващо заглавие.
Най-добре проверете себе си, не изглеждате много добре. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <a class = "close" > × </a>
- <h4 class = "alert-heading" > Предупреждение! </h4>
- Най-добре проверете себе си, не сте...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Лента за напредък по подразбиране с вертикален градиент.
- <div class = "напредък" >
- <div class = "bar"
- style = " ширина : 60 %; " ></div>
- </div>
Използва градиент за създаване на раиран ефект.
- <div class = "информация за напредъка
- прогрес-раиран" >
- <div class = "bar"
- style = " ширина : 20 %; " ></div>
- </div>
Взема раирания пример и го анимира.
- <div class = "напредък прогрес-опасност
- активен с прогресивно райе" >
- <div class = "bar"
- style = " ширина : 40 %; " ></div>
- </div>
Лентите за напредъка използват някои от същите имена на класове като бутони и сигнали за подобен стил.
.progress-info
.progress-success
.progress-danger
Като алтернатива можете да персонализирате LESS файловете и да навиете свои собствени цветове и размери.
Лентите за напредъка използват CSS3 преходи, така че ако динамично регулирате ширината чрез javascript, тя плавно ще преоразмерява.
Ако използвате .active
класа, вашите .progress-striped
ленти за напредък ще анимират ивиците отляво надясно.
Лентите за напредък използват CSS3 градиенти, преходи и анимации, за да постигнат всичките си ефекти. Тези функции не се поддържат в IE7-8 или по-стари версии на Firefox.
В момента Opera не поддържа анимации.
Използвайте кладенеца като прост ефект върху елемент, за да му придадете ефект на вмъкване.
- <div class = "well" >
- ...
- </div>
Използвайте общата икона за затваряне, за да отхвърлите съдържание като модални и сигнали.
- <a class = "close" > × </a>