В предыдущей лекции
мы узнали о адаптивном дизайне.
Мы также кратко упомянули, что система Grid Bootstrap
предназначена для поддержки отзывчивых веб-сайтов.
Как сетка Bootstraps поддерживает это?
И что именно включает в себя Grid Bootstrap,
что позволяет нам создавать отзывчивые веб-сайты?
Давайте поговорим немного подробнее о системе Grid Bootstrap
и о том, как она поддерживает отзывчивость.
Мы видели использование метатега viewport в предыдущем уроке,
когда мы сделали первоначальное упражнение по настройке Bootstrap на нашей странице index.html.
Тогда я кратко сослался на эту конкретную строку в коде.
Давайте попробуем понять, почему мы используем это на нашей странице index.html.
Здесь мы указываем, что,
когда наша веб-страница визуализируется браузером в определенном устройстве, то
их рендеринг в браузере будет учитывать размер экрана и
автоматически адаптировать рендеринг страницы к ширине экрана устройств.
Таким образом, у нас есть адаптивные классы,
классы CSS, встроенные в нашу структуру пользовательского интерфейса,
то это гарантирует, что наша веб-страница
правильно отображается для этого конкретного размера экрана.
Это место, где система Grid Bootstrap приходит нам на помощь и
позволяет нам создавать отзывчивые веб-сайты.
Поэтому снова, подчеркивая этот момент,
сетка Bootstrap предназначена для отзывчивой.
Вы уже видели, что это означает в предыдущей лекции,
и мобильный сначала, о котором мы уже говорили в предыдущей лекции, а затем жидкости,
автоматически адаптируясь к ширине экрана.
Сетка Bootstrap использует преимущества макета CSS flexbox.
Макет CSS flexbox, который поддерживается
более поздними версиями различных браузеров,
позволяет гораздо более простые и гибкие варианты макета в CSS.
Теперь фактическое обсуждение того,
как работает макет CSS flexbox, выходит за рамки этого курса,
мы ограничимся тем, как CSS flexbox
используется Bootstrap для своей системы сетки.
Ранее у Bootstrap была своя система сетки, которая предшествовала макету CSS flexbox,
но последняя версия Bootstrap
сделала макет CSS flexbox в качестве стандарта для сетки Bootstrap.
Эта компоновка flexbox может легко обрабатывать
динамический контент и может адаптировать контейнеры к динамическому контенту,
а также может легко адаптироваться к
неизвестному размеру фактического содержимого, заключенного внутри контейнеров.
Макет flexbox также поддерживает агностический макет направления.
То, что макет flexbox приносит в сетки Bootstrap, -
это возможность сделать легкое вертикальное выравнивание содержимого внутри родительского элемента.
Мы увидим использование этого в упражнении, которое следует.
Кроме того, он позволяет легко переупорядочить содержание
на различных устройствах и разрешения экрана с помощью медиа-запросов.
Опять же, мы увидим немного этого в упражнении о том, как Bootstrap
использует это для поддержки интересных способов выкладки контента.
Кроме того, само содержимое,
контейнеры содержимого также могут быть спроектированы как столбцы равной высоты, так что
контейнер содержимого с наибольшей высотой определяет
высоту всех оставшихся контейнеров, которые расположены в той же строке.
Давайте теперь поговорим немного подробнее о сетке Bootstrap и о том, как она на самом деле работает.
Способ работы сетки Bootstrap
заключается в применении контейнера плюс к самому внешнему слою.
Мы можем использовать div для
определения элемента, для которого мы применяем класс контейнера в целом.
Контейнер является самой внешней единицей, в пределах которой выкладывается фактическое содержимое.
Bootstrap поддерживает как класс контейнера, который является макетом фиксированной ширины,
что означает, что сам контент ограничен фиксированной шириной на экране.
Этот класс контейнера позволяет этой фиксированной ширине автоматически адаптироваться
к размеру экрана с помощью медиа-запросов, так
что реагирующий дизайн приходит в наше спасение.
Позже мы увидим, как этот контейнер будет подстраиваться под различные размеры экрана.
Теперь у нас также есть гибкость использования в
другой классической жидкости контейнера, которая
позволяет контейнер автоматически адаптироваться к размеру экрана.
Но контейнер с фиксированной шириной
фиксирует размер фактической ширины макета.
Внутри контейнера содержимое будет выложено в виде строк,
поэтому, как правило, то, что мы будем делать внутри
и из div, к которому мы применяем класс контейнера,
мы включим внутренний div, к которому мы будем применять класс строки.
Таким образом, сам контент будет разбит по вертикали на несколько строк.
И как только это будет разделено на строки, в каждой строке
вы можете затем разместить содержимое с помощью столбцов.
Таким образом, каждая строка в Bootstrap
будет разделена на 12 столбцов одинакового размера.
Теперь вы можете создать свой контент, чтобы занять любое количество этих 12 столбцов.
Итак, и тот факт, что сам контент адаптируется к
ширине экрана и сама строка,
заключенная внутри контейнера, автоматически адаптируется к ширине экрана,
а также к столбцам,
будут определены 12 столбцов.
Их ширина будет определяться строкой сама по себе.
Таким образом, это означает, что для разных размеров экрана,
любой контент, который вы макетируете, все эти 12 столбцов
автоматически настраиваются на ширину, разрешенную для содержимого.
Таким образом, это то, как отзывчивость
встроена в сетку Bootstrap для выкладки содержимого.
Итак, как именно мы планируем содержание?
Мы поговорим об этом в следующих нескольких слайдах.
Сетка Bootstrap сама,
предоставляет нам пять классов для указания различных размеров экрана по умолчанию.
Существует класс по умолчанию, который нацелен на все размеры экрана,
начиная от сверхмалого до сверхбольшого.
Таким образом, весь диапазон ширины экрана в терминах Bootstrap
делится на дополнительные малые, малые,
средние, большие и очень большие размеры экрана.
Затем посмотрите, как эти различные классы
размеров экрана подробно определены на одном из последующих слайдов.
Таким образом, в вашем коде
вы определите спецификацию макета,
указав sm для малого размера экрана,
md для среднего, lg для большого
и xl для очень больших размеров экрана.
Таким образом, когда вы делаете макет,
как мы видели на предыдущем слайде,
каждая строка в системе сетки Bootstrap делится на 12 столбцов.
Теперь мы будем размещать контент, используя то, что называется классами столбцов.
Для классов столбцов,
мы можем указать, как макет делается для различной ширины экрана.
Посмотрите на детали этого в последующих слайдах позже.
Но позвольте мне быстро обратить ваше внимание на то, как мы указываем размеры колонок.
Они могут указать размеры столбцов как col,
который является одним из классов, которые они скажут col-sm для
малых и col-md для средних и больших и очень больших и так далее.
Теперь эти классы столбцов используются, чтобы
точно указать, сколько столбцов в строке будет занимать каждый кусок содержимого.
Как это работает?
Увидим это на следующем слайде.
Итак, возвращаясь к нашей Bootstrap Grid,
предположим, что у нас есть часть контента, и мы хотим выложить спокойствие контента.
Мы можем указать, что этот контент заключен внутри другого div,
к которому мы применяем класс столбца,
например, col-sm-5.
Таким образом, в этом случае мы указываем, что для небольших и очень больших размеров экрана
этот фрагмент контента будет занимать пять столбцов из этих 12 столбцов.
Теперь ты сразу спросишь меня,
как насчет дополнительного курения?
Если он явно не указан для дополнительной смарт-блокировки
по всей ширине 12 столбцов,
они могут явно указать, от какого диапазона до
какого диапазона макет столбца будет занимать сколько столбцов.
Итак, в этом конкретном случае,
когда я указываю, я называю их только sm-5,
я имею в виду, что этот конкретный контент, который заключен внутри этих div,
будет занимать пять столбцов для
всех размеров экрана, от малого до очень большого.
Теперь мы видим, что из 12 столбцов
мы уже заняли пять столбцов.
Осталось еще семь столбцов.
Я мог бы взять еще один кусок контента, а затем разместить его справа от этого,
защитив другой div, а затем применив столбец sm-7.
Теперь, в этом случае,
вы видите, что 5 плюс 7 равно 12.
Таким образом, эти две части содержимого, которые заключены в два div,
теперь будут расположены бок
о бок, и общая сумма из них занимает всю ширину столбца 12.
Итак, вот как мы можем указать и работать с 12 столбцами
в определении макета текущего уровня.
С использованием макета гибкого окна CSS
Bootstrap также поддерживает то, что называется столбцами автокомпоновки.
Итак, в этом случае
я могу просто указать
столбец sm, не указывая, сколько столбцов он должен занимать.
Но в случае, если я указываю три столбца ширины
Doobs sm в моем heml 5, то сетка начальной загрузки автоматически разместит это содержимое внутри этих div
, бок о бок, так
что каждый из них получает одну треть от общей ширины.
Итак, поскольку у нас 12 столбцов здесь,
каждый из этих трех получит по четыре столбца.
И об этом автоматически заботится механизм макета bootstraps.
Теперь мы можем явно указать
количество столбцов, которые занимают определенный фрагмент контента.
Так, например, предположим, что я указываю три класса столбцов,
но средний я указываю столбец sm 6.
Затем, что происходит, когда bootstrap делает макет,
средний будет занимать шесть столбцов,
а затем левый и правый части контента будут занимать все, что осталось.
Итак, из 12 столбцов, которые у нас есть,
если 6 столбцов, которые занимают средний кусок контента,
то мы оставили с нами еще 6 столбцов и которые будут
поровну разделены между содержимым и двумя сторонами этого среднего столбца.
Таким образом, каждый из них получит свободные столбцы пространства каждый.
Таким образом, макет автоматически выполняется с помощью Bootstrap.
В упражнении мы увидим различные комбинации использования такого рода
спецификаций, сколько столбцов каждый кусок контента будет занимать в цветовой компоновке.
В этой таблице кратко описывается, как Bootstrap
обрабатывает различные сетки экрана и, соответственно, как вы идентифицируете эти сетки экрана.
Итак, как я указывал ранее,
Bootstrap делит весь диапазон ширины экрана на 5 классов.
Дополнительные маленькие экраны — это те, чьи сетки находятся ниже 776 пикселей.
Небольшие экраны - это те, которые находятся между 576 и ниже 768 пикселей.
Средние экраны от 768 до 992,
большие от 992 до 1200 и все около 1200 пикселей ширина
рассматривается как очень большой экран.
Таким образом, так настраивается сетка Bootstrap по умолчанию.
Теперь, как только вам будет комфортно с Bootstrap,
вы также можете настроить эти подразделения самостоятельно.
Но для этого курса
мы собираемся остаться с конфигурацией по умолчанию, поддерживаемой bootstrap.
Теперь поведение сетки в этом случае
заключается в том, что все, что выложено для сверхмалого,
будет горизонтально во все времена,
для более высоких битов они будут свернуты до ширины 2start,
но горизонтально относительно точек разрыва.
Мы увидим, как это работает в короткое время с некоторыми примерами.
Теперь мы видели использование контейнера на предыдущем слайде.
Для небольших экранов
ширина контейнера автоматически определяется шириной экрана.
Но для малых, средних,
больших и очень больших,
ширина контейнера как указано.
Итак, если вы используете div с контейнером класса,
то для небольших экранов это 540 пикселей.
Таким образом, вы заметите, что если у вас есть ширина экрана от 576 до 768,
ваш контент будет выложен в 540 пикселей,
будет центрирован по ширине экрана.
Таким образом, оставшееся пространство будет оставлено в виде полей по обе стороны от этого содержимого.
Аналогично, для среды это 720 пикселей и так далее.
Теперь вы указываете, сколько столбцов занимает каждый контент.
Затем префиксы класса столбцов, которые вы будете использовать
is.col для дополнительных маленьких, .col-sm для малых,
вплоть до очень больших.
Если вы укажете что-то с.col-md,
то это применимо для средних и сверхбольших экранов.
Итак, всякий раз, когда вы указываете какие-либо col- и некоторые числа,
то это относится к этому конкретному размеру экрана и всему, что касается этого размера экрана.
Теперь, во всех случаях размера экрана,
количество столбцов определяется как 12 столбцов.
Сетка в случае bootstrap предназначена для 12 столбцов и это настраивается,
но значение по умолчанию 12 столбцов.
Причина выбора 12 заключается в том, что 12 является хорошим кратным двум, трем,
четырем и так далее.
Таким образом, это дает вам много гибкости с точки зрения того,
сколько столбцов вы выбираете, чтобы раскладывать свой контент.
Между каждым столбцом, поэтому, если вы
выложите две части содержимого бок о бок с их divs,
между этими двумя фрагментами контента они будут небольшим желоба, который будет оставлен.
Пустое пространство, которое будет оставлено без ширины желоба,
которая по умолчанию составляет всего 30 пикселей.
Таким образом, 15 пикселей от одного фрагмента контента и 15 пикселей от другого фрагмента контента.
SumTotal вместе 30 пикселей
пробела останется между двумя фрагментами содержимого.
Подумайте о том, как
выполняется макет столбца
газеты, и вы начинаете видеть соответствие между макетом столбца газеты и как
сетка начальной загрузки делает макет содержимого на этом поле.
Сетка Bootastrap позволяет вам делать контент следующего уровня,
поэтому вы можете заключать контент внутри содержимого, а затем делать вложенный макет содержимого.
Кроме того, он поддерживает смещения.
Мы увидим использование смещений также в некоторых примерах позже.
Итак, давайте рассмотрим наш первый пример того, как вы применяете классы столбцов bootstraps
и как они будут фактически отображаться на разных размерах экрана.
Вот пример ситуации, когда я применил к двум div,
дефис столбца 12, а затем дефис столбца sm дефис пять для
красного кусочка контента, а для
другого я применил дефис столбца 12 и столбец sm семь.
Таким образом, способ этого контента будет выложен для дополнительных небольших экранов,
два фрагмента контента будут сложены один поверх другого.
Таким образом, красный будет уложен на вершине морской зеленого цвета.
Но для небольших и очень больших экранов
два фрагмента контента будут выложены бок о бок.
Причина этого в том, что мы сказали столбец см пять и столбец см семь для двух.
Таким образом, для небольших и очень больших они раскладываются бок
о бок, так что красный контент будет занимать самые левые
пять столбцов, а зеленое содержимое будет занимать правильные семь столбцов вашей строки,
вплоть до небольших размеров экрана.
Так вот как мы бы указывали макет контента для разных размеров экрана.
Bootstrap также предоставляет дополнительные классы
, называемые как классы дефисов Order, которые позволяют вам изменить порядок содержимого на экране.
Так, например, если вы применяете порядок sm первым, то
порядок некоторого последнего класса к divs,
как показано в примере здесь, в этом случае
div, для которого вы применяете порядок sm last, будет нажата в
правую сторону экрана, а порядок
sm first div будет перемещен в левую сторону Экран.
Таким образом, применение этих классов заказов позволяет переупорядочить содержимое скрипта.
Не только это, заказ sm также позволяет указать тот же порядок sm один на
заказ sm 12, чтобы указать порядок, в котором контент должен быть отрисован на экране.
Таким образом, используя большее число,
вы можете сдвинуть содержимое в правую сторону
строки, а меньшее число сместит содержимое в левую сторону строки.
Пример этого мы увидим и в упражнении.
Смешанная интересная поддержка, которую Bootstrap Grid приносит с использованием
макета Flexbox, заключается в вертикальном выравнивании содержимого.
Более ранние версии Bootstrap,
такие как Bootstrap 3 и более ранние,
не имели возможности выполнять вертикальное выравнивание контента.
Используя Flexbox для проектирования Bootstrap Grid в Bootstrap 4,
мы получаем гибкость, которую CSS Flexbox приносит с точки зрения вертикального выравнивания.
Поэтому, если вы хотите, чтобы содержимое было вертикально центрировано,
то к строке
вы примените класс под названием «центр выравнивания элементов».
Таким образом, в этом случае, независимо от того, какой контент выложен,
будет выложен по вертикали в пределах этой конкретной строки.
Таким образом, содержимое, которое занимает
наибольшую высоту, будет тот, к которому остальные будут
выровнены, когда он выложен в этой строке или если вы предварительно укажете высоту строки,
то все содержимое будет центрировано вертикально внутри этой конкретной строки.
Мало того, что Grid Bootstrap также поддерживает горизонтальное выравнивание содержимого.
Давайте посмотрим на пример.
Поэтому, если вы укажете свой контент таким образом.
Скажем, у вас есть три столбца, а первый вы указываете столбец класса div три,
а затем средний вы скажете div class class auto.
Я собираюсь вернуться к этой колонке авто через короткое время.
И правый говорит столбец класса div 3.
Таким образом, в этом случае мы указываем, что левая и
крайняя правая части контента будут занимать три столбца каждый.
Средний, когда я говорю, «column auto»,
это означает, что количество столбцов, которые
занимает этот конкретный div, будет автоматически определяться содержимым, которое заключено внутри.
Таким образом, исходя из содержимого,
количество столбцов, занятых div, автоматически настраивается.
В этом конкретном случае, в данном макете,
этот конкретный контент размещается в четырех колонках.
Итак, теперь у вас есть четыре столбца, используемые центром div,
три столбца слева и три столбца справа.
Итак, общая сумма, у вас есть 10 столбцов.
Таким образом, у вас есть два столбца, которые остаются пустыми.
Теперь, если для строки задан
параметр «Выравнивание центра содержимого», то
все содержимое этой строки будет центрировано
относительно строки по горизонтали.
Вы также можете иметь содержимое с выравниванием по левому краю,
выравнивание по правому краю и несколько других опций.
Подробности приведены в документации по загрузкам.
Bootstrap также позволяет делать смещения столбцов.
Как это работает? Давайте посмотрим на пример.
В этом столбце смещение,
мы можем указать часть содержимого,
добавить к этому, если мы применим класс как дефис sm дефис один.
То, что мы указываем, это для небольших и очень больших экранов,
этот фрагмент контента должен быть смещен вправо на один столбец.
Поэтому, когда этот контент выложен, как вы можете видеть,
самый левый столбец остается пустым, а содержимое смещается вправо на один столбец.
А оставшийся контент можно размещать на правой стороне.
Таким образом, общая сумма, вы можете видеть, что два div будут
занимать 11 столбцов, но один столбец смещен вправо.
Так вот как мы можем контролировать макет содержимого, используя смещение столбца.
Таким образом, как вы можете видеть,
используя спецификации размера столбца,
вертикальное и горизонтальное выравнивание
, смещение, толчок и тянуть,
и flex сначала и flex последний,
мы можем получить много контроля над тем, как мы выкладываем
содержимое для различной ширины экрана и разных размеров экрана .
Bootstrap идет еще дальше, позволяя вам вставлять контент внутри divs.
Так, например, если вы укажете два div,
как вы видите с столбцом sm пять и столбцом sm семь,
два содержимого будут выложены так, как показано здесь.
Теперь, внутри правого div,
я могу снова войти и
разделить ширину div на строку, а затем эта строка автоматически даст мне
еще 12 столбцов для этой части экрана, а затем я могу сделать макет, используя
вложенность div и сделать макет для разных частей этого столбца .
Таким образом, вложенность, как это,
приносит вам еще большую гибкость в том, как вы раскладываете контент на своем поле.
Со всеми обсуждениями о Bootstrap Grid System и о том, как
Bootstrap Grid поддерживает различные способы размещения контента
, мы перейдем к следующему набору упражнений.
Мы собираемся применить сетку Bootstrap к нашей странице index.html,
чтобы сделать макет содержимого внутри или index.html страницы.
Мы также будем использовать некоторые пользовательские классы CSS.