Скачиваем, устанавливаем и подключаем Bootstrap 3

Прежде всего, надо скачать последнюю версию фреймворка (скачиваем первый файл, с остальными будем разбираться позже), в который уже входят стили css и js, скопировать Bootstrap в папку сайта, как показано на рисунке и распаковать.

установка bootstrap

Основным файлом будет index.html.

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

распаковка bootstrap

В корневую папку мы будем добавлять все файлы, которые нам понадобиться при создании сайта.

Первоначальная разметка будет выглядеть так:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="windows-1251">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Сайт о том, как я создаю свою первую страницу в Bootstrap">
    <meta name="keywords" content="сайт на Bootstrap, мой первый сайт">
    <meta name="author" content="">
    <title>Мой первый сайт Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Урра! Я сделал (или сделала) это!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Теперь рассмотрим каждую строку по отдельности, что они из себя представляют. Документ html5 в Bootstrap начинается с установления элемента DOCTYPE, который должен располагаться только в первой строке кода страницы.

<!DOCTYPE html>

Во второй строке определяется язык веб-страницы. В нашем случае надо писать ru.

<html lang="ru">

В разделе head указывается кодировка документа utf-8. Если вдруг русский не отображается, вместо букв знаки вопросов или непонятные символы вместо utf-8 можно указать windows-1251. Далее вписывается строка meta http-equiv, при помощи которой браузеры преобразовывают значение этого атрибута, которое задается с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера. Эта строка необходима для корректного отображения нашей страницы в IE.

<head>
    <meta charset="windows-1251">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

Следующая строка прописывается для корректного отображения страницы на мобильных устройствах, т.е. адаптивность к различным экранам.

<meta name="viewport" content="width=device-width, initial-scale=1">

В description content вписываем основное описание страницы, выражающее главную мысль, которую вы бы хотели донести до поисковиков.

<meta name="description" content="Сайт о том, как я создаю свою первую страницу в Bootstrap">

В keywords вписываются ключевые слова, которые отражают сущность страницы.

<meta name="keywords" content="сайт на Bootstrap, мой первый сайт">

Строка meta name="author” заполняется по желанию.

<meta name="author" content="">

Все, что написано между тегами title будет отображаться в строке браузера, поэтому надо кратко выразить название страницы, отражающее самую суть, желательно без предлогов и длинных выражений.

<title>Мой первый сайт Bootstrap</title>

Далее подключаем стили css, они у нас уже установлены в одноименной папке, поэтому указываем к ним путь.

<link href="css/bootstrap.min.css" rel="stylesheet">

Для того, чтобы адаптивная разметка работала и в Internet Explorer подключаем скрипт Respond.js. Этот Java скрипт позволяет использовать в верстке CSS3 media queries в тех браузерах, которые еще не поддерживают технологию адаптивного веб-дизайна. А самый отсталый у нас как всегда IE. Также подключаем скрипт html5shiv.js, который позволяет отображаться html5 в IE старше 9.

 <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

Скрипты поддержки браузерами можно подключить плагинами, которые устанавливаются в папку js, а можно прямо из библиотеки, как мы и сделали.

Закрываем тегом head.

</head>

Далее начинается непосредственно сама страница, которую необходимо разметить в соответствии с дизайном. Пока мы напишем одну фразу: «Урра! Я сделал или сделала это!»

<body>
    <h1>Урра! Я сделал (или сделала) это!</h1>

В конце страницы вписываем пути к библиотеке JQuery и Java скриптам, которые мы разместили в папке js

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

Закрываем тело страницы тегами body и html

   </body>
</html>

Вот и получилась наша первая страница сайта в Bootstrap, очень надеюсь, что после первого опыта у вас только укрепилось желание изучать этот фреймворк. В следующей записи будем делать разнообразные разметки страницы под любые цели и любой дизайн.

Очень надеюсь, что мои уроки помогут лучше понять верстку в Bootstrap, научат интерпретировать возможности фреймворка с полным пониманием всех вопросов.

comments powered by Disqus