Уроки адаптивной верстки Twitter Bootstrap 3. Система сеток

Данный пост о том, как я настраиваю базовый шаблон Bootstrap 3 framework. Данную базовую настройку HTML шаблона Bootstrap 3 можно использовать в качестве рабочего примера.

Базовая сборка Bootstrap 3 без настроек компонентов

Разработчики предлагают несколько вариантов для начала работы с данным фреймворком. Привожу парочку самых простых рабочих вариантов создания Bootstrap 3.

Подключение файлов Bootstrap локально

Заходим на русскоязычную версию официального сайта во вкладку Основы Bootstrap и скачиваем на компьютер архив , содержащий минимизированный код CSS и JavaScript. Распаковываем архив, и в папке (ее можно переименовать), создаем пустой файл

Далее на том же сайте переходим во вкладку Примеры и копируем базовый пример HTML документа. Естественно, переносим содержимое в созданный ранее файл .

Ну и раз уж данная базовая сборка Bootstrap 3 является локальной, то скачиваем последнюю стабильную минимизированную версию (на момент написания статьи библиотеки jQuery 1.12.1) и подключаю локально из папки , заменяя в коде

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

на

<script src="js/jquery-1.12.1.min.js"></script>

Удаляем из папки ненужные на данном этапе лишние файлы CSS и JS (дабы не путаться в них). Оставляем лишь 4 файла — , , , .

Все, на этом базовую сборка Bootstrap 3 можно считать завершенной.

<!DOCTYPE html> <html lang="en"> <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 101 Template</title> <!— Bootstrap —> <link href="css/bootstrap.min.css" rel="stylesheet"> <!— HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]—> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Привет, мир!</h1> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <strong>Поздравляю!</strong> Вы подключили Bootstrap 3 правильно!!! </div> </div> </div> </div> <!— jQuery (necessary for Bootstrap’s JavaScript plugins) —> <script src="js/jquery-1.12.1.min.js"></script> <!— Include all compiled plugins (below), or include individual files as needed —> <script src="js/bootstrap.min.js"></script> </body> </html>

Вот что в итоге у меня получилось:

Немного внимания! Единственное, в данном примере используется устаревшая версия библиотеки , поэтому в коде я заменил на версию (подключенную локально) и добавил для отладки один из компонентов Bootstrap 3 — Замечания, которые можно закрыть.

Базовая сборка Bootstrap 3 с локальным подключением скриптов и стилей хороша тем, что позволяет заниматься разработкой проекта без подключения к интернету и вносить изменения непосредственно в рабочие файлы.

Скачать данный пример базовой сборки Bootstrap 3 с локальным подключением скриптов можно тут

Скачать


Базовая сборка Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

Иногда не совсем удобно использовать локальное подключение Bootstrap.

В таких случаях лучше пользоваться ресурсами сайта MaxCDN и подключать файлы SCC и JS удаленно.

Просто замените локальные подключения на ссылки на файлы.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

В итоге должен получиться такой HTML документ:

Файл для базовой сборки Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

<!DOCTYPE html> <html lang="en"> <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 101 Template</title> <!— Bootstrap —> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!— HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]—> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Привет, мир!</h1> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <strong>Поздравляю!</strong> Вы подключили Bootstrap 3 правильно!!!.

</div> </div> </div> </div> <!— jQuery (necessary for Bootstrap’s JavaScript plugins) —> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!— Include all compiled plugins (below), or include individual files as needed —> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>

Естественно локальные скрипты и стили не используются для данного способа сборки и их можно удалить.

Скачать


Заключение
Некоторые считают фреймворк Bootstrap тяжелым и слишком нагруженным инструментом для создания веб страниц, но почему тогда с его помощью созданы миллионы сайтов по всему миру? Напротив, сейчас Bootstrap framework это очень удобный и гибкий инструмент веб разработчика.

В следующей статье я покажу как настроить и скачать собственную пользовательскую сборку Bootstrap 3. Например как исключить ненужные JS плагины или неиспользуемые CSS компоненты, дабы облегчить CSS и JS файлы на выходе и применить собственные стили для CSS компонентов не перебивая их в пользовательском файле main.css.


Лучший способ отблагодарить автора

Похожие по Тегам статьи


Юзаем Bootstrap  |  bootstrap   |   Комментировать

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

Bootstrap — это отзывчивый фреймворк, который вам поможет быстро и с легкостью создавать статичные веб-сайты и веб-приложения. Так что вы можете или просто работать со статичным ХТМЛ в том виде, в котором он есть в Bootstrap или вы можете попробовать совместить его с чем-нибудь другим типа PHP или с какой-нибудь CMS. Вы можете создать что-то более динамичное и контролировать клиентскую часть своего сайта через Bootstrap.

