StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
19.05.2016
10:12
12762
5
Подключение. Основы bootstrap 3 для начинающих. Урок №2
Всем привет!
Вот и пришло время продолжить изучать основы «bootstrap 3».
Не пропустите новые уроки бесплатного курса по основам создания веб страницы на «bootstrap 3».
Пришло время рассказать, где скачать «bootstrap 3» и как им вообще пользоваться.
Думаю, для удобства стоит все разбить пошагово.
Список шагов:
- Скачиваем «bootstrap 3»
- Подготовка (распаковка, удаление лишнего)
- Создание файла «index.html» и подключение файлов
Шаг 1. Скачиваем «bootstrap 3»
Фреймворк «bootstrap 3» можно бесплатно скачать с моего блога:
[скачать bootstrap 3 с StepkinBLOG.RU]
Либо скачать с официального сайта:
Если вы выбрали скачивание с официального сайта, то когда вы там окажетесь, жмите на ссылку «Download Bootstrap» и укажите место на компьютере, куда нужно закачать архив с «bootstrap 3»:
Шаг 2. Подготовка (распаковка, удаление лишнего)
Теперь создайте на вашем ПК папку, где будете проводить различные опыты с файлами «bootstrap 3», это будет ваш личный полигон для испытаний и прохождения изучения основ «bootstrap 3».
Я назову папку «Полигон для bootstrap 3». Рекомендую назвать также. Чтобы у нас не было расхождений в названиях, и вы со мной шли шаг в шаг.
Итак, в папку «Полигон для bootstrap 3» распакуйте архив с файлами «bootstrap 3».
В результате в папке «Полигон для bootstrap 3» должны быть только три папки «CSS», «js» и «fonts»:
Рассмотрим теперь каждую папку от «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
Внимание: если вы качали «Bootstrap 3» с официального сайта, возможно, что файлов уже будет больше.
«Папка CSS»
bootstrap.css — в этом css-файле находятся все готовые стили. Этот файл мы и будем подключать к веб-странице. Все остальные файлы я удаляю:
bootstrap.min.css - точно такой же файл, что «bootstrap.css», только сжатая версия. Удалите файл «bootstrap.min.css ».
bootstrap-theme.css — это css-файл для готовой темы Bootstrap. Удалите файл «bootstrap-theme.css».
bootstrap-theme.min.css — точно такой же файл, что «bootstrap-theme.css », только сжатая версия. Удалите файл «bootstrap-theme.min.css ».
«Папка fonts»
В папке fonts хранятся файлы с одинаковыми шрифтами, но с разными расширениями.
Здесь я рекомендую ничего не удалять и оставлять все как есть.
«Папка js»
В папке js находится 2 файла: «bootstrap.js» и «bootstrap.min.js». Это два одинаковых файла с набором готовых js-сценариев. Разница лишь в том, что «bootstrap.js» – это полная версия, «bootstrap.min.js» – это сжатая версия. Удалите файл «bootstrap.min.js».
После проделанной операции по удалению ненужных файлов у вас будет уже вот такая файловая структура «Bootstrap»:
bootstrap/
├── css/
│ └── bootstrap.css
├── js/
│ └── bootstrap.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
То есть, в папках:
CSS – находится файл «bootstrap.css»
js - находится файл «bootstrap.js»
fonts - находятся файлы «glyphicons-halflings-regular.eot», «glyphicons-halflings-regular.svg», «glyphicons-halflings-regular.ttf», «glyphicons-halflings-regular.woff».
Шаг 3. Создание файла «index.html» и подключение файлов
В корне папки «Полигон для bootstrap 3» создайте файл «index.html» с таким кодом и с кодировкой «UTF-8»:
<!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 3 на StepkinBLOG.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>
Вот такая вот общая картина должна быть у вас в папке «Полигон для bootstrap 3»:
Вот и вся подготовка и подключения «bootstrap 3» к файлу «index.html». Если вы откроете файл «index.html» через любой браузер (например, OPERA, EI, Mozilla Firefox, Google Chrome, Yandex браузер и т.д.), то вы увидите на экране вот такую страничку:
Вроде как ничего особенного, можно и не использовать «bootstrap 3», но ведь это только подключение и всего лишь второй урок. Вы еще увидите, какие есть преимущества у Фреймворка «bootstrap 3».
Убедитесь, насколько быстро и качественно можно создавать адаптивные сайты.
Итак, подписывайтесь на обновления моего блога! Вы же не хотите пропустить новых уроков по «bootstrap 3»? 
Случайные записи:
- Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11
- Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
- Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
- Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
- Рамка в CSS. Основы CSS для начинающих. Урок №12
Привет Степан. С прогой немного повозился. Стоит денвер, настроен на другую папку. Теперь сами как - то настроились. Напрямую с нотпада идёт. Буду дальше пробовать.
Ответить
Здравствуйте, а почему подключаете css и js обычные не сжатые? Вроде min.css/js тоже самое в жатом виде они же лучше для сайта подходят?
Ответить
20 июня, 2017 at 08:22
Здравствуйте, да, это сжатые файлы.
Лично мне нравится, когда код читабельный, а не виде каши в одну строку.
В статье я же написал:
"В папке js находится 2 файла: «bootstrap.js» и «bootstrap.min.js». Это два одинаковых файла с набором готовых js-сценариев. Разница лишь в том, что «bootstrap.js» – это полная версия, «bootstrap.min.js» – это сжатая версия. Удалите файл «bootstrap.min.js»."
Ответить
Степан, Здравствуйте.
У меня вопрос:
Когда я скачал бутстрап у меня папки только две:
СSS и JS а FONTS нету
в чем дело?
Ответить
28 января, 2020 at 17:47
Скачивали у меня или с официального сайта?
Ответить