Бутстрап 3

>

Бутстрап 3 — добавление глиф-иконок на сайт, оформление миниатюр для галерей, а также таблиц и панелей

Здравствуйте, уважаемые читатели блога Продолжаем тему построения сайта на основе отзывчивого фреймворка, начатую в этих статьях:

  1. В первой мы познакомились с основами отзывчивого дизайна и в подробностях изучили вопрос подключения фреймворка Бутстрап к Html страничкам (веб-документам).
  2. Во второй статье мы в подробностях и на конкретных примерах рассмотрели устройство и работу сеточной системы в Bootstrap 3 (она существенно отличается от предыдущих версий этого фреймворка).
  3. В третьей статье мы узнали про ряд приемов верстки сайта на Бутстрап, которые могут пригодиться вам в дальнейшем.
  4. Ну, а в четвертой статье мы рассмотрели доступные способы форматирования (оформления) текста и картинок в Бутстрап 3, изучили вопросы, связанные с созданием кнопок и работой так называемых отзывчивых классов, позволяющих скрывать или, наоборот, отображать отдельные элементы вебстраницы при изменении ширины экрана, на котором эта самая страница просматривается.

Бутстрап 3

Сегодня же мы поговорим про то, как можно добавить на сайт глиф-иконки, зачем это нужно и как их настроить за счет файла собственных стилей. Также мы посмотрим как оформляют фотографии и подписи к ним в виде миниатюр фотогалереи, а затем попробуем повторить все то же самое для текстовых блоков. Ну и познакомимся, конечно же, с классами Bootstrap 3, которые позволят сделать из любой таблицы на вашем сайте конфетку, а в самом конце попробуем оформить текстовый блок в виде панели. Надеюсь, что будет интересно.



Глиф-иконки — их вставка с помощью классов Бутстрапа

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

Почитать о них и посмотреть классы, с помощью которых этим самые глиф-иконки можно будет вставить на страницу своего сайта, можно на официальном сайте Бутстрапа на вкладке «Components».

Бутстрап 3

Давайте для примера опять возьмем наш многострадальный файлик sait-4.html, над которым мы не устаем глумиться. Для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить как. ». Файлик этот нужно будет поместить в папку Bootstrap на тот же уровень, что и созданный нами в первой статье файлик index.html. Внизу данного макета вы можете наблюдать четыре колонки с заголовками и анонсами статей.

Бутстрап 3

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



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

Вставляются они в нужном месте кода вашей веб-страницы простым добавлением открывающего и тут же закрывающего тегов SPAN с прописанными внутри классами нужной иконки. Например, так:

Один нюанс: чтобы глиф-иконка не сливалась с текстом заголовка, не забудьте их разделить в коде пробелом (он не всегда виден при переносе строк).

Бутстрап 3

В итоге заголовки в колонках приобретут несколько более привлекательный вид:

Бутстрап 3

Наверное, при использовании глиф-иконок у вас возникнет вопрос — а как поменять у них цвет, чтобы он подходил к общему стилевому оформлению сайта? Собственно, если вы читали предыдущую статью по Бутстрапу, то ответ вы уже знаете. А если не читали, то приведу вам ссылочку на описание того, как поменять цвет кнопок в файле собственных стилей. Смена цвета глиф-иконок в Bootstrap 3 проходит по тому же сценарию.



Мы просто используем для этой цели файл собственных стилей manual.css (о его подключении читайте в первой и четвертой статье). Вносить изменения в основной файл стилей фреймворка мы не будем по той причине, что при обновлении они могут исчезнуть.

Соответственно, если вы хотите сменить цвет всех глиф-иконок на вашем сайте, то прописывать CSS правило нужно для селектора glyphicon, ибо этот класс присутствует во всех тегах SPAN при вставке этих значков. Для этого в manual.css достаточно будет добавить такой вот код:

Цвет задается кодом #0C6B94, который вы можете выбрать, «взяв пробу» со своего сайта, например, с помощью программ по работе с Html цветами, описанных в приведенной статье.

Бутстрап 3

Если потом захотите некоторые глиф-иконки сделать другого цвета, то просто перечислите в manual.css их селекторы (классы) и пропишите для них нужный цвет:

Бутстрап 3

