Изображение 1 из 3
Чтобы найти этот шаблон, посетите главную страницу Bootstrap и нажмите ссылку «Начало работы» вверху. Нажмите «Базовый шаблон» в меню слева, и вы увидите фрагмент HTML. Скопируйте и вставьте это в свой HTML-редактор и сохраните в папке веб-сайта как index.html. Откройте файл в браузере, чтобы увидеть свою первую страницу Bootstrap.
Если это выглядит удручающе обыденно, то это потому, что мы еще не использовали какие-либо компоненты Bootstrap: наш «Hello world!» сообщение просто использует стандартный тег заголовка. Мы можем сделать его более интересным, поместив его внутри элемента div, который использует класс «well» Bootstrap. Для этого мы просто заключаем наш текст в подходящие теги div следующим образом:
Сохраните изменения и перезагрузите страницу: вы увидите, что заголовок теперь утоплен в углубление на сером фоне. Вы можете использовать этот класс везде, где хотите придать элементам страницы дополнительную значимость. Bootstrap также предоставляет два модификатора, которые можно использовать для указания большего или меньшего отступа по краям вашего колодца: вы можете написать
class="ну очень большой" или class="ну-ну-маленький".Давайте будем более амбициозными: разместим наш заголовок на панели с описательным текстом и кнопкой призыва к действию. Bootstrap называет это «героем». Чтобы реализовать это, замените тело вашего HTML-файла этим кодом:
Сохраните это и загрузите в свой браузер, чтобы увидеть эффект. Вы увидите, что кнопка реагирует, когда вы наводите на нее указатель мыши и нажимаете на нее, хотя она пока никуда не ведет, поскольку мы ничего к ней не привязали.
Мы можем сделать эту кнопку более заметной, используя модификаторы, как и в случае с колодцем. Чтобы увеличить его и придать немного цвета, измените класс тега с «кстати» к «btn btn-первичный btn-большой». Bootstrap поддерживает все стили кнопок разных размеров, цветов и расположений: в онлайн-документации описаны различные свойства, которые можно применить.
Использование сетки
Код, который мы создали на данный момент, занимает всю ширину окна вашего браузера. Однако концептуально Bootstrap делит вашу рабочую область на сетку из 12 столбцов, размер которой по умолчанию составляет 940 пикселей. Это позволяет легко создавать более структурированные макеты, имеющие хороший визуальный смысл, даже если вы не дизайнер.
Чтобы увидеть это в действии, давайте создадим один столбец с заголовком, текстом и стандартной кнопкой. Добавьте этот код сразу после окончания раздела «hero unit»:
Загрузите это в свой браузер, и вы снова увидите, что заголовок и текст растягиваются по всему браузеру. (HTML-код Рако создает удобный символ двойной стрелки.) Это потому, что мы указали «пролет12» class, что означает, что содержимое этого div будет охватывать все 12 столбцов. Изменять «пролет12» к «пролет6», перезагрузите страницу и посмотрите, что произойдет. Заголовок и текст теперь занимают ровно половину ширины браузера.
