Десетки компоненти за многократна употреба, създадени да предоставят навигация, предупреждения, изскачащи съобщения и др.
Превключваемо контекстно меню за показване на списъци с връзки. Направено интерактивно с плъгина за падащ javascript .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Действие </a></li>
- <li><a tabindex = "-1" href = "#" > Друго действие </a></li>
- <li><a tabindex = "-1" href = "#" > Нещо друго тук </a></li>
- <li class = "divider" ></li>
- <li><a tabindex = "-1" href = "#" > Разделена връзка </a></li>
- </ul>
Гледайки само падащото меню, ето необходимия HTML. Трябва да обвиете тригера на падащото меню и падащото меню в .dropdown
или друг елемент, който декларира position: relative;
. След това просто създайте менюто.
- <div class = "dropdown" >
- <!-- Връзка или бутон за превключване на падащото меню -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Действие </a></li>
- <li><a tabindex = "-1" href = "#" > Друго действие </a></li>
- <li><a tabindex = "-1" href = "#" > Нещо друго тук </a></li>
- <li class = "divider" ></li>
- <li><a tabindex = "-1" href = "#" > Разделена връзка </a></li>
- </ul>
- </div>
Подравнете менютата отдясно и добавете, включете допълнителни нива на падащи менюта.
Добавяне .pull-right
към a .dropdown-menu
за подравняване на падащото меню вдясно.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Добавете допълнително ниво на падащи менюта, появяващи се при задържане на мишката като тези на OS X, с някои прости добавки за маркиране. Добавете .dropdown-submenu
към всяко li
в съществуващо падащо меню за автоматично оформяне.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "падащо подменю" >
- <a tabindex = "-1" href = "#" > Още опции </a>
- <ul class = "падащо меню" >
- ...
- </ul>
- </li>
- </ul>
Проста пагинация, вдъхновена от Rdio, чудесна за приложения и резултати от търсене. Големият блок е трудно да се пропусне, лесно се мащабира и осигурява големи области за щракване.
- <div class = "pagination" >
- <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
за връзки, върху които не можете да щракнете, и .active
за обозначаване на текущата страница.
- <div class = "pagination " >
- <ul>
- <li class = "disabled" ><a href = "#" > Предишна </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Добавете един от два незадължителни класа, за да промените подравняването на връзките за страници: .pagination-centered
и .pagination-right
.
- <div class = "pagination pagination-centered" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </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>
Пейджър връзките също използват общия .disabled
полезен клас от пагинацията.
- <ul class = "pager" >
- <li class = "previous disabled" >
- <a href = "#" > ← По-стари </a>
- </li>
- ...
- </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> |
Име | Пример | Маркиране |
---|---|---|
По подразбиране | 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> |
Лек, гъвкав компонент за показване на ключово съдържание на вашия сайт. Работи добре на маркетингови и богати на съдържание сайтове.
Това е проста геройска единица, прост компонент в стил jumbotron за привличане на допълнително внимание към представено съдържание или информация.
- <div class = "hero-unit" >
- <h1> Заглавие </h1>
- <p> Слоган </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Научете повече
- </a>
- </p>
- </div>
Проста обвивка за h1
подходящо разпределяне и сегментиране на секции от съдържание на страница. Може да използва елемента по h1
подразбиране small
, както и повечето други компоненти (с допълнителни стилове).
- <div class = "page-header" >
- <h1> Примерен колонтитул на страница </h1>
- </div>
По подразбиране миниатюрите на Bootstrap са проектирани да показват свързани изображения с минимално необходимо маркиране.
С малко допълнително маркиране е възможно да добавите всякакъв вид HTML съдържание като заглавия, параграфи или бутони в миниатюри.
Миниатюрите (преди това .media-grid
до v1.4) са страхотни за мрежи от снимки или видеоклипове, резултати от търсене на изображения, продукти на дребно, портфолио и много други. Те могат да бъдат връзки или статично съдържание.
Маркирането на миниатюри е просто – всичко, което е необходимо, е a ul
с произволен брой елементи. li
Освен това е супер гъвкав, позволяващ всякакъв тип съдържание само с малко повече маркиране, за да обвие вашето съдържание.
И накрая, компонентът за миниатюри използва съществуващи класове на мрежова система - като .span2
или .span3
- за контрол на размерите на миниатюрите.
Както бе споменато по-рано, необходимото маркиране за миниатюри е леко и ясно. Ето преглед на настройката по подразбиране за свързани изображения :
- <ul class = "thumbnails" >
- <li class = "span4" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
За персонализирано HTML съдържание в миниатюри маркирането се променя леко. За да позволим съдържание на ниво блок навсякъде, ние заменяме <a>
с <div>
подобно така:
- <ul class = "thumbnails" >
- <li class = "span4" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Етикет с миниатюра </h3>
- <p> Надпис с миниатюра... </p>
- </div>
- </li>
- ...
- </ul>
Разгледайте всичките си възможности с различните класове на мрежата, достъпни за вас. Можете също да смесвате и комбинирате различни размери.
Обвийте произволен текст и опционален бутон за отхвърляне .alert
за основно предупредително предупредително съобщение.
- <div class = "alert" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Предупреждение! </strong> Най-добре е да проверите себе си, не изглеждате много добре.
- </div>
Браузърите Mobile Safari и Mobile Opera, в допълнение към data-dismiss="alert"
атрибута, изискват href="#"
за отхвърляне на предупреждения при използване на <a>
етикет.
- <a href = "#" class = "close" data-dismiss = "alert" > × </button>
Като алтернатива можете да използвате <button>
елемент с атрибута data, което сме избрали да направим за нашите документи. Когато използвате <button>
, трябва да включите type="button"
или вашите формуляри може да не бъдат изпратени.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Използвайте приставката за предупреждения jQuery за бързо и лесно отхвърляне на предупреждения.
За по-дълги съобщения увеличете подложката в горната и долната част на обвивката на предупреждението, като добавите .alert-block
.
Най-добре проверете себе си, не изглеждате много добре. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Внимание! </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 = " width : 60 %; " ></div>
- </div>
Използва градиент за създаване на раиран ефект. Не се предлага в IE7-8.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " width : 20 %; " ></div>
- </div>
Добавете .active
към .progress-striped
, за да анимирате ивиците отдясно наляво. Не се предлага във всички версии на IE.
- <div class = "progress progress-striped active" >
- <div class = "bar" style = " width : 40 %; " ></div>
- </div>
Поставете няколко ленти в една и съща .progress
, за да ги подредите.
- <div class = "напредък" >
- <div class = "bar bar-success" style = " width : 35 %; " ></div>
- <div class = "bar bar-warning" style = " width : 20 %; " ></div>
- <div class = "bar bar-danger" style = " width : 10 %; " ></div>
- </div>
Лентите за напредъка използват някои от едни и същи бутони и класове за предупреждение за последователни стилове.
- <div class = "информация за прогреса на напредъка" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "прогрес прогрес-успех" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "предупреждение за напредъка на напредъка" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "прогрес прогрес-опасност" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Подобно на плътните цветове, имаме разнообразни ленти за прогрес.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress progress-success progress-striped" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-danger progress-striped" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Лентите за напредък използват CSS3 градиенти, преходи и анимации, за да постигнат всичките си ефекти. Тези функции не се поддържат в IE7-9 или по-стари версии на Firefox.
Версии, по-стари от Internet Explorer 10 и Opera 12, не поддържат анимации.
Използвайте кладенеца като прост ефект върху елемент, за да му придадете ефект на вмъкване.
- <div class = "well" >
- ...
- </div>
Контролирайте подложките и заоблените ъгли с два незадължителни класа модификатори.
- <div class = "добре добре-голямо" >
- ...
- </div>
- <div class = "добре добре-малък" >
- ...
- </div>
Използвайте общата икона за затваряне, за да отхвърлите съдържание като модални и сигнали.
- <button class = "close" > × </button>
Устройствата с iOS изискват href="#" за събития с кликване, ако предпочитате да използвате котва.
- <a class = "close" href = "#" > × </a>
Прости, фокусирани класове за малки настройки на дисплея или поведението.
Плаване на елемент наляво
- клас = "дърпане-наляво"
- . дръпнете - наляво {
- float : ляво ;
- }
Плаване на елемент надясно
- клас = "дърпане надясно"
- . дръпнете - надясно {
- float : надясно ;
- }
Променете цвета на елемент на#999
- клас = "заглушен"
- . заглушен {
- цвят : #999;
- }
Изчистете на float
всеки елемент
- клас = "clearfix"
- . clearfix {
- * мащабиране : 1 ;
- &: преди ,
- &: след {
- дисплей : маса ;
- съдържание : "" ;
- }
- &: след {
- ясно : и двете ;
- }
- }