Напомню еще раз, что глиф-иконки — это фактически шрифты (векторные объекты), которые не теряют своей четкости при масштабировании.

Бутстрап 3

Собственно, это легко проверить, просто увеличив масштаб в вашем браузере.

Создание миниатюр для фотогалерей и для текстовых блоков

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



Давайте для наилучшего понимания создадим Html страницу, чем-то напоминающую реальную вебстраницу, загадочным образом сочетающую в себе фотогалерею и контактную информацию (которая оформлена в виде Html таблицы). Ну, а после эту самую заготовку разметим с помощью классов Bootstrap 3 так, чтобы глаз порадовался.

Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущими статьями этой рубрики скачать файлик sait-6.html (для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить как. »), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap (в ее корень).

Если вы посмотрите исходный код файла sait-6.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации фотогалереи и содержимого таблицы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда — img-6.zip. Просто распакуйте архив и поместите содержащиеся в нем картинки в папку img. Структура получится такая:

Бутстрап 3

Наша заготовка на данный момент выглядит довольно-таки непрезентабельно (фотогалерея на таковую пока еще не очень похожа, да и таблица представляет из себя трудновоспринимаемый сгусток информации, но о ней речь чуть ниже пойдет):

Бутстрап 3



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

Для этого нам понадобится разбить Html код (где выводятся картинки и надписи под ними) на пару строк (окружив входящие в них Html элементы тегами Div с классом Row), а внутри этих строк обозначить пару столбцов. Давайте, не мудрствуя лукаво, возьмем за основу сверх малую сетку. Думаю, что вы все поймете непосредственно из кода того фрагмента, что призван имитировать фотогалерею:

После добавления сеточной системы изображения из фотогалереи расположатся подобающим образом:

Бутстрап 3

Уже кое-что, но еще недостаточно. При уменьшении ширины экрана галерея тоже ведет себя подобающим образом (изображения масштабируются), ибо в коде мы заранее позаботились об отзывчивости картинок, добавив в них класс img-responsive (об этом читайте в предыдущей статье подробнее). Но мы хотим сделать из них миниатюры, а не просто сетку с картинками и текстом. Для этого в код нужно будет добавить еще несколько классов из ассортимента Bootstrap 3.

Собственно, создание эффекта миниатюры заключается в добавлении класса thumbnail, который заключит изображение в рамочку. Добавить его можно в уже существующие дивы с классом col-xs-6. Выглядеть это будет примерно так:



Сделав это вы заметите, что текст под картинкой хоть и находится в общей рамке, но слишком уж сильно прижат к нижнему краю изображения. Избавиться от этого можно простым добавлением к блоку с текстом класса caption. Нужные отступы после этого появятся автоматически. В нашем случае класс caption можно прописать прямо в теге P, но если бы текстовый блок под картинкой имел бы более сложную структуру (например, заголовок и абзац), то его просто нужно было бы заключить в Див-контейнер, и уже для него добавить класс caption.

После проведения всех описанных выше манипуляций мы получим желаемый результат. Однако, вы наверное заметили, что миниатюры прижаты друг к другу по ширине . Ну правильно, мы поленились лишние Див-контейнеры создать для каждого класса thumbnail, а прописали его в уже имеющиеся с классом col-xs-6. Поэтому не ленимся и результирующий код получится таким:

В итоге имитация фотогалереи приобрела уже более удобоваримый вид :

Бутстрап 3

Мы, как я уже говорил, реализовали только визуальное сходство с галереей, а уже функционал реализуется другими способами (добавлением ссылок на крупные версии картинок, использованием мобильных окон Бутстрапа или еще каким-то другим манером).

Давайте еще для примера придадим вид миниатюр тем анонсам статей, которым мы чуть выше глиф-иконки пририсовали. Отличий тут практически не будет, разве что только изображений у нас тут нема, поэтому конструкция кода «оминиатюривания» одной колонки с анонсами будет выглядеть примерно так:



Т.е. мы окружили содержимое колонки двумя Див-контейнерами с прописанными в них классами thumbnail и caption. Проявляя признаки лени и добавляя классы thumbnail caption напрямую в уже имеющийся контейнер с class=”col-md-3 col-sm-6″, мы не получим ни внешних, ни внутренних отступов от образуемой «миниатюрной» рамки.

Бутстрап 3

