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

Оцените материал
(0 голосов)

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

Сегодня же мы рассмотрим как добавить на сайт глиф-иконки, зачем они нкжны на сайте и как их  собственно настроить с помощью файла  стилей. Ну и рассмотрим конечно же, классы 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.

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

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

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

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

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

 

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

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

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

Вариант 1

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


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

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

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

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

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

Вариант 2

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

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


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

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

 

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

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


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


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


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

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

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

 

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

  1. <table class="table">
  2. ...
  3. </table>

Например:

  1. <table class="table">
  2. <thead>
  3. <tr>
  4. <th>№ п/п</th>
  5. <th>Имя</th>
  6. <th>Фамилия</th>
  7. <th>E-mail</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>1</td>
  13. <td>Иван</td>
  14. <td>Чмель</td>
  15. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  16. </tr>
  17. <tr>
  18. <td>2</td>
  19. <td>Петр</td>
  20. <td>Щербаков</td>
  21. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  22. </tr>
  23. <tr>
  24. <td>3</td>
  25. <td>Юрий</td>
  26. <td>Голов</td>
  27. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  28. </tr>
  29. </tbody>
  30. </table>

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

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

  1. <table class="table table-striped">
  2. ...
  3. </table>
Внимание: Для оформления таблиц по типу полос "зебры" в Twitter Bootstrap 3 используется селектор :nth-child, который не поддерживается в браузере Internet Explorer 8.

Например:

  1. <table class="table table-striped">
  2. <thead>
  3. <tr>
  4. <th>№ п/п</th>
  5. <th>Имя</th>
  6. <th>Фамилия</th>
  7. <th>E-mail</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>1</td>
  13. <td>Иван</td>
  14. <td>Чмель</td>
  15. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  16. </tr>
  17. <tr>
  18. <td>2</td>
  19. <td>Петр</td>
  20. <td>Щербаков</td>
  21. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  22. </tr>
  23. <tr>
  24. <td>3</td>
  25. <td>Юрий</td>
  26. <td>Голов</td>
  27. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  28. </tr>
  29. </tbody>
  30. </table>

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

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

  1. <table class="table table-bordered">
  2. <thead>
  3. <tr>
  4. <th>№ п/п</th>
  5. <th>Имя</th>
  6. <th>Фамилия</th>
  7. <th>E-mail</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>1</td>
  13. <td>Иван</td>
  14. <td>Чмель</td>
  15. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  16. </tr>
  17. <tr>
  18. <td>2</td>
  19. <td>Петр</td>
  20. <td>Щербаков</td>
  21. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  22. </tr>
  23. <tr>
  24. <td>3</td>
  25. <td>Юрий</td>
  26. <td>Голов</td>
  27. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  28. </tr>
  29. </tbody>
  30. </table>

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

№ п/пИмяФамилияE-mail
1 Иван Чмель Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
2 Петр Щербаков Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
3 Юрий Голов Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

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

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

  1. <table class="table table-hover">
  2. <thead>
  3. <tr>
  4. <th>№ п/п</th>
  5. <th>Имя</th>
  6. <th>Фамилия</th>
  7. <th>E-mail</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>1</td>
  13. <td>Иван</td>
  14. <td>Чмель</td>
  15. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  16. </tr>
  17. <tr>
  18. <td>2</td>
  19. <td>Петр</td>
  20. <td>Щербаков</td>
  21. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  22. </tr>
  23. <tr>
  24. <td>3</td>
  25. <td>Юрий</td>
  26. <td>Голов</td>
  27. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  28. </tr>
  29. </tbody>
  30. </table>

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

№ п/пИмяФамилияE-mail
1 Иван Чмель Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
2 Петр Щербаков Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
3 Юрий Голов Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

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

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

  1. <table class="table table-condensed">
  2. <thead>
  3. <tr>
  4. <th>№ п/п</th>
  5. <th>Имя</th>
  6. <th>Фамилия</th>
  7. <th>E-mail</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>1</td>
  13. <td>Иван</td>
  14. <td>Чмель</td>
  15. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  16. </tr>
  17. <tr>
  18. <td>2</td>
  19. <td>Петр</td>
  20. <td>Щербаков</td>
  21. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  22. </tr>
  23. <tr>
  24. <td>3</td>
  25. <td>Юрий</td>
  26. <td>Голов</td>
  27. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  28. </tr>
  29. </tbody>
  30. </table>

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

№ п/пИмяФамилияE-mail
1 Иван Чмель Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
2 Петр Щербаков Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
3 Юрий Голов Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

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

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

  1. <table class="table">
  2. <thead>
  3. <tr>
  4. <th>№ чека</th>
  5. <th>Способ платежа</th>
  6. <th>Дата платежа</th>
  7. <th>Сумма</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr class="active">
  12. <td>2803</td>
  13. <td>Наличные</td>
  14. <td>04.08.2014</td>
  15. <td>2005.00</td>
  16. </tr>
  17. <tr class="success">
  18. <td>2804</td>
  19. <td>Карта VISA</td>
  20. <td>04.08.2014</td>
  21. <td>1270.00</td>
  22. </tr>
  23. <tr class="info">
  24. <td>2805</td>
  25. <td>Наличные</td>
  26. <td>05.08.2014</td>
  27. <td>1356.50</td>
  28. </tr>
  29. <tr class="warning">
  30. <td>2806</td>
  31. <td>Наличные</td>
  32. <td>05.08.2014</td>
  33. <td>5200.05</td>
  34. </tr>
  35. <tr class="danger">
  36. <td>2807</td>
  37. <td>Карта VISA</td>
  38. <td>06.08.2014</td>
  39. <td>315.70</td>
  40. </tr>
  41. </tbody>
  42. </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 полоса прокрутки будет отсутствовать.

  1. <div class="table-responsive">
  2. <table class="table table-bordered">
  3. <thead>
  4. <tr>
  5. <th>№ п/п</th>
  6. <th>Имя</th>
  7. <th>Фамилия</th>
  8. <th>E-mail</th>
  9. <th>Увлечения</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr>
  14. <td>1</td>
  15. <td>Иван</td>
  16. <td>Чмель</td>
  17. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  18. <td>Плавание, бодибилдинг, боевые искусства</td>
  19. </tr>
  20. <tr>
  21. <td>2</td>
  22. <td>Петр</td>
  23. <td>Щербаков</td>
  24. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  25. <td>Европейские танцы, Стрип-денс, Ролики</td>
  26. </tr>
  27. <tr>
  28. <td>3</td>
  29. <td>Юрий</td>
  30. <td>Голов</td>
  31. <td>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</td>
  32. <td>Горный велосипед, скейтборд, катание на квадрацикле</td>
  33. </tr>
  34. </tbody>
  35. </table>
  36. </div>

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

№ п/пИмяФамилияE-mailУвлечения
1 Иван Чмель Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. Плавание, бодибилдинг, боевые искусства
2 Петр Щербаков Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. Европейские танцы, Стрип-денс, Ролики
3 Юрий Голов Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. Горный велосипед, скейтборд, катание на квадрацикле

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

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

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

 

 

Прочитано 1286 раз Последнее изменение Вторник, 25 июля 2017 10:25
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте: