Bootstrap: Быстрое создание современных сайтов

Тимур Машнин

Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web-разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS, для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном», одинаково хорошо выглядящие на всех типах устройств, от небольших телефонов до настольных компьютеров.

Bootstrap Wells

С помощью класса. well можно добавить ощущение глубины элементу или контейнеру.

<div class=«container»>

<div class=«row»>

<div class=«col-xs-6 well»>

some data

</div>

<div class=«col-xs-6 well»>

some data

</div>

</div>

</div>

<div class=«container-fluid»>

<div class=«row»>

<div class=«col-xs-12»>

<div class=«well» id=«left-well»>

<form role=«form»>

<div class=«form-group»>

<label for=«email»> Email address: </label>

<input type=«email» class=«form-control» id=«email»>

</div>

<div class=«form-group»>

<label for=«pwd»> Password: </label>

<input type=«password» class=«form-control» id=«pwd»>

</div>

<div class=«checkbox»>

<label> <input type=«checkbox»> Remember 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>