Можете попробовать и посмотреть на результат. В нашем же случае все будет более-менее прилично. Сами видите у себя.

Бутстрап 3

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

Оформление таблиц и панелей средствами Bootstrap 3

Итак, в нашей заготовке (файле sait-6.html) осталось еще привести к подобающему виду имеющуюся там таблицу. Выглядит она сейчас просто безобразно и не юзабельно:

Бутстрап 3

На самом деле, в Бутстрапе эта проблема решается на раз-два. Просто находите в коде тег Table и дописываете в него класс Table, чтобы получилось примерно так:

И посмотрите на результат:

Бутстрап 3

Как говорится, другое дело. Таблица стала полностью читабельна и за нее уже не стыдно. Но совершенству нет предела и на официальном сайте Bootstrap 3 (на вкладке “Tables”) вы найдете массу интересных и одновременно простых в применении способов визуализации данных в таблицах.



Например, данные в больших (широких) таблицах лучше отслеживаются, если фон ее строк чередуется. Это позволяет не сбиться при просмотре данных в строке. В Бутстрапе для получения такого эффекта достаточно будет дописать еще один класс table-striped к тегу Table:

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

Бутстрап 3

Если хотите отображать в таблице ее внешние границы, то добавьте класс table-bordered. Причем, можно даже оставить предыдущий класс table-striped:

В результате получится микс из двух стилей оформления Бутстрапа. Пользователям вашего сайта также может понравиться отзывчивость вашей таблицы на их действия, когда цвет фона строки, находящейся под курсором мыши, меняется. Для этой цели нужно будет воспользоваться классом table-hover.

Если хотите разместить данные в таблице покомпактнее, то воспользуйтесь классом table-condensed, который несколько уменьшит внутренние отступы (padding) внутри ячеек таблицы и позволит разместить на странице больше информации в табличном виде.

Если же захотите выделить одну из строк (или несколько) другим цветом , то можете прописать в тег TR (отвечает за формирование строк в Html таблицах) приведенные ниже классы:

Бутстрап 3



Есть еще одни нюанс работы с таблицами в Bootstrap 3. Попробуйте уменьшать ширину страницы вашего браузера до тех пор, пока данные в строках таблицы уже не будут помещаться на странице. В результате для ее просмотра вам придется использовать горизонтальную полосу прокрутки внизу окна браузера, что не есть хорошо.

Бутстрап 3

Давайте попробуем чуток улучшить эту ситуацию. Для этого нужно будет просто заключить всю таблицу в Див-контейнер с классом table-responsive.

Бутстрап 3

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

Бутстрап 3

Создание панелей

Ну и буквально пару слов скажу про панели, которые можно довольно легко организовывать с помощью инструментов Бутстрапа. Какие именно классы для этого нужно применять, вы можете посмотреть на вкладке “Panels” официального сайта.

Тот блок на сайте, который вы хотите отобразить в виде панели, нужно будет заключить в Див-контейнеры с прописанными в них классами panel panel-default (цвет панели по умолчанию будет сероватым). Можно вместо второго класса использовать и что-то вроде panel-success, panel-primary, panel-info, panel-warning или panel-dange, чтобы панель подсвечивалась бы другим фоновым цветом. Подробности смотрите на официальном сайте по приведенной чуть выше ссылке. Если подходящего цвета не найдете, то задайте его в файле собственных стилей, как мы это сделали для глиф-иконок.



Обычно панель включает в себя заголовок и основную часть. Заголовок помещается в Див-контейнер с классом panel-heading, ну, а основная часть — в контейнер с классом panel-body. Все. Давайте посмотрим все это дело на примере многострадального файлика sait-4.html (ссылку на него вы найдете в начале статьи). Давайте отобразим в виде панели тот блок, которые выводится слева (с заголовком «Яндекс Директ — основы создания кампании»):

Ну, а заодно и стоящий справа от него блок тоже закуем в оковы панели, но уже с другим цветовым решением (используя panel panel-warning). Имеющиеся в блоках картинки я удалил за ненадобностью.

Бутстрап 3

На сегодня все. В следующей статье поговорим про создание и оформление с помощью Bootstrap 3 систем навигации по сайту.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

Дмитрий, что-то задерживаетесь с «навигацией».

День добрый. Поддерживаю. Про навигацию было бы тоже очень интересно.

Як завжди класний урок! Чекаємо з нетепінням наступний)

* Нажимая на кнопку “Добавить комментарий” или “Подписаться” Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Что такое репост и как делать репосты во ВКонтакте, создание, продвижение и заработок на сайте

> Что такое репост и как делать репосты во ВКонтакте? Здравствуйте, уважаемые читатели блога Согласно ...

Что такое кэш

> Что такое кэш — как очистить кеш в Опере, Мозиле, Хроме и других браузерах ...

Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть, создание, продвижение и заработок на сайте

> Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная ...

Что такое Емайл (E-mail) и почему это называют электронной почтой, создание, продвижение и заработок на сайте

> Что такое Емайл (E-mail) и почему это называют электронной почтой Здравствуйте, уважаемые читатели блога ...

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

> Что такое дроп, дропнутый или освобождающийся домен Здравствуйте, уважаемые читатели блога Термин Дроп происходит ...

Что такое домены, хостинг, DNS сервера и IP адреса, создание, продвижение и заработок на сайте

> Что такое домены, хостинг, DNS сервера и IP адреса Домены, Ip адреса и связывающие ...

Что такое девайс и чем он отличается от гаджета, создание, продвижение и заработок на сайте

> Что такое девайс и чем он отличается от гаджета Здравствуйте, уважаемые читатели блога В ...

Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике, создание, продвижение и заработок на сайте

> Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок ...

Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты, создание, продвижение и заработок на сайте

> Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, ...

Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта, создание, продвижение и заработок на сайте

> Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта Здравствуйте, уважаемые ...

Что такое RSS, где скачать иконки и какая читалка самая лучшая, создание, продвижение и заработок на сайте

> Что такое RSS, где скачать иконки и какая читалка самая лучшая Здравствуйте, уважаемые читатели ...

Что такое Rookee и как продвигать сайт в этой системе, создание, продвижение и заработок на сайте

> Что такое Rookee и как продвигать сайт в этой системе? Здравствуйте, уважаемые читатели блога ...

Что такое Joomla, создание, продвижение и заработок на сайте

> Что такое Joomla Свое изучение сайтостроения я начал именно с выяснения вопроса: Что такое ...

Что такое ICQ, как его установить и пользоваться, создание, продвижение и заработок на сайте

> Что такое ICQ, как его установить и пользоваться? Здравствуйте, уважаемые читатели блога Не будем ...

Что такое DNS и как ДНС-сервера обеспечивают работу интернета, создание, продвижение и заработок на сайте

> Что такое DNS и как ДНС-сервера обеспечивают работу интернета Здравствуйте, уважаемые читатели блога О ...

Что такое cookie и как почистить куки в современных браузерах, создание, продвижение и заработок на сайте

> Что такое cookie и как почистить куки в современных браузерах Здравствуйте, уважаемые читатели блога ...

Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP, создание, продвижение и заработок на сайте

> Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и ...

Что мешает SEO-продвижению вашего сайта и как это исправить

> Что мешает SEO-продвижению вашего сайта и как это исправить — 10 основных ошибок и ...

Что значит смайлик написанный символами

> Что значит смайлик написанный символами — значения обозначений и расшифровка текстовых смайлов Здравствуйте, уважаемые ...

Что главное в блоге? Фото, создание, продвижение и заработок на сайте

> Что главное в блоге? Фото! Здравствуйте, уважаемые читатели блога Итак, у вас есть блог, ...

Целесообразно ли автоматизировать SEO продвижение, создание, продвижение и заработок на сайте

> Интересно ваше мнение. Здравствуйте, уважаемые читатели блога Целесообразно ли автоматизировать SEO продвижение? Я решил ...

Хроники первого года «бессылочной» эпопеи Яндекса, создание, продвижение и заработок на сайте

> Хроники первого года «бессылочной» эпопеи Яндекса Здравствуйте, уважаемые читатели блога Говоря о новых тенденциях ...

Хостинг и все что с ним связано, работа с cPanel, создание, продвижение и заработок на сайте

> Хостинг и все что с ним связано, работа с cPanel Хотел в этом посте ...

Хостинг и VPS в InDeepSky

> Хостинг и VPS в InDeepSky — гарантированный аптайм 99,98%, установка CMS в один клик, ...