Похожие презентации:
Codecraft Bootstrap
1. Codecraft Bootstrap
Урок 32. Jumbotron
Внутри <div class=“container”>Класс .jumbotron
<div class=“jumbotron”>
3. Jumbotron
Снаружи <div class=“jumbotron”>...</div><div class=“container”>
4.
Класс .page-header5. Well
Класс .well6. Размеры .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-block14. Активные/Не активные кнопки
Классы .active.disabled
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>