Во-втором уроке я разберу контейнер.
Контейнер
Контейнером в шаблонах называют область в которой располагаются все блоки сайта. Допустим у нас есть такой шаблон
Контейнером будет то, что находится в красной раме. В bootstrap 3.0. контейнер обозначается классом container.
Приступаем к практике
Создайте в папке css файл с названием dopstyle и расширением css (dopstyle.css). В этом файле мы будем описывать все стили, которые будут создаваться для нашего шаблона. Подключаем этот файл в index.html. После подключения код должен выглядеть так
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/dopstyle.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Теперь создадим контейнер куда будем размещать весь наш сайт. Для того чтобы создать контейнер с помощью Bootstrap нужно создать блок div с классом container. Я поместил тег h1 в контейнер с помощью кода
<div class="container"> <h1>Hello, world!</h1> </div>
После добавления контейнера код должен выглядеть так.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/dopstyle.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Теперь если запустить index.html весь сайт автоматически разместится по центру.
Чтобы увидеть границы контейнера добавим свой класс рядом классом container я его назову border-container
<div class="container border-container"> <h1>Hello, world!</h1> </div>
Открываем файл dopstyle.css и добавляем стиль .border-container
.border-container{
border:1px solid red;
}
Этот стиль поможет увидеть границы контейнера. Если обновить страницу index.html увидите следующее
Думаю с контейнером все понятно. Выкладываю готовый пример — Скачать
Продолжение в третьем уроке
Информативный урок…
Не хватает ссылки на следующий урок
а каким образом определяется ширина и высота контейнера?
Высота определяется содержимым, а ширина зависит от выбранного режима, если выбран режим «responsive» — ширина будет резиновой, а так ширина имеет плавающее значение (есть максимум) . В третьем уроке приведена таблица http://pro-cod.ru/uroki-bootstrap-3-0-dlya-nachinayushhix-tretij-urok.html
Не «разрешением», а «расширением», Сразу как-то доверие к профессионализму автора пропадает.
Спасибо, исправил.
Спасибо за статью. «Теперь если запустить index.html весь сайт автоматический разместится по центру.» Не автоматический, а автоматически.
Автор! Спасибо тебе за уроки! Очень четко, ясно и понятно! Желаю тебе процветания! =)))
Очень понятно и доступно написано, для начинающих самое то!!!