Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Подключение. Основы bootstrap 3 для начинающих. Урок №2

19.05.2016


10:12


5851


3


Подключение. Основы bootstrap 3 для начинающих. Урок №2

Подключение. Основы bootstrap 3 для начинающих. Урок №2

Всем привет!
Вот и пришло время продолжить изучать основы «bootstrap 3».
Не пропустите новые уроки бесплатного курса по основам создания веб страницы на «bootstrap 3».
Пришло время рассказать, где скачать «bootstrap 3» и как им вообще пользоваться.
Думаю, для удобства стоит все разбить пошагово.
Список шагов:

  1. Скачиваем «bootstrap 3»
  2. Подготовка (распаковка, удаление лишнего)
  3. Создание файла «index.html» и подключение файлов

Шаг 1. Скачиваем  «bootstrap 3»

Фреймворк «bootstrap 3» можно бесплатно скачать с моего блога:

[скачать bootstrap 3 с StepkinBLOG.RU]

Либо скачать с официального сайта:

[скачать bootstrap 3]

Если вы выбрали скачивание с официального сайта, то когда вы там окажетесь, жмите на ссылку «Download Bootstrap» и укажите место на компьютере, куда нужно закачать архив с «bootstrap 3»:

Подключение. Основы bootstrap 3 для начинающих

Шаг 2. Подготовка (распаковка, удаление лишнего)

Теперь создайте на вашем ПК папку, где будете проводить различные опыты с файлами «bootstrap 3», это будет ваш личный полигон для испытаний и прохождения изучения основ «bootstrap 3».
Я назову папку «Полигон для bootstrap 3». Рекомендую назвать также. Чтобы у нас не было расхождений в названиях, и вы со мной шли шаг в шаг.
Итак, в папку «Полигон для bootstrap 3» распакуйте архив с файлами «bootstrap 3».
В результате в папке «Полигон для bootstrap 3» должны быть только три папки «CSS», «js» и «fonts»:

Подключение. Основы 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

Внимание: если вы качали «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 для начинающих

Вот и вся подготовка и подключения «bootstrap 3» к файлу «index.html». Если вы откроете файл «index.html» через любой браузер (например, OPERA, EI, Mozilla Firefox, Google Chrome, Yandex браузер и т.д.), то вы увидите на экране вот такую страничку:

Подключение. Основы bootstrap 3 для начинающих

Вроде как ничего особенного, можно и не использовать «bootstrap 3», но ведь это только подключение и всего лишь второй урок. Вы еще увидите, какие есть преимущества у Фреймворка «bootstrap 3».
Убедитесь, насколько быстро и качественно можно создавать адаптивные сайты.
Итак, подписывайтесь на обновления моего блога! Вы же не хотите пропустить новых уроков по «bootstrap 3»? :coffe:



Случайные записи:

  1. Коды цветов в HTML. Основы HTML для начинающих. Урок №11
  2. Cкелет HTML. Основы HTML для начинающих. Урок №1
  3. Шрифты в CSS. Основы CSS для начинающих. Урок №6
  4. Основы CMS WordPress. Урок №1
  5. Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

3 ответа(ов) на статью: “Подключение. Основы bootstrap 3 для начинающих. Урок №2”

  1. Сергей says:

    Привет Степан. С прогой немного повозился. Стоит денвер, настроен на другую папку. Теперь сами как - то настроились. Напрямую с нотпада идёт. Буду дальше пробовать.

    Ответить

  2. Серый says:

    Здравствуйте, а почему подключаете css и js обычные не сжатые? Вроде min.css/js тоже самое в жатом виде они же лучше для сайта подходят?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, да, это сжатые файлы.
    Лично мне нравится, когда код читабельный, а не виде каши в одну строку.
    В статье я же написал:
    "В папке js находится 2 файла: «bootstrap.js» и «bootstrap.min.js». Это два одинаковых файла с набором готовых js-сценариев. Разница лишь в том, что «bootstrap.js» – это полная версия, «bootstrap.min.js» – это сжатая версия. Удалите файл «bootstrap.min.js»."

    Ответить

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

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

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?