Добро пожаловать в Blockchain!

Твой голос чего-то стоит


Регистрация       Узнать больше

Получи ₽ 3.5 Сила Голоса подписавшись сегодня.

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

2 месяца назад в образование

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

В сети Голос авторы получают вознаграждение, когда пользователи голосуют за их посты..
Проголосовавшие читатели также вознаграждаются. Если вам понравился данный пост Вы можете вознаградить автора
Для этого зарегистрируйтесь и проголосуйте за пост.
Порядок сортировки:  Популярное

А вы про PHP случайно не планируете писать?

@antizvuk Если надо могу и я написать. Могу написать как создать социальную сеть или фреймворк. Что интересует?))

Мне бы кто простым языком про функции объяснил! Для чего они нужны и как работают! Я уже какое-то не очень продолжительное время изучаю этот язык, в целом понимаю, но функции как то не даются.

Напишите пост "Функции PHP" и расскажите все доступно и подробно ))