Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
qqc
7 лет назад

Урок 7. Знакомство с Bootstrap (продолжение)

urok7

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

3
2968.796 GOLOS
На Golos с November 2016
Комментарии (4)
Сортировать по:
Сначала старые