BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

http://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.

  1. bootstrap.css — этот css-файл содержит все готовые стили в удобной и читаемой форме. Вот этот файл нам и нужен. Его мы и будем подключать к нашему html-файлу.
  2. bootstrap.css.map, bootstrap-theme.css.map — я эти файлы не использую, так как не знаю, для чего они нужны. Вы можете их удалить.
  3. bootstrap-theme.css — это css-файл для готовой темы Bootstrap. Его можете тоже смело удалить.
  4. 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]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Юра

    как то ты опрометчиво поступаешь – удаляя файлы, не зная для чего они нужны, а вдруг в какой то момент они понадобятся и оп….

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 761
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4183