Bootstrap

Изучение технологии Bootstrap (верстка сайта)

16 уроков 20 заданий Справочник Компилятор

#8 - Иконочный шрифт и изображения

#8 - Иконочный шрифт и изображения


BootstrapHTML5

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

Видео урок:

Ссылки:

1) Glyphicons
2) Скачивание Bootstrap
3) Все иконки

Исходный код

Изображения и шрифт
<img src="http://happymodern.ru/wp-content/uploads/2015/10/Proekti_karkasnih_domov_41-650x431.jpg" class="img-thumbnail">

<button class="btn btn-success">
  <span class="glyphicon glyphicon-ok"></span>
  Все хорошо
</button>

<span class="badge">57</span>

Онлайн редактор кода

Загрузка...

Задание к уроку

Работа со шрифтом и картинками
Иконочный шрифт и работа с картинками тема доволи-таки простая, поэтому задание будет простым. Вам надо самим сделать кнопку с иконкой какой-либо, а также сделать изображение с закругленными углами.
Посмотреть ответ
Создание кнопки с иконкой не должно было доставить никаких трудностей. Просто кнопка с классом btn btn-success и в ней тег <span> с классом иконкой. Чтобы сделать изображение с закругленными углами используйте класс rounded.

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также "Готовое решение".
PS: подобные задания доступны при подписке от 1 месяца!


BootstrapHTML5

Также стоит посмотреть