Bootstrap - изучаем сетку
@honey_and_moneyСегодня разберем адаптивные блоки на нашем сайте. Создавать мы их будем с помощью классов Bootstrap.
О том как подключить библиотеки этого фреймворка я писал в предыдущей статье (http://telegra.ph/Frejmvork-dlya-dizajna-09-26)
Надеюсь вы с ней познакомились и уже смогли подключить к html-странице необходимые файлы.
Начнем с html-кода, который я подготовил:
Сначала обратите внимание на подключаемые файлы в <head>:
Тут первым файлом подключаются CSS-стили самого фреймворка. Делать это вы должны были научиться в предыдущей статье.
Вторым же файлом я подключил собственный CSS-файл стилей, который создал сам, в той же папке что и html-страница.
Как вы поняли, подключать можно сколько угодно CSS-файлов.
Далее перейдем непосредственно к тэгам, которые я уже написал в <body>:
<div class="container"> - создает контейнер для блоков на нашей странице. Начальных размеров у него нет - он подстраивается под свое содержимое.
<div class="row"> - создает строчку (ряд, линию, можно называть по разному) в нашем контейнере.
Отсюда и идет название - сетка Bootstrap.
Вам надо представить, что внутри контейнера есть строки и столбцы, а их пересечение - так называемые клетки сетки.
Мы создали строку в контейнере (которая тоже безразмерная, подстраивается под размер содержимого), теперь нам надо поделить эту строку на столбцы.
Со столбцами все интереснее. Так как мы делаем адаптивный дизайн, то в сетке нашего фреймворка предусмотрены разные классы для разных размеров экрана:
Как можно понять из таблицы, всего в строке может быть максимум 12 столбцов.
Давайте перейдем к примеру, чтобы стало более-менее понятно:
Тут я добавил в нашу строку три блока с классами "block" каждый
Этот класс я описал в созданном мною CSS-файле:
Сделал серую рамку для наглядности и задал высоту в 300 пикселей (чтобы был хоть какой-то размер, т.к. содержимого блоков у нас не будет и если не задать высоту вручную, она будет равна нулю по умолчанию)
На этом этапе мы не применяли к нашим столбцам никаких стилей из фреймворка. Если вы посмотрите на свою страницу, то там будет три блока, один под другим, растянутые на всю ширину страницы.
Давайте наконец добавим нашим блокам классы из нашей библиотеки Bootstrap:
col-md-X - сумма всех X в одной строке не должна быть больше 12. Всего в нашей строке предусмотрено 12 базовых колонок.
То есть у нас есть три col-md-4, следовательно в сумме 12 - все в порядке.
Что значит этот класс? Исходя из таблицы, которую я приводил выше - на экранах средней ширины (medium, больших или равных 992 пикселей) наши блоки будут занимать по 4 базовые колонки каждый.
Как это выглядит на странице:
Если вы начнете сужать окно браузера, то на каком-то размере блоки опять выстроятся один под другим, так как мы еще не задали классы для более маленьких экранов.
Как понять что такое базовые колонки? Для собственного примера вы можете написать в одной строчке 12 блоков с классами col-md-1 каждый.
Все эти блоки вместятся в одну строку. Если вы впишете в эту же строчку 13-й блок с таким классом, то он перенесется на новую строку. Вот в этом примере наши 12 блоков и есть 12 базовых колонок. Когда в классе мы указываем большее число, мы показываем сколько базовых колонок займет блок.
Давайте теперь добавим классы для более маленьких экранов:
Через пробел я добавил третий класс - для экранов размера small (больше либо равных 768 пикселям). 6-3-3 - в сумме 12. На маленьких экранах первый блок будет в два раза больше чем последующие два. (Это работает как отношение 6:3:3 = 2:1:1)
Ну и добавим классы для еще двух типов экранов - очень маленьких и очень больших:
col-lg-... - размер large (больше либо равен 1200 пикселям)
col-xs-... - размер extra small (меньше 768 пикселей, очень маленькие экраны - мобильные устройства). Ну и для каждого класса разное соотношение - с этим можете поэкспериментировать, поменять какие-то числа.
Для практики попробуете добавить 5 блоков в строку и для них сделать соотношение для каждого класса, проверьте, что все работает
@honey_and_money - У тебя все получится, стоит только попробовать!