Уроки Bootstrap 3.0 для начинающих (3-й урок) – контейнер
Опубликовано: 01.09.2018
Для начала давайте выясним, что называют «контейнером» для сайта ?
Контейнером для сайта называют территорию, в которой находятся все блоки сайта (блок меню, блок контента, футер и т.д.). На примере снизу четко видно где контейнер (я указал его зеленным цветом), а где блоки (блоки синим).
В Bootstrap 3.0. контейнер обозначается классом « container » .
Пример:
<div class="container"> … </div>Давайте пропишем класс « container » к нашему файлу « index.html ».
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template на BlogGood.ru</title> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Hello, world!</h1> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.js"></script> </body> </html>Если вы запустите файл « index.html », то увидите, как весь сайт со всем его содержимым автоматически разместится по центру экрана.
Результат:
Хочу заметить, что контейнер в Bootstrap 0.3 всегда резиновый, и вы в этом можете убедиться сами. Давайте пропишем границы для контейнера, чтобы видеть, что он полностью меняется под размер экрана.
<div class="container" style="border:1px solid #000;" > … </div>Вот так это выглядит в коде:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template на BlogGood.ru</title> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container" style="border:1px solid #000;" > <h1>Hello, world!</h1> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.js"></script> </body> </html>Результат:
Вот и все! В следующем уроке вы познакомитесь с таким понятием как сетка в Bootstrap и сможете уже сами создать простенький макет адаптированный под любой размер экранов компьютеров или телефонов.
Не пропустите следующих уроков, если вам это интересно!
Жмите на кнопки соц. сетей, чтобы я видел и знал, что урок был полезен.Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: Bootstrap , основы
