Бутстрап 3 — как добавить глиф-иконки на сайт и задать стили для таблицы

Бутстрап 3 — как добавить глиф-иконки на сайт и задать стили для таблицы

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

как добавить глиф-иконки на сайт Bootstrap

 

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

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

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

Собственно, вам нужно знать только название нужного глифа или иконки, потому что вставка на страницу происходит очень просто:

<span class="glyphicon glyphicon-имя-иконки"></span>

Все иконки и их названия перечислены в документации:

 

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

У меня там с прошлой статьи остался код, вот он:

<p class = "h1 bg-custom"><span class = "glyphicon glyphicon-comment"></span> Заголовок</p>

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

 

Глиф получает такой же цвет и размер, что и текст в ее блоке. Достаточно лишь изменить стили для класса h1:

color: #EBEDC9;
font-size: 12px;

 

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

Например, ее можно сделать ссылкой, обернув тегом a. Ей можно задать оформление, отличное от стоящего рядом текста.

.h1 span{
	color: brown;
	font-size: 32px;
	-webkit-filter:drop-shadow(2px 2px 0 yellow);
}

Результат:

 

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

Как сделать анимированные иконки для Bootstrap?

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

Приведу пример, чтобы вы могли понять, как вам действовать. Вставляем иконку:

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

Увеличим ее в размерах с помощью стилей:

.glyphicon-earphone{
	font-size: 60px;
	color: green;
}

 

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

@keyframes tel{
	50%{transform:rotate(45deg)}
	100%{transform:rotate(-45deg)}
}

Создаем класс, который будет активировать бесконечное кол-во повторов анимации:

.tel-anim{
	animation-name: tel;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

Все остается только прописать этот класс иконке и она начнет поворачиваться. Этот же класс можно уже прописывать любой другой иконке и с ней произойдет то же самое. Вы можете поворачивать иконки на 180, 360 (да и вообще на любое кол-во градусов), увеличивать, уменьшать, добавлять тени и т.д. Ну вообще делать все, что только можно в css.

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

Читайте также  Как создать кнопки, оформить текст и картинки в Bootstrap 3

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

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

 

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

Как добавить иконки FontAwesome на сайт.

 

Есть  2 способа подключения:

  1. Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
  2. Скачать файл иконок Font Awesome с официального сайта и подключить его в шаблон, как и обычный файл стилей. Работа сайта становится заметно быстрее.

Рассмотрим оба варианта более подробно.

Вариант 1

Заходим на официальный сайт Font Awesome и берем строку кода подключения загрузки файла с облачного хранилища. Строка будет в первом пункте страницы, также ее я продублировал ниже.

Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.

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

 

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

Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.

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

Вариант 2

Скачиваем папку с файлами отсюда.

 

 

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

 

Далее аналогичным образом ищем понравившуюся иконку и вставляем ее в нужные места шаблона.

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

 

Изменение цвета иконок

Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:

Читайте также  Что такое сетка в Bootstrap.

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

Аналогично можно прописать оформление и для всех иконок Font Awesome, если нет нужды делать каждую индивидуально. Например, получится:

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

На этом сей материал я заканчиваю. Надеюсь, что он вам будет полезен. Тема актуальная. Лично я теперь использую такие иконки на всех сайтах. Стараюсь избавляться от всех картинок, и делать все максимально чисто и просто.

Как стилизовать таблицу на Bootstrap 3.

 

Для придания таблицы базового оформления необходимо добавить класс .table к элементу table:

<table class=»table»>

</table>

 


Например:
<table class=»table»>
  <thead>

  <tr>

  <th>№ п/п</th>

  <th>Имя</th>

  <th>Фамилия</th>

  <th>E-mail</th>

  </tr>

  </thead>

  <tbody>

  <tr>

  <td>1</td>

  <td>Иван</td>

  <td>Чмель</td>

  <td>ivan@mail.ru</td>

  </tr>

  <tr>

  <td>2</td>

  <td>Петр</td>

  <td>Щербаков</td>

  <td>petr@mail.ru</td>

  </tr>

  <tr>

  <td>3</td>

  <td>Юрий</td>

  <td>Голов</td>

  <td>yuri@mail.ru</td>

  </tr>

  </tbody>

 </table>

 Оформление таблиц по типу полос «зебры»

Для выделения нечётных строк основной части таблицы (<tbody>…</tbody>) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table.

<table class=»table table-striped»>

 …

 </table>

 


Внимание: Для оформления таблиц по типу полос «зебры» в Twitter Bootstrap 3 используется селектор :nth-child, который не поддерживается в браузере Internet Explorer 8.

Например:

<table class=»table table-striped»>

<thead>

<tr>

<th>№ п/п</th>

<th>Имя</th>

<th>Фамилия</th>

<th>E-mail</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Иван</td>

<td>Чмель</td>

<td>ivan@mail.ru</td>

</tr>

<tr>

<td>2</td>

<td>Петр</td>

<td>Щербаков</td>

<td>petr@mail.ru</td>

</tr>

<tr>

<td>3</td>

<td>Юрий</td>

<td>Голов</td>

<td>yuri@mail.ru</td>

</tr>

</tbody>

</table>

 

Создание таблицы с границами

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

<table class=»table table-bordered»>

<thead>

<tr>

<th>№ п/п</th>

<th>Имя</th>

<th>Фамилия</th>

<th>E-mail</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Иван</td>

<td>Чмель</td>

<td>ivan@mail.ru</td>

</tr>

<tr>

<td>2</td>

<td>Петр</td>

<td>Щербаков</td>

<td>petr@mail.ru</td>

</tr>

<tr>

<td>3</td>

<td>Юрий</td>

<td>Голов</td>

<td>yuri@mail.ru</td>

</tr>

</tbody>

</table>

Выше приведенный пример будет выглядеть примерно так:


№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)

Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента <table>.

