Меню

Работаем с Bootstrap (Часть первая — скачиваем и подключаем).

08.02.2016 - Bootstrap, CSS, Веб дизайн, Верстка

Bootstrap-logo

 

Скачиваем и подключаем Bootstrap.

На то, чтобы написать сайт с нуля уходит масса времени (свой первый одностраничник, например, автор этих строк писал полтора месяца. ОДНОСТРАНИЧНИК, КАРЛ!!!), причем львиная доля этого времени уходит на работу с CSS и JavaScript – оно и понятно, ведь стили и скрипты даже по объему занимают значительную часть сайта – таблицы стилей в 1500 – 2000 строк на современных сайтах не редкость, как и масса всевозможных JS скриптов примерно такого же объема. Даже неплохо зная HTML-5, CSS-3 и JavaScript, при таком объеме немудрено запутаться, да и веб-дизайнер – это все же больше художник, чем программист …

Прекрасный подарок своим коллегам сделали дизайнеры компании Twitter (да-да, той самой соцсети с сообщениями в 140 знаков!) – они создали Bootstrap — фреймворк (проще говоря – набор готовых стилевых решений, напоминающий конструктор Lego), оформленный в виде нескольких CSS таблиц и скриптов, и содержащий уже готовые стили как для целых страниц и блоков, так и для заголовков, кнопок, таблиц, и прочих элементов сайта. Верстка сайта с нуля как таковая отменяется!

В этой серии статей я расскажу вам про то, что собой представляет Bootstrap, и увидев на практике, как работает этот мощный инструмент, вы, надеюсь, поймете, что не влюбиться в него веб-дизайнер попросту не может!

Перед тем как скачать Bootstrap, его нужно настроить – ведь полный его архив весит не много не мало 546 Кб., и все компоненты этой воистину гигантской библиотеки вам могут попросту не понадобится. На странице загрузки нужно просто отметить нужные вам компоненты флажками.

bootstrap-download

Common CSS.

В левой колонке (Common CSS) мы видим базовые стили  Bootstrap – они всегда могут пригодиться, и эти флажки я бы не стал снимать никогда. В базовые стили входят:

Components.

Следующая колонка – компоненты Bootstrap. Вот что туда входит:

jQuery plugins.

В правой колонке – компоненты Bootstrap,  добавляющие анимацию и прочие динамические функции. Чтобы их использовать, нужно подключить jQuery. Чаще всего приходится пользоваться такими элементами:

После того, как отмечены необходимые для нашего проекта компоненты, нам остается\ лишь нажать на кнопку Compile and download внизу страницы, и дождаться окончания загрузки. Распаковав архив, нужно помесить имеющиеся в нем папки в папку с нашим пректом, и подключить файл bootstrap.min.css  (или более функциональный bootstrap.css), а так же (при необходимости) — bootstrap-theme.css, и если будете использовать jQuery plugins – подключите jquery-2.1.4.js и bootstrap.js. Код html-страницы со подключенным Bootstrap будет выглядеть примерно так:

Наш «Hello, World!» на бутстрапе готов. В следующей статье я расскажу о таблицах и кнопках в Bootstrap.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.