Bootstrap: Быстрое создание современных сайтов. Тимур Машнин
Читать онлайн книгу.
me </label>
</div>
<button type=«submit» class=«btn btn-primary»> Submit </button>
</form>
</div>
</div>
</div>
</div>
С помощью класса class=«well well-sm» или класса class=«well well-lg» можно уменьшить или увеличить высоту well-контейнера соответственно:
<div class=«well well-sm»> Small Well </div>
<div class=«well»> Normal Well </div>
<div class=«well well-lg»> Large Well </div>
Bootstrap Alerts
Bootstrap Alerts представляют собой не диалоговые окна с сообщениями, а выделенные цветом блоки текста на странице, которые, однако, имеют кнопку закрытия.
Для создания сообщения Bootstrap Alert используется класс. alert с одним из четырех классов. alert-success,.alert-info,.alert-warning или. alert-danger, которые обеспечивают соответствующий цвет фона и шрифта текста.
<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>
Вышеуказанные классы могут применяться для элементов <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 обеспечивает