Урок 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 (причем будет еще третья часть 😌).

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