Bootstrap популярен среди серверных разработчиков, т.к. он позволяет построить простую достаточно простую клиентскую часть сайта не требуя каких-то особенных знаний ХТМЛ и CSS.

Bootstrap используют различные организации, типа НАСО, Discus и др.

Примеры сайтов, которые построены на Bootstrap, а точнее на этих сайтах вы найдете сайты, которые построены на Bootstrap:

  1. builtwithbootstrap.com
  2. lovebootstrap.com
  3. expo.getbootstrap.com

Что нового в Bootstrap 3

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

В комплекте с Bootstrap 3 только одна сеточная система — отзывчивая, но с более расширенным функционалом (а раньше была еще и адаптивная). Здесь есть 4 сетки разных размеров и дополнительно маленькая, средняя и крупная сетки.

Bootstrap прекращает поддержку IE7 и FireFox 3.6. Но чтобы сайт заработал в IE8 нужно провести некоторые махинации, которые мы рассмотрим в следующих уроках. Во всех остальных Bootstrap работает без проблем.

Одна из прекрасных вещей, которая идет в комплекте — это шрифты, которые можно использовать как иконки. Раньше в пакет Bootstrap входил пакет спрайтов (порядка 100 иконок в одном PNG). Это был не самый плохой вариант, но получалось так, что было не легко увеличивать иконку, поменять ее цвет, т.к. все было в растре. А сейчас мы будем работать со шрифтами (векторная графика) и сможем легко менять цвет и вид.

Некоторые интересуются, нужно ли всегда работать с Bootstrap или другими фреймворками?

Ответ здесь не однозначен и зависит от того, какую задачу вы пытаетесь решить.

Если говорить о дизайне клиентской части, то тут существует несколько подходов:

  • Мы либо считаем дизайн клиентской части чем-то готовым (шаблоном) и вставляем ее сразу же на сайт, разве что можем внести некоторые изменения
  • Либо же каждый раз снова рисуем дизайн, верстаем и каждый раз делаем это заново. Это более долгий и дорогой подход.

Достоинства Bootstrap

А вот отзывчивый фреймворк — это что-то по середине, часть работы уже сделана за вас. Вам не нужно думать о некоторых отдельных аспектах дизайна.

Допустим, сеточная система отлично подходит для разметки страниц — вам не обязательно писать свою сетку для каждого нового сайта, но в тоже время она достаточно гибкая. И Bootstrap со своим гибким CSS включает так же LESS CSS (это препроцессорные системы CSS, которые позволяют централизовать стили). Она позволяет настроить внешний вид Bootstrap на свой вкус.

Bootstrap совсем не обязательно должен выглядеть, как Bootstrap. Часто Bootstrap упрекают в том, что все сайты на нем выглядят одинаково, особенно так говорят дизайнеры. Но это нет так. Bootstrap выглядит так, как этого хотите вы, и вы можете изменить его до неузнаваемости — это дело времени и желания.

Недостатки Bootstrap

Многие жалуются, что приходится писать по 10 или 20 строчек кода там, где в другом случае можно было бы ограничиться парочкой. Но это необходимость, если речь идет о гибкости оболочки.

Отзывчивым дизайном нужно сначала овладеть, а для этого нужно потратить немало времени.

Но, если вы все же решили заняться изучением Bootstrap — вы сделали правильный выбор, т.к. в дальнейшем это поможет вам не делать одну и ту же работу кучу раз, сэкономит время.

Практически любая веб-страница содержит множество похожих компонентов, которые встречаются и на других сайтах. Это меню, навигация, элементы форм, заголовки и др. Не говоря уже про многоколоночную вёрстку, без которой вообще сложно превратить картинку макета в готовую веб-страницу. Чтобы меньше писать кода и по максимуму задействовать уже готовые решения применяются специализированные библиотеки, их часто называют фреймворками. Одним из таких фреймворков для вёрстки является Bootstrap.

Bootstrap разработали Марк Отто и Якоб Торнтон, сотрудники Twitter, именно поэтому в названии фигурирует имя компании. Их цель понятна любому разработчику — создать единый стандартный набор инструментов для сотрудников компании, ускоряющий их работу.

На сегодняшний день Bootstrap давно перерос рамки одной компании, это открытый продукт применяемый веб-разработчиками для вёрстки сайтов во всём мире.

Какие плюсы несёт в себе использование библиотеки.

Высокая скорость разработки

