Codecraft Bootstrap
Jumbotron
Jumbotron
Well
Размеры .well
Сообщения .alert
Сообщения .alert со ссылкой
Закрытие сообщений
Анимированные сообщения
Bootstrap buttons - кнопки
Bootstrap buttons - кнопки
Bootstrap buttons - кнопки
Активные/Не активные кнопки
Домашнее Задание
447.79K
Категория: ПрограммированиеПрограммирование

Codecraft Bootstrap

1. Codecraft Bootstrap

Урок 3

2. Jumbotron

Внутри <div class=“container”>
Класс .jumbotron
<div class=“jumbotron”>

3. Jumbotron

Снаружи <div class=“jumbotron”>...</div>
<div class=“container”>

4.

Класс .page-header

5. Well

Класс .well

6. Размеры .well

Классы .well-sm
.well-lg

7. Сообщения .alert

<div class="alert alert-***"> текст сообщения </div>
Класс .alert
<div class="alert"> текст сообщения </div>
Классы: alert-success
alert-info
alert-warning
alert-danger

8. Сообщения .alert со ссылкой

Класс .alert-link
<div class="alert alert-success">
текст <a href="#" class="alert-link">сообщения</a>
</div>

9. Закрытие сообщений

<a href="#" class=“close" data-dismiss=“alert” arialabel=“close”>x</a>
<div class="alert alert-success alert-dismissable">
<a href="#" class=“close" data-dismiss=“alert” aria-label=“close”>x</a>
текст <a href="#" class="alert-link">сообщения</a>
</div>

10. Анимированные сообщения

Классы .fade .in
<div class="alert alert-success fade in">...</div>

11. Bootstrap buttons - кнопки

.btn-default
.btn-primary
Пример:
<button type="button" class="btn btn-default">
Default</button>
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Можно использовать
<a>, <button>, или <input>

12. Bootstrap buttons - кнопки

Размеры:
.btn-lg
.btn-md
.btn-sm
.btn-xs
Пример:
<button type="button" class="btn btn-primary btn-lg">Large</button>

13. Bootstrap buttons - кнопки

Класс .btn-block

14. Активные/Не активные кнопки

Классы .active
.disabled
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

15. Домашнее Задание

English     Русский Правила