Уроки Bootstrap 3.0 для начинающих (Второй урок)

Во-втором уроке я разберу контейнер.

Контейнер

Контейнером в шаблонах называют область в которой располагаются все блоки сайта. Допустим у нас есть такой шаблон

container-bootstrap

Контейнером будет то, что находится в красной раме. В 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 увидите следующее

container-bootstrap-3

Думаю с контейнером все понятно. Выкладываю готовый пример — Скачать

Продолжение в третьем уроке