Bootstrap: Быстрое создание современных сайтов
Шрифт:
<div class=«well well-lg»> Large Well </div>
Bootstrap Alerts
Bootstrap Alerts представляют собой не диалоговые окна с сообщениями, а выделенные цветом блоки текста на странице, которые, однако, имеют кнопку закрытия.
Для создания сообщения Bootstrap Alert используется класс. alert с одним из четырех
<div class=«alert alert-success»>
<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> × </a>
<strong> Success! </strong> This alert box could indicate a successful or positive action.
</div>
<div class=«alert alert-info»>
<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> × </a>
<strong> Info! </strong> This alert box could indicate a neutral informative change or action.
</div>
<div class=«alert alert-warning»>
<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> × </a>
<strong> Warning! </strong> This alert box could indicate a warning that might need attention.
</div>
<div class=«alert alert-danger»>
<a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> × </a>
<strong> Danger! </strong> This alert box could indicate a dangerous or potentially negative action.
</div>
Кнопку закрытия при этом обеспечивает элемент <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> × </a>.
Дополнительно класс class=«alert alert-success fade in» добавляет анимацию при закрытии сообщения.
Нажатие кнопки закрытия можно обрабатывать с помощью Javascript.
<div class=«alert alert-success» id=«myAlert»>
<a href=«#» class=«close»> × </a>
<strong> Success! </strong> This alert box could indicate a successful or positive action.
</div>
<script>
$(document).ready (function {
$(".close").click (function {
$("#myAlert").alert («close»);
});
});
</script>
С помощью класса. alert-link вместо текста сообщения можно вставлять ссылку.
<div class=«alert alert-info»>
<a href=«#» class=«close» data-dismiss=«alert» aria-label = «close»> × </a>
<a href = «#» class = «alert-link»> <strong> Info! </strong>
This alert box could indicate a neutral informative change or action.
</a>
</div>
Кнопки
Для создания стилизованной цветом кнопки используется класс. btn совместно с одним из классов. btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link.
<button type=«button» class=«btn btn-default»> Default </button>
<button type=«button» class=«btn btn-primary»> Primary </button>
<button type=«button» class=«btn btn-success»> Success </button>
<button type=«button» class=«btn btn-info»> Info </button>
<button type=«button» class=«btn btn-warning»> Warning </button>
<button type=«button» class=«btn btn-danger»> Danger </button>
<button type=«button» class=«btn btn-link»> Link </button>
< image l:href="#"/>Вышеуказанные классы могут применяться для элементов <a>, <button>, <input>.
<button type=«button» class=«btn btn-default»> Default </button>
<input type=«button» class=«btn btn-primary» value=«Primary»> </input>
<a type=«button» class=«btn btn-success»> Success </a>
Дополнительно классы. btn-lg,.btn-md,.btn-sm,.btn-xs регулируют размер кнопки.
<button type=«button» class=«btn btn-primary btn-lg»> Large </button>
<button type=«button» class=«btn btn-primary btn-md»> Medium </button>
<button type=«button» class=«btn btn-primary btn-sm»> Small </button>
<button type=«button» class=«btn btn-primary btn-xs»> XSmall </button>
Дополнительно класс. btn-block обеспечивает 100% ширину кнопки.
<button type=«button» class=«btn btn-primary btn-lg btn-block»> Button </button>
Класс. active переводит кнопку в нажатое состояние.
Класс. disabled делает кнопку некликабельной.
<button type=«button» class=«btn btn-primary disabled»> Disabled Primary </button>
Для смещения и центрирования кнопок дополнительно применяются классы. pull-left,.pull-right,.center-block.