Фактически Bootstrap представляет собой конструктор, фрагменты которого вы включаете в свой проект при необходимости. Это уменьшает время разработки, потому что не требуется придумывать и писать их самостоятельно.

Адаптивный дизайн

Bootstrap направлен на создание макета под разные устройства — ноутбуки, планшеты, смартфоны. При этом код пишется один, а масштабирование в зависимости от ширины устройства берёт на себя фреймворк.

Открытая программа

Вы можете свободно изучать исходные коды библиотеки, изменять и расширять её под собственные нужды.

Совместимость с браузерами

Компоненты библиотеки написаны и протестированы с учётом работы разных браузеров.

Это гарантирует, что макет будет выглядеть одинаково независимо от выбранного браузера.

Низкий порог вхождения

Чтобы использовать библиотеку в своей работе, требуется обладать минимальными знаниями по HTML, CSS и JavaScript. Это позволяет создавать эффектные сайты даже начинающим разработчикам.

Единая работа компонент

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

Недостатки, конечно же, тоже имеются и они вытекают в основном из универсальности системы.

Во-первых, файлы библиотеки, даже сжатые, занимают довольно много места и увеличивают нагрузку на сервер. С повышением опыта нужно загружать и устанавливать только требуемые компоненты Bootstrap, сокращая тем самым объём файлов.

Во-вторых, предлагаемые в библиотеке стили могут не подходить под дизайн разрабатываемого сайта и придётся много переделывать. В таких случаях, как известно, проще написать всё самому с нуля.

В общем, Bootstrap годится для типовых сайтов, дизайн которых ориентирован на библиотеку. А сайтов, которые предлагают темы и шаблоны, в том числе бесплатные, в последнее время родилось довольно много. Достаточно поискать по ключевым словам «Bootstrap Theme».

Влад Мержевич

Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 17.04.2016

Редакторы: Влад Мержевич

Установка Bootstrap
+

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.

Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.

https://google-developers.appspot.com/chart/interactive/docs/gallery

Рассмотрю только два типа графиков — круговую и линейную диаграмму. Остальные типы подключаются по аналогии и разобравшись как добавлять один график, уже легче работать и с другими.

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.

Пример 1. Круговая диаграмма

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById.

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data) и настройки (переменная options). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно.

В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Рис. 2. Гистограмма

Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег <div>, связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).

Пример 2. Гистограмма

Для начала добавляем тег <div> и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент <div>. Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Остальные параметры вы можете посмотреть по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

Резюме

Удобно, что сервис ориентирован на пользователей разного уровня подготовки. Можно скопировать прилагающиеся примеры и сразу же получить готовый график стандартного вида. Те пользователи, что станут досконально разбираться во множестве параметров, будут вознаграждены графиками сделанными по их вкусу и подобию дизайна сайта.

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра — учите языки.

❮ ПредыдущаяСледующая Глава ❯


Оповещения

Bootstrap предоставляет простой способ создания предопределенных предупреждающие сообщения:

×Успех! Это окно предупреждения указывает на успешное или положительное действие.

×Info! Это окно предупреждения указывает на нейтральное информативный изменение или действие.

×Внимание! Это окно предупреждения указывает на предупреждение, что, возможно, потребуется внимание.

×Опасность! Это окно предупреждения указывает на опасную или потенциально негативное действие.

Оповещения создаются с класса, а затем один из четырех классов контекстных , , или :

пример

<div class=»alert alert-success»>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class=»alert alert-info»>
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class=»alert alert-warning»>
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class=»alert alert-danger»>
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Попробуй сам "


Оповещения Закрытие

Чтобы закрыть предупреждающее сообщение, добавить и на ссылку или кнопку элемента:

пример

<div class=»alert alert-success»>
  <a href=»#» class=»close» data-dismiss=»alert» aria-label=»close»>&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Попробуй сам "

aria-* атрибут и &times;объяснение

Для того, чтобы помочь улучшить доступность для людей , использующих программы чтения с экрана, вы должны включать aria-label="close" атрибут, при создании кнопки закрытия.

&times; (×)&times; (×) представляет собой HTML — объект , который является предпочтительным значок кнопки закрытия, а не буквой "x" .


Анимационные Alerts

И классы добавляет затухающий эффект при закрытии предупреждающее сообщение:


Проверьте себя с упражнениями!

Упражнение 1 »Упражнение 2»Упражнение 3 »


Полное Bootstrap Предупреждение Ссылка

Для полного ведения всех предупреждений вариантов, методов и событий, перейдите на наш Bootstrap JS оповещения Reference .

❮ ПредыдущаяСледующая Глава ❯

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

Закрыть меню