Урок 8. Знакомство с Bootstrap


И последний пост из серии "знакомство с Bootstrap". Загляните обязательно в первые два, если вы их пропустили. А сегодня расскажу про еще об одном инструменте волшебного набора фронтенд-разработчика Bootstrap.

Основные инструменты Bootstrap (продолжение №2)

  • Навигация


    Ну вот, опять! Так и хочется, написать что-то, вроде "Это просто бомба!" ????????

    Да, навигация в Bootstrap - это очень полезная вещь. Очень удобно можно сделать адаптивную верстку, то есть ваше приложение будет красивым на любом девайсе. Например, навигационная панель на мобильных устройствах может сворачиваться, а все её элементы будут отображаться при нажатии на кнопку.


    Навигационную панель можно зафиксировать сверху или снизу: при прокрутке страницы они будут оставаться на своем месте, прокручиваться будет вся остальная часть.


    Код стандартной самой простой навигационной панели будет выглядеть примерно так:<nav class="navbar navbar-default">
      <div class="container-fluid" >
        <div class= "navbar-header" >
          <a class= "navbar-brand" href="#" >
            <img alt="Brand" src="..." >
          </a>
        </div>
      </div>
    </nav>

    Менять внешний вид навигационной панели можно всего лишь добавлением или изменением класса.


    Подробнее мы к этому вернемся в следующих уроках.


Давайте закрепим материал поtrap

Bootstrap - это способ сделать классно отображающийся на любом устройстве вебсайт. Когда вы делаете свой сайт, вы делаете, наверное, его на компьютере. Смотрите и всё выглядит отлично, но стоит открыть его на мобильном устройстве, к примеру, и вы понимаете, что что-то не так. Bootstrap позволяет избавиться от этой головной боли, именно поэтому этот набор фронтенд-разработчика сейчас настолько популярен.

Bootstrap - это не единственный подобный набор. Есть ещё, например, тоже популярные Foundation и Skeleton. Я обязательно как-нибудь сделаю сравнение основных наборов. Но учиться мы будем пока Bootstrap.

Если вы делали домашние задания предыдущих двух уроков, то вы должны были уже не раз побывать на сайт getbootstrap.com, где можно найти несколько вариантов демо-сайтов, сделанных с помощью Bootstrap. Это не реклама этого сайта, просто без него

.col-...-2, где вместо ... стоит идентификатор размера экрана: xs - extra small - мобильные телефоны, sm - small - планшеты, md - medium - десктопы и lg - large - тоже десктопы, но с большим разрешением.

..., другой - 10 (.col-...-10. Если вы к этим двум элементам, в сумме добавите еще один, занимающий 6 столбцов (.col-...-6), он отобразится на следующей строке.

Подключая Bootstrap, мы получаем набор красивых украшений для текста в виде, например цитат ˂blockquote˃, заголовков ˂h1˃, ..., ˂h6˃, обычные параграфы с классами .text-danger, .bg-success.text-success и т.д.


Comments 1


Хороший такой пост, спасибо! Я тоже люблю Bootstrap <3 Столько элементиков красивеньких готовых и бесплатных есть в доступе :)

14.01.2017 20:14
0

? какой программой делаешь анимацию?

14.01.2017 21:09
0

Чаще всего использую LICEcap, который сохраняет записи с экрана сразу в gif, гифки заливаю либо на imgur, либо на giphy.com

15.01.2017 08:11
0
My pageSettingsLogout
Cancel Confirm
100%
Cancel Confirm
Cancel Confirm