Главная » Bootstrap » Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

2014-11-14 / Вр:12:03 / просмотров: 17699

В этом уроке мы скачаем Bootstrap 3.0 с официального сайта и подключим файлы к главной странице.
Итак, приступим.

Шаг 1. Чтобы начать работать с фреймворком Bootstrap 3.0, нам нужно его скачать. Это можно сделать на официальном сайте.

https://getbootstrap.com/getting-started/

Нажмите на ссылку «Download Bootstrap» и укажите место на компьютере, куда нужно закачать архив:

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Шаг 2. Создайте папку, например, «Мой сайт на Bootstrap 3.0» и перенесите все файлы из архива в нее. У вас должно появиться три папки «css» , «js» , «fonts»:

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Шаг 3. Удаление ненужных файлов из Bootstrap 3.
Давайте просмотрим стандартную файловую структуру Bootstrap и удалим оттуда все ненужные файлы:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

Папка CSS

В папке CSS находится 6 файлов, но нам, по сути, нужен только один J.

bootstrap.css — этот css-файл содержит все готовые стили в удобной и читаемой форме. Вот этот файл нам и нужен. Его мы и будем подключать к нашему html-файлу.
bootstrap.css.map, bootstrap-theme.css.map — я эти файлы не использую, так как не знаю, для чего они нужны. Вы можете их удалить.
bootstrap-theme.css — это css-файл для готовой темы Bootstrap. Его можете тоже смело удалить.
bootstrap.min.css и bootstrap-theme.min.css — это точно такие же файлы как bootstrap.css (пункт №1) и bootstrap-theme.css (пункт №2), только в более неудобной и тяжело читаемой форме. Весят примерно на 30% меньше, чем bootstrap.css или bootstrap-theme.css. Лично я их не подключаю. Значит, я и их удаляю.

В итоге в папке CSS оставляете только файл bootstrap.css, все остальные удаляйте.

Папка fonts

В папке fonts хранятся 4 файла с одинаковым шрифтом, но с разными расширениями. Это нужно для того, чтобы шрифт показывался во всех браузерах. Здесь ничего не трогаем, идем в следующую папку.

Папка js

В папке js хранятся 2 файла, это bootstrap.js и bootstrap.min.js.
Как вы уже поняли, это два одинаковых файла, только bootstrap.js – полная версия, а bootstrap.min.js – сжатая. Удаляем файл bootstrap.min.js.

Итак, файл bootstrap.js – это набор готовых js-сценариев.

○ Давайте подведем итог по всем папкам.
В папке CSS один файл - bootstrap.css
В папке fonts четыре файла - glyphicons-halflings-regular.eot, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.svg и glyphicons-halflings-regular.woff.
В папке js один файл - bootstrap.js.

bootstrap/
├── css/
│ └── bootstrap.css
├── js/
│ └── bootstrap.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

Шаг 4. Теперь в папке «Мой сайт на Bootstrap 3.0» создайте файл «index.html» с кодировкой utf-8.

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Шаг 5. Откройте файл «index.html» текстовым редактором «Notepad++» и вставьте вот такой стандартный код, который предлагается на самом сайте Bootstrap:

<!DOCTYPE html>
<html lang="en">
  <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 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.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>
    <h1>Hello, world!</h1>

    <!-- 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.min.js"></script>
  </body>
</html>

В этом коде нужно сделать некоторые поправки для подключения bootstrap. Нам нужно в коде прописать правильный путь к файлам bootstrap.js и bootstrap.css.

Это будет выглядеть вот так:

<!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>
    <h1>Hello, world!</h1>

    <!-- 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>

В строке №10 мы подключили таблицу стилей «bootstrap.css»:

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

В строке №25 мы подключили файл со скриптами «bootstrap.js»:

<script src="js/bootstrap.js"></script>

В строке №23 мы подключили библиотеку jquery:

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

Сохраните файл.

В результате в браузере вы увидите вот такой результат:

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

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

[скачать Bootstrap3 с BlogGood.ru]