Урок 7. Знакомство с Bootstrap (продолжение)
Закончились новогодние каникулы у школьников, у студентов и у нас с вами тоже. В прошлый раз я начала рассказывать о чудесной штуке, без которой веб-разработка сейчас практически не обходится - BOOTSTRAP. И сегодня хочу продолжить наше с ней знакомство.
Bootstrap - набор инструментов для создания веб-страниц. В прошлом уроке я уже рассказала о некоторых инструментах: сетках, шаблонах и типографике.
Итак, продолжим...
Основные инструменты Bootstrap (продолжение)
Медиа. Это тоже очень прикольная вещь, потому что с помощью верстки медиа-объектов, вы можете создавать сразу красивый, отлично сверстанный веб-сайт. Допустим, у вас новостная лента с изображениями. Для того, чтобы она выглядела красиво, достаточно элементам добавить необходимые классы:
˂div class="media"˃
˂a class="pull-left" href="#"˃
˂img class="media-object" src="..." alt="..."˃
˂/a˃
˂div class="media-body"˃
˂h4 class="media-heading"˃Заголовок медиа˂/h4˃
...
˂/div˃
˂/div˃
Можно для оформления сетки с изображениями, видео и текстами использовать, так называемые, эскизы с помощью класса
thumbnail
.˂div class="col-xs-6 col-md-3"˃
˂a href="#" class="thumbnail"˃
˂img src="image.jpg" alt="..."˃
˂/a˃
˂/div˃
Таблицы тоже можно делать красивыми, используя простой, но красивый дизайн, добавлением лишь одного класса объекту
table
.˂table class="table"˃
...
˂/table˃
Формы в Bootstrap помогут вам красиво оформить любые кнопки, поля для ввода данных и другие элементы.
˂div class="input-group"˃
˂span class="input-group-addon"˃@ ˂/span˃
˂input type="text" class="form-control" placeholder="Username"˃
˂/div˃Элементы можно комбинировать между собой, убирать и добавлять, можете делать с ними всё, что захотите.
На самом деле мне сложно описывать инструменты Bootstrap, потому что я их все очень люблю 😅 и каждый раз мне хочется просто написать: этот инструмент - просто бомба! 💣 Хотя, наверное, пока так и получается. Но хочу сразу сказать, что это пока только знакомство с возможностями этой волшебной штуки Bootstrap (причем будет еще третья часть 😌).
А пока домашнее задание: если вы не заглядывали еще, обязательно загляните на этот сайт. И поэкспериментируйте с инструментами, о которых я сегодня написала.
Все уроки by @qqc
Все уроки по фронтенд-разработке by @qqc