<table class=»table table-hover»>

  <thead>

  <tr>

  <th>№ п/п</th>

  <th>Имя</th>

  <th>Фамилия</th>

  <th>E-mail</th>

  </tr>

  </thead>

  <tbody>

  <tr>

  <td>1</td>

  <td>Иван</td>

  <td>Чмель</td>

  <td>ivan@mail.ru</td>

  </tr>

  <tr>

  <td>2</td>

  <td>Петр</td>

  <td>Щербаков</td>

  <td>petr@mail.ru</td>

  </tr>

  <tr>

  <td>3</td>

  <td>Юрий</td>

Читайте также  Как установить Bootstrap

  <td>Голов</td>

  <td>yuri@mail.ru</td>

  </tr>

  </tbody>

 </table>

 Выше приведенный пример будет выглядеть примерно так:


№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание сжатой или компактной таблицы

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

<table class=»table table-condensed»>

<thead>

<tr>

<th>№ п/п</th>

<th>Имя</th>

<th>Фамилия</th>

<th>E-mail</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Иван</td>

<td>Чмель</td>

<td>ivan@mail.ru</td>

</tr>

<tr>

<td>2</td>

<td>Петр</td>

<td>Щербаков</td>

<td>petr@mail.ru</td>

</tr>

<tr>

<td>3</td>

<td>Юрий</td>

<td>Голов</td>

<td>yuri@mail.ru</td>

</tr>

</tbody>

</table>

Выше приведенный пример будет выглядеть примерно так:


№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Дополнительные акцентные классы для строк таблицы

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

<table class=»table»>

  <thead>

  <tr>

  <th>№ чека</th>

  <th>Способ платежа</th>

  <th>Дата платежа</th>

  <th>Сумма</th>

  </tr>

  </thead>

  <tbody>

  <tr class=»active»>

  <td>2803</td>

  <td>Наличные</td>

  <td>04.08.2014</td>

  <td>2005.00</td>

  </tr>

  <tr class=»success»>

  <td>2804</td>

  <td>Карта VISA</td>

  <td>04.08.2014</td>

  <td>1270.00</td>

  </tr>

  <tr class=»info»>

  <td>2805</td>

  <td>Наличные</td>

  <td>05.08.2014</td>

  <td>1356.50</td>

  </tr>

  <tr class=»warning»>

  <td>2806</td>

  <td>Наличные</td>

  <td>05.08.2014</td>

  <td>5200.05</td>

  </tr>

  <tr class=»danger»>

  <td>2807</td>

  <td>Карта VISA</td>

  <td>06.08.2014</td>

  <td>315.70</td>

  </tr>

  </tbody>

 </table>

 Выше приведенный пример будет выглядеть примерно так:


№ чека Способ платежа Дата платежа Сумма
2803 Наличные 04.08.2014 2005.00
2804 Карта VISA 04.08.2014 1270.00
2805 Наличные 05.08.2014 1356.50
2806 Наличные 05.08.2014 5200.05
2807 Карта VISA 06.08.2014 315.70

Создание адаптивной таблицы с помощью Twitter Bootstrap

С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки. При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.

<div class=»table-responsive»>

<table class=»table table-bordered»>

<thead>

<tr>

<th>№ п/п</th>

<th>Имя</th>

<th>Фамилия</th>

<th>E-mail</th>

<th>Увлечения</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Иван</td>

<td>Чмель</td>

<td>ivan@mail.ru</td>

<td>Плавание, бодибилдинг, боевые искусства</td>

</tr>

<tr>

<td>2</td>

<td>Петр</td>

<td>Щербаков</td>

<td>petr@mail.ru</td>

<td>Европейские танцы, Стрип-денс, Ролики</td>

</tr>

<tr>

<td>3</td>

<td>Юрий</td>

<td>Голов</td>

<td>yuri@mail.ru</td>

<td>Горный велосипед, скейтборд, катание на квадрацикле</td>

</tr>

</tbody>

</table>

</div>

Выше приведенный пример будет выглядеть примерно так:


№ п/п Имя Фамилия E-mail Увлечения
1 Иван Чмель ivan@mail.ru Плавание, бодибилдинг, боевые искусства
2 Петр Щербаков petr@mail.ru Европейские танцы, Стрип-денс, Ролики
3 Юрий Голов yuri@mail.ru Горный велосипед, скейтборд, катание на квадрацикле

Табличные теги, поддерживаемые Twitter Bootstrap 3

В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.

Тег Описание
<table> Контейнер для элементов, определяющих содержимое таблицы
<caption> Заголовок таблицы
<thead> Контейнер для элементов, формирующих «шапку» таблицы
<tbody> Контейнер для элементов, формирующих основную часть таблицы
<tr> Контейнер для ячеек, являющихся элементами одной строки
<th> Специальная табличная ячейка для заголовков столбцов
<td> Табличная ячейка, предназначенная для размещения основных табличных данных

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: