Изучите Bootstrap 4 за 5 минут

izuchite bootstrap 4 za 5 minut

В январе 2018 года Bootstrap 4 (он же v4) наконец-то был выпущен после того, как он находился в альфа-версии более двух лет. Это существенная переписка. Под капотом есть не только много изменений, но и несколько новых концепций, о которых вам предстоит подумать.

Поэтому в этом учебнике я собираюсь объяснить самые важные изменения от Bootstrap v3 до v4. Я предполагаю, что вы использовали Bootstrap, поэтому я не буду объяснять основы.

Вы также можете просмотреть наш бесплатный курс с Bootstrap 4 на Scrimba.

Хотите выучить Bootstrap 4? Вот наш бесплатный курс из 10 частей. Счастливой Пасхи!

Теперь давайте рассмотрим самые важные изменения (без определенного порядка):

№1: плоские пуговицы

Начнём с веселого и наглядного! Кнопки v4 имеют более плоский дизайн, чем v3. Вот предыдущие кнопки:

1*i8bry1W2D-UpvXbxAMqEbg

И вот некоторые из новых:

1*2-33MrQ3wRls06JBzwZyiw

Это больше соответствует более современным рекомендациям по дизайну, например, содержащимся в Material Design, который стал чрезвычайно популярным за последние пару лет.

№2: медиа-запросы лучшие

Bootstrap v3 имел слишком мало точек остановки для своей сетки, по моему мнению, самая низкая, xs, было 768 пикселей. Много трафика обычно поступает с более узких экранов, поэтому это вызвало разочарование у многих разработчиков.

Теперь они добавили новую точку остановки, xl. Этот берет на себя роль lg когда-то имел, и толкает остальные точки остановки вниз, заставляя диапазон опускаться до конца 576 пикселей.

$grid-breakpoints: (  xs: 0,  sm: 576px,  md: 768px,  lg: 992px,  xl: 1200px) !default;

Это облегчает вам построение сеток, хорошо работающих поперек. все Размеры экрана.

№3: поддержка Flexbox дает вам больше гибкости

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

Раньше нужно было определить ширину каждого столбца (от 1 до 12). Теперь вы можете определить ширину один а затем разрешите Flexbox автоматически установить другие.

Вот пример выполнения именно этого:

1*GzGaj8UK6SglmB_9J4l5VQ

Как вы можете видеть в разметке ниже, мы устанавливаем только ширину среднего столбца равной 6 (что равно половине полной ширины), а остальные столбцы просто займут любое свободное пространство.

<div class="container">  
  <div class="row">    
    <div class="col">1 of 3</div>
    <div class="col-6">2 of 3 (wider)</div>    
    <div class="col">3 of 3</div>  
  </div>
</div>

Классы Flexbox

Bootstrap 4 также поставляется с кучей классов, которые можно использовать для управления как контейнерами, так и элементами Flexbox. Чтобы превратить элемент в контейнер Flexbox, просто предоставьте ему класс d-flex.

<div class="d-flex">I'm a flexbox container!</div>

Что даст вам контейнер Flexbox с текстом в нем:

Примечание: я вспоминаю только стили, связанные с Flexbox.

Примечание: я вспоминаю только стили, связанные с Flexbox.

Давайте также добавим несколько частей и добавим еще один класс, чтоб контролировать, как они будут позиционироваться в контейнере.

<div class="d-flex `justify-content-center"`">  
  <div>Flex item</div>  
  <div>Flex item</div>  
  <div>Flex item</div>  
</div>

Что заставляет элементы центрироваться в контейнере:

1*IqLdXmIHaH2ele21hCISgA

Вы также можете добавлять классы в самые предметы. Просмотрите раздел Flex в документах, чтобы узнать больше об этом.

№4: Контролируйте интервал с помощью классов

Этот очень классный. Теперь вы можете управлять отступами и полями с помощью p-* и m-* классы. Диапазон изменяется от 0,25 до 3 rem путем применения чисел от 0 до 5.

Например, давайте предоставим нашему контейнеру Flexbox a p-5 класс, чтобы создать как можно больше отступлений:

<div class="d-flex p-5">I'm a flexbox container!</div>

Вот как это будет выглядеть:

1*BFcE6XXy_x9mV8R7zBVy3A

Вы также можете добавить t, b, r ог l если вам нужны интервалы с определенных сторон (сверху, снизу, справа, слева), например:

<div class="d-flex pl-5">I'm a flexbox container!</div>

Это лишь добавит отступы с левой стороны, например:

1*QmKsaoU7zpx753Po4bFOSw

Примечание: оригинальный контейнер flexbox на самом деле имел a _p-2_ класс по умолчанию.

№5: от пикселей до rems

Bootstrap 4 заменил пиксели на относительные единицы измерения (rems) во всех местах, кроме медиа-запросов и поведения сетки. Это означает большую гибкость и скорость реагирования, поскольку единицы rem не являются абсолютными, как пиксели.

с rems все размеры шрифтов относятся к корневому элементу ( html тег), и по умолчанию, 1rem равно 16px. Однако если вы измените размер шрифта, скажем, на 50% в корневом элементе, тогда 1rem будет равен 8px во всем приложении.

Обратите внимание, что этот переключатель не означает, что вам нужно использовать rems когда вы используете собственные стили на своем веб-сайте.

№6: Карты заменяют панели, колодцы и миниатюры

Bootstrap также поставляется с совершенно новым компонентом под названием карты, заменяющей панели, колодцы и эскизы. Карта – это гибкий и расширяемый контейнер содержимого. Он содержит параметры для верхних и нижних колонтитулов, широкий выбор содержимого, контекстные цвета фона и мощные параметры отображения.

1*UYPC0IHtsW6d6WMYYQ9_OQ

№7: До свидания, IE9

Bootstrap v4 прекратил поддержку IE8, IE9 и iOS 6. Версия v4 теперь только для IE10+ и iOS 7+. Для сайтов, нуждающихся в любом из них, используйте v3.

1*jnuoJeC371Sd9_ClrOiO_w

Конечно, есть много других изменений, которые не попали в статью, поэтому просмотрите раздел «Миграция» в документах, чтобы увидеть все изменения.

Наконец-то, если вы хотите правильно изучить Bootstrap v4, обязательно просмотрите наш бесплатный курс на Scrimba.

Кроме того, когда вы зашли так далеко, не стесняйтесь связаться со мной через Twitter:

Спасибо за чтение! Меня зовут Пер, я соучредитель Scrimba и люблю помогать людям осваивать новые навыки. Следите за мной в Twitter, если хотите получать уведомления о новых статьях и ресурсах.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

Добавить комментарий

Ваш адрес email не будет опубликован.