Фреймворк для дизайна
@honey_and_moneyЧто вообще такое фреймворки?
Фреймворк это такой набор библиотек, который упрощает жизнь программисту, то есть нам)
Что такое набор библиотек? Для разных фреймворков это словосочетание можно рассматривать по разному. Чтобы не приводить непонятные и пока не изученные термины, скажу, что в нашем случае набор библиотек фреймворка для дизайна это набор заранее подготовленных классов. То есть их кто-то за вас написал и вы можете их использовать на своей html-странице без всякого дополнительного описания.
Довольно удобно, неправда ли?
На данный момент я использую только один фреймворк для разработки дизайна - Bootstrap 3. Знакомство с фреймворками я начал именно с него, т.к. все советовали его за простоту и понятность.
Мы с вами тоже будем изучать этот фреймворк.
Давайте же тогда начнем!
Как использовать классы фреймворка на нашей странице?
Логично предположить, что если фреймворк - это набор библиотек, то эти библиотеки должны где-то храниться.
Существует два варианта подключения фреймворка к нашей странице:
Можно скачать эти библиотеки с официального сайта http://bootstrap-3.ru к себе на компьютер и в блоке <head> нашей html-страницы подключить их через <link rel="/...">
Другим, более простым способом подключения является ссылка на удаленное хранилище этих библиотек. (Нам пока это не подходит)
То есть вам не обязательно у себя на компьютере хранить все эти библиотеки, достаточно просто указать такую конструкцию внутри <head>:
Скопировать вы это можете опять же с официального сайта http://bootstrap-3.ru/getting-started.php из подпункта Bootstrap CDN.
Вы подключаете библиотеки из удаленного хранилища, следовательно у вас с компьютера должен быть доступ в интернет. Если же интернета по какой-то причине на компьютере нет - используйте первый пункт и скачивайте библиотеки к себе на компьютер.
Почему нам не подходит подключение удаленных библиотек? Все дело в том, что мы пока работаем на локальном компьютере, никто не видит нашу страницу через интернет. Если мы не используем различные локальные сервера, то удаленные библиотеки Bootstrap подключаться не будут. Такая особенность этого фреймворка.
Подробнее про подключение фреймворка вы можете почитать на официальном сайте. Не буду дублировать информацию.
Давайте подключим Bootstrap первым способом. Я скачал вот этот архив https://github.com/twbs/bootstrap/archive/v3.3.7.zip и распаковал его содержимое в ту папку, где лежит наша html-страница:
В самой папке bootstrap-3.3.7 такое содержимое:
Теперь подключаем в html:
Тут я просто указал путь к основному CSS файлу, который лежит в нашем распакованном архиве библиотек.
Ну и через тэг <meta charset="utf-8"> я задал кодировку страницы (мы пока не разбирали кодировки, просто принимаем это как должное, кодировки нужны для корректного отображения текста)
Давайте проверим, а все ли получилось?
Для этого создадим на нашей html-странице, куда был подключен Bootstrap, какой-нибудь тэг, например тэг с кнопкой:
Можете сейчас обновить вашу страницу в браузере, там должна появиться обычная стандартная кнопка. Bootstrap тут пока не при делах.
Теперь давайте добавим кнопке класс "btn btn-primary":
Сохраняем изменения в html, обновляем страницу в браузере и видим:
Ура, все получилось! Как видите, мы не описывали никаких стилей, а просто написали уже заранее подготовленное имя класса и все заработало - отображается красивая кнопка вместо стандартной.
Итак, за сегодня мы разобрались с базовым понятием фреймворка, подключили Bootstrap и даже проверили его работоспособность.
Проделайте у себя на компьютере тоже самое, это все пригодится нам для дальнейшего изучения веб-дизайна
@honey_and_money - Полагайся в этой жизни только на себя!