Что такое Bootstrap
Каждая веб=страница состоит из типовых элементов: блоков меня, колонок, форм обратной связи и многого другого. для того, чтобы писать меньше кода и получать готовую адаптированную верстку приходится задействовать библиотеки (фреймворки). Одним из таких фреймворков и является BootstrapКакие плюсы несёт в себе использование библиотеки.
Высокая скорость разработки
Фактически Bootstrap представляет собой конструктор, фрагменты которого вы включаете в свой проект при необходимости. Это уменьшает время разработки, потому что не требуется придумывать и писать их самостоятельно.
Адаптивный дизайн
Bootstrap направлен на создание макета под разные устройства — ноутбуки, планшеты, смартфоны. При этом код пишется один, а масштабирование в зависимости от ширины устройства берёт на себя фреймворк.
Открытая программа
Вы можете свободно изучать исходные коды библиотеки, изменять и расширять её под собственные нужды.
Совместимость с браузерами
Компоненты библиотеки написаны и протестированы с учётом работы разных браузеров. Это гарантирует, что макет будет выглядеть одинаково независимо от выбранного браузера.
Низкий порог вхождени
Чтобы использовать библиотеку в своей работе, требуется обладать минимальными знаниями по HTML, CSS и JavaScript. Это позволяет создавать эффектные сайты даже начинающим разработчикам.
Единая работа компонент
Bootstrap не просто вставляет какие-то элементы на страницу, но сразу же устанавливает их оформление и взаимодействие с пользователем через JavaScript. Вы получаете полностью работающий набор компонент, который достаточно добавить и настроить под себя.
Недостатки, конечно же, тоже имеются и они вытекают в основном из универсальности системы.
Во-первых, файлы библиотеки, даже сжатые, занимают довольно много места и увеличивают нагрузку на сервер. С повышением опыта нужно загружать и устанавливать только требуемые компоненты Bootstrap, сокращая тем самым объём файлов.Во-вторых, предлагаемые в библиотеке стили могут не подходить под дизайн разрабатываемого сайта и придётся много переделывать. В таких случаях, как известно, проще написать всё самому с нуля. В общем, Bootstrap годится для типовых сайтов, дизайн которых ориентирован на библиотеку. А сайтов, которые предлагают темы и шаблоны, в том числе бесплатные, в последнее время родилось довольно много. Достаточно поискать по ключевым словам «Bootstrap Theme».
Установка Bootstrap
Исходя из вышесказанного, на сегодня можно установить Bootstrap двумя способами.Первый - скачать полную версию Bootstrap со всеми файлами и уже потом самому определиться и выбрать, и подключить только необходимые.
Второй способ - это выбрать необходимые функции на сайте до скачивания и уже получить сразу готовые файлы. Полная версия фалов Bootstrap выглядит так:
Скачать можно по этому адресу:http://getbootstrap.com/getting-started/#download
В папках со стилями и скриптами приложено две версии файлов — исходная и компактная (в имени содержится min). Компактная отличается лишь размером файла и снижением читаемости кода. Лучше всего на рабочий сайт добавлять именно эту версию, так мы чуть ускорим загрузку веб-страниц.
Копируем все папки в наш проект и в корне создаём index.html. В итоге структура нашего проекта будет выглядеть следующим образом.
Содержимое index.html включает в себя ссылку на стилевой файл bootstrap.css и внизу страницы мы вызываем bootstrap.js. Больше пока ничего не нужно.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bootstrap</title> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>Привет, мир!</h1> <script src="js/bootstrap.js"></script> </body> </html>
Если в процессе работы потребуется переопределить стили каких-то элементов, то вы можете подключить ещё один собственный стилевой файл и в нём задать необходимые свойства. Bootstrap также предлагает сразу настроить желаемые параметры прямо у них на сайте, отметить требуемые компоненты и скачать персонифицированную версию рабочих файлов. Это делается по следующей ссылке:
http://getbootstrap.com/customize/Также в дальнейшем нам понадобится библиотека jQuery, её надо скачать и добавить вызов перед bootstrap.js.
О том, как подключить Bootstrap к любому онлайн проекту я рассказывал в посте - Подключение Bootstrap
Комментариев нет:
Отправить комментарий