Десятки багаторазових компонентів, створених для навігації, сповіщень, спливаючих вікон тощо.
Перемикається контекстне меню для відображення списків посилань. Зроблено інтерактивним за допомогою спадного плагіна 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 = "dropdown-submenu" >
- <a tabindex = "-1" href = "#" > Додаткові параметри </a>
- <ul class = "dropdown-menu" >
- ...
- </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 class = "попередній" >
- <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
до версії 1.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 = "progress" >
- <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 = "progress" >
- <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 = "progress progress-info" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress progress-success" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-danger" >
- <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 = "well well-small" >
- ...
- </div>
Використовуйте загальну піктограму закриття, щоб відхилити такий вміст, як моди та сповіщення.
- <button class = "close" > × </button>
Пристрої iOS вимагають href="#" для подій клацання, якщо ви віддаєте перевагу використанню прив’язки.
- <a class = "close" href = "#" > × </a>
Прості, цілеспрямовані класи для невеликих налаштувань дисплея або поведінки.
Перемістити елемент ліворуч
- class = "pull-left"
- . тягнути вліво { _
- float : ліворуч ;
- }
Перемістити елемент праворуч
- class = "тягнути праворуч"
- . потягнути вправо { _
- float : праворуч ;
- }
Змінити колір елемента на#999
- class = "muted"
- . приглушений {
- колір : #999;
- }
Очистіть float
будь-який елемент
- class = "clearfix"
- . clearfix {
- * масштаб : 1 ;
- &: до ,
- &: після {
- дисплей : таблиця ;
- зміст : "" ;
- }
- &: після {
- ясно : обидва ;
- }
- }