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

11 Январь, 2015

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

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

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

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


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

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

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

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

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

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

<span class="glyphicon glyphicon-cutlery"></span>

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

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

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

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

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

.glyphicon {
	color: #0C6B94;
}

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

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

.glyphicon-picture,
.glyphicon-eye-open {
	color: #E48107;
}

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

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

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


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

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

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

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

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

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

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

 <h1>Фотогалерея</h1>
<div class="row">
    <div class="col-xs-6">
            	<img src="img/hosts.jpg" alt="" class="img-responsive">
                <p>Файл Hosts.</p>
	</div>
	<div class="col-xs-6">
                <img src="img/frishk.jpg" alt="" class="img-responsive">
                <p>Бесплатный онлайн сервис по подбору красивых доменных имен.</p>
	</div>
</div>
<div class="row">
    <div class="col-xs-6">
                <img src="img/megaindex-cloud.jpg" alt="" class="img-responsive">
                <p>MegaIndex Cloud и Bar.</p>
	</div>
	<div class="col-xs-6">
                <img src="img/oblachnye-tekhnologii-infobox.jpg" alt="" class="img-responsive">
                <p>Infobox — облачные виртуальные сервера VPS.</p>
	</div>
</div>

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

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

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

<div class="col-xs-6 thumbnail">

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

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

               <h1>Фотогалерея</h1>
<div class="row">
    <div class="col-xs-6">
	        <div class=" thumbnail">
            	<img src="img/hosts.jpg" alt="" class="img-responsive">
                <p class="caption">Файл Hosts.</p>
							</div>
	</div>
	<div class="col-xs-6">
			<div class=" thumbnail">
                <img src="img/frishk.jpg" alt="" class="img-responsive">
                <p class="caption">Бесплатный онлайн-сервис по подбору красивых доменных имен.</p>
			</div>
	</div>
</div>
<div class="row">
    <div class="col-xs-6">
			<div class=" thumbnail">
                <img src="img/megaindex-cloud.jpg" alt="" class="img-responsive">
                <p class="caption">MegaIndex Cloud и Bar.</p>
			</div>
	</div>
	<div class="col-xs-6">
			<div class=" thumbnail">
                <img src="img/oblachnye-tekhnologii-infobox.jpg" alt="" class="img-responsive">
                <p class="caption">Infobox — облачные виртуальные сервера VPS.</p>
			</div>
	</div>
</div>

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

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

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

	<div class="col-md-3 col-sm-6">
		<div class=" thumbnail caption">
			<div class="caption">
				<h4><span class="glyphicon glyphicon-shopping-cart"></span> Установка VirtueMart 2</h4>
				<p>Многа букф.</p>
				<p><a  target="_blank" href="http://ktonanovenkogo.ru/joomla/virtuemart-joomla/ustanovka-virtuemart-2-sozdaniya-internet-magazin-joomla.html#more-7020">Читать далее >></a></p>
			</div>
		</div>
	</div>

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

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

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

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


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

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

<table class="table">

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

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

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

<table class="table table-striped">

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

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

<table class="table table-striped table-bordered">

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

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

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

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

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

 <div class="table-responsive">

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

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

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

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

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

<div class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
		<div class="panel panel-default">
			<div  class="panel-heading">
					<h4>Яндекс Директ — основы создания  кампании</h4>
			</div>
			<div class="panel-body">
					<p>Многа букф.</p>
					<p><a  target="_blank" href="http://ktonanovenkogo.ru/seo/prodvizhenie-kommercheskix-sajtov/yandeks-direkt-osnovy-sozdaniya-uspeshnoj-reklamnoj-kampanii.html#more-7017">Читать далее >></a></p>
			</div>
		</div>
	</div>

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

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

Продолжение следует >>> (Тут можно подписаться на почтовую рассылку с анонсами новых статей)

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

Еще:

Рубрики :Отзывчивый дизайн (Bootstrap)

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

Петр

Спасибо, подписался.

Сергей

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

Денис

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

Евеліна

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

Подписаться не комментируя