Bootstrap 3 bootstrap 4: Migrating to v4 · Bootstrap

Содержание

Основные отличия Bootstrap 3-ей и 4-ой версий - FantomSlim

  1. Главная
  2. База знаний
  3. Основные отличия Bootstrap 3-ей и 4-ой версий

Сегодня мы пробежимся по всем отличиям и новым возможностям между двумя версиями Bootstrap. Как правило, вам необходимо будет просто переименовать некоторые классы или поменять несколько простых параметров.

Для того чтобы сэкономить вам немного времени, я составил список действий, которые необходимо выполнить при переходе с Bootstrap 3 на Bootstrap 4.

Мы начнем с обсуждения изменений, внесенных в фреймворк Bootstrap 4, затем мы рассмотрим новый способ установки Bootstrap, узнаем как изменились единицы измерения в сетке и как flexbox может помочь при создании адаптивных макетов. Мы также обсудим изменения некоторых компонентов и посмотрим, что происходит в новых версиях JavaScript.

Наконец, мы рассмотрим некоторые из новых компонентов, включая карты, всплывающие подсказки и flexbox. Если вы готовы перенести свой сайт со старой версии Bootstrap 3 на Bootstrap 4, эта статья именно для вас.

Глобальные изменения

Список глобальных изменений в Bootstrap 4:

  • Смена Less на Sass в CSS файлах.
  • Смена px на rem в качестве единиц измерения в CSS.
  • Медиа-запросы теперь ems вместо pxs.
  • Размер шрифта увеличен с 14px до 16px.

Исходный код Bootstrap

Исходный код Bootstrap 3 содержит перекомпилированный CSS, JavaScript, и шрифты, наряду с исходными Less, JavaScript и документацией.

В Bootstrap v4.0.0-alpha, все файлы Less были заменены на Sass из-за миграции к Sass технологии через libSass. Так как Bootstrap 4 больше не поддерживает glyphicons, папку шрифтов тоже убрали.

Установка Bootstrap 4

Bootstrap 4 предлагает различные варианты для установки. На момент написания статьи, вышел Bootstrap 4 Alpha, поэтому на данный момент не все пакетные менеджеры имеют 4 альфа версию.

Вы можете выбрать нужные параметры по своему усмотрению.

  1. Исходные файлы: Используйте Bootstrap, загрузив полный пакет исходного кода, который включает в себя Sass, JavaScript и файлы документации. Для работы вам потребуется компилятор Sass, Autoprefixer и некоторые дополнительные настройки. Если вам нужны только CSS и JS файлы, вы можете просто подключить их при помощи тега <link> внутри раздела <head> перед другими таблицами стилей.
  2. Bootstrap CDN: Используйте Bootstrap CDN. Добавьте ссылку к тегу <link> внутри раздела <head>.
  3. Менеджер пакетов: Используйте менеджер пакетов, например Bower, npm, meteor или composer для установки Bootstrap. Для этого вам понадобится Sass компилятор и Autoprefixer, для установки официальной скомпилированной версии.
  4. Пользовательские сборки: Если вам нужна только часть CSS или JS Bootstrap файлов, вы можете использовать одну из пользовательских сборок:
    • Reboot включает в себя переменные/примеси, Normalize и Reset.
      Без JavaScript.
    • Grid only включает в себя переменные/примеси, и систему сетки. Без JavaScript.
    • Flexbox включает в себя весь набор Bootstrap с поддержкой Flexbox, но с пониженной совместимостью браузеров.

Обновление Bootstrap сетки

Система сетки в Bootstrap 4 по-прежнему следует тому же HTML-синтаксису, изменения коснулись лишь единиц измерения.

Например, вы можете использовать те же 12 столбцов в разметке.

<div>
    <div>
        <div>
            <div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p> </div> </div> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div>

Здесь ничего нового; Bootstrap 3 использует те же самые классы. Тем не менее, классы Bootstrap 4 используют ems а не px, а также они добавили один новый дополнительный размер для очень больших экранов. Перечислим все доступные классы вместе с их размерами экрана.

  • col-xl - очень большой экран (от 75em)
  • col-lg - большой экран (от 62em)
  • col-md - средний экран (от 48em)
  • col-sm - маленький экран (от 34em)
  • col-xs - очень маленький экран (менее 34em)

Также стоит рассмотреть классы container и

row. Контейнер имеет максимальную ширину в единицах измерения rem, в то время как строка имеет отрицательные margin слева и справа размером в -.9375rem и левый и правый padding размером в 0.9375rem, в Bootstrap 3 которые составляли 15px.

Если вы используете Sass версию Bootstrap 4, вы сможете управлять размером сетки используя следующие переменные:

  • $grid-columns: количество решеток по горизонтали (по умолчанию 12)
  • $grid-gutter-width: общий отступ вокруг каждой сетки (по умолчанию 30px)
  • $grid-float-breakpoint: минимальный размер развернутого navbar (по умолчанию $screen-sm-min)
  • $grid-float-breakpoint-max: максимальный размер при котором navbar начинает уменьшаться (размер по умолчанию $grid-float-breakpoint – 1)

Обновление компонентов сброса / Bootstrap 4 reboot.css

В Bootstrap 3 мы использовали normalize.

css для сброса стандартных стилей CSS, в Bootstrap 4 добавили улучшенную версию под названием reboot.css.

Изменение и обновление классов в Bootstrap 4

В новой версии Bootstrap убрали несколько классов и немного изменили некоторые из старых.

Типография

В Bootstrap типографике используется rem. В отличие от px и em, они не являются фиксированными или относительными единицами измерения. Единицы измерения rem являются динамическими по отношению к корневому тегу HTML. Тем не менее, вы все еще можете использовать px, em и pt в своих Bootstrap проектах.

html{
font-size: 16px; 
}
p{
font-size: 1rem; 
}
h2 {
    font-size: 1.875rem; 
}

В приведенном выше примере, для параграфа мы задали значение размера текста в 1rem, что эквивалентно корневому html размером в 16px.

Bootstrap 4 использует единицы измерения rem, для того, чтобы иметь 100% масштабирование всего приложения. Также стоит отметить, что размер HTML тега может быть установлен по вашему усмотрению.

Таблицы

Bootstrap 3 использовал контекстные классы для добавления цвета фона в строках таблицы или отдельных ячеек. В Bootstrap 4, добавили специальный префикс .table-* для каждого контекстного класса.

Смена класса table-condensed

В Bootstrap 3 мы использовали класс .table-condensed для создания более компактной таблицы, без отступов. В Bootstrap 4 переименовали данный класс в .table-sm.

Пример ниже.

<table>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>

Формы

Формы имеют некоторые изменения в классах. Два основных изменения это переименование классов .input-lg и .input-sm в .form-control-lg и .form-control-sm без использования .form-group-*.

Также добавили новый класс .form-control-label для центрирования названий по вертикали с классом .form-control.

<form>
  <div>
    <label for="inputEmail3">Email</label>
    <div>
      <input type="email" placeholder="Email">
    </div>
  </div>
 
  <div>
    <label for="inputPassword3">Password</label>
    <div>
      <input type="password" placeholder="Password">
    </div>
  </div>
 
  <div>
    <div>
      <button type="submit">Sign in</button>
    </div>
  </div>
</form>

Изменения в JavaScript

В Bootstrap присутствует большое количество JavaScript кода, который необходим для работы некоторых компонентов и так как в самих компонентах изменений не так много, JavaScript в целом почти не изменился.

Вот несколько изменений:

  • Убрали поддержку IE8: Теперь когда отбросили поддержку IE8, мы можем с легкостью использовать более быструю версию jQuery 2.0
  • Поддержка ES6: Все плагины были переписаны в ES6 и скомпилированы при помощи Babel, компилятора JavaScript.

Новые возможности

В этой части рассмотрим некоторых из основных новых функций.

Карточки

В Bootstrap 4, вкладки, миниатюры и well были удалены и заменены карточками. Данный компонент можно использовать для отображения информации в качестве страницы или контейнера, который поддерживает различные виды контента, такие как ссылки, текст, изображения, заголовки, колонтитулы и многое другое с различными цветами фона.

Для подключения добавьте классы

.card и .card-block к выбранному элементу. Есть также еще несколько классов, которые можно использовать внутри класса .card.

  • . card-title название
  • .card-text текст
  • .card-header заголовок
  • .card-footer футер
<div>
        
 
        <div>
            Card Header
        </div>
 
        <div>
            
 
            <h5>This is the Card Title</h5>
            <img alt="" src="http://goo.gl/oxHSMr"> 
            
 
            <p>These are card text. See? They are
            awesome!</p>
        </div>
 
        <div>
            Card Footer
        </div>
</div>

Flexbox

Еще одно нововведение в Bootstrap 4 это - технология flexbox. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Для того, чтобы использовать Flexbox в своем проекте Bootstrap 4, установите переменную $enable-flex со значением true в файле _variables.scss и после компиляции, ваша сетка сразу же переключится на использование Flexbox модели.

Обратите внимание что Flexbox не имеет поддержку IE9

Заключение

В этой статье мы рассказали вам о всех моментах перехода с Bootstrap 3 на Bootstrap 4. Рекомендуем всегда проверять официальную документацию для будущих обновлений.

Bootstrap Бутстрап Учебник справочник


Bootstrap является наиболее популярной платформой HTML, CSS и JavaScript для разработки адаптивных мобильных веб-сайтов.

Bootstrap абсолютно бесплатна для скачивания и использования!

Начните изучать Bootstrap сейчас »

Start Bootstrap


Попробуйте примеры

В этом учебнике Bootstrap содержатся сотни примеров Bootstrap.

С помощью нашего онлайн-редактора вы можете отредактировать код и нажать на кнопку для просмотра результата.

Пример Bootstrap


  Моя первая Bootstrap страница
  Измените размер этой адаптивной страницы, чтобы увидеть эффект!

<div>
  <div>
    <div>
      <h4>Колонка 1</h4>
      <p>Просто текст ..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 2</h4>
      <p>Просто текст ..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 3</h4>
      <p>Просто текст ..</p>
      <p>Новый текст..</p>
    </div>
  </div>
</div>

Нажмите на кнопку "Просмотр демо в редакторе", чтобы увидеть, как работает.



Bootstrap

На HTML5CSS вы найдете полное описание Bootstrap всех классов CSS, компонентов и JavaScript плагинов-все и примеры:


Темы/шаблоны Bootstrap

Мы сделали несколько шаблонов Bootstrap, с которыми вы можете поиграть. Они полностью свободны в использовании:


Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 — Новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.

Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.



Классы visible-** и hidden-** в Bootstrap 4 / Тяпк

Классы hidden-* и visible-* убраны в Bootstrap 4.

Чтобы скрыть элемент используйте d-none класс или d-{sm,md,lg,xl}-none класс для соответствующего брейкпоинта. Отдельного xs нет, так как он используется по-умолчанию.

Чтобы показать элемент но определённом брейкпоинте следует объеденить один из .d-*-none классов c .d-*-* классами, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, за исключением md и lg.

Размер экрана Классы
Скрыть на всех .d-none
Скрыть только на xs .d-none .d-sm-block
Скрыть только на sm .d-sm-none .d-md-block
Скрыть только на md .d-md-none .d-lg-block
Скрыть только на lg .d-lg-none .d-xl-block
Скрыть только на xl .d-xl-none
Показать на всех .d-block
Показать только на xs .d-block .d-sm-none
Показать только на sm . d-none .d-sm-block .d-md-none
Показать только на md .d-none .d-md-block .d-lg-none
Показать только на lg .d-none .d-lg-block .d-xl-none
Показать только на xl .d-none .d-xl-block

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block

Show/hide for breakpoint and up:

hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

Web-разработка • HTML и CSS

Изменение порядка следования

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде. Изменить визуальный порядок следования адаптивного блока выполняется посредством класса order-{1…12}. Этот класс предназначен xs устройств. Для изменения порядка для sm, md, lg или xl используется класс order-{sm…xl}-{1…12}.

Число от 1 до 12 определяет то, как элементы будут визуально следовать на странице. А именно — все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс order, то по умолчанию он имеет значение 0.

<div>
    <div>
        <div>
            <strong>Первый</strong>, нулевой порядок, будет первым.
        </div>
        <div>
            <strong>Второй</strong>, но будет отображаться последним.
        </div>
        <div>
            <strong>Третий</strong>, но будет отображаться вторым.
        </div>
    </div>
</div>

Ещё один пример — с использованием адаптивных классов order. На устройствах xs и sm визуальный порядок порядок следования будет таким же, как в HTML коде. А на устройствах md и выше — первым будет Sidebar left, вторым — Page contrnt, а третьим — Sidebar right.

<div>
    <div>
        <div>
            Page content
        </div>
        <div>
            Sidebar left
        </div>
        <div>
            Sidebar right
        </div>
    </div>
</div>

Классы order-first и order-{sm…xl}-first оказывают своё действие посредством установки элементу CSS свойства order в значение -1. А классы order-last и order-{sm…xl}-last — в значение 13. Поэтому предыдущий пример можно сделать проще:

<div>
    <div>
        <div>
            Page content
        </div>
        <div>
            Sidebar left
        </div>
        <div>
            Sidebar right
        </div>
    </div>
</div>

Смещение адаптивных блоков

Смещение с использованием классов offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок. Данные классы имеют следующий синтаксис — offset-{1…12} или offset-{sm…xl}-{1…12}.

<div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>

    <div>
        <div>1</div>
        <div>2</div>
    </div>

    <div>
        <div>1</div>
    </div>
</div>

Смещение с использованием классов margin

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left:auto или margin-right:auto). Данный вариант смещения используют, когда блоки необходимо сместить относительно друг от друга на которую переменную величину. Классы margin отступов имеют вид ml-auto, mr-auto, ml-{sm…xl}-auto и mr-{sm…xl}-auto.

<div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>

    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

    <div>
        <div>1</div>
        <div>2</div>
    </div>
</div>

Классы для margin и padding

Bootstrap 4 включает в себя набор классов, с помощью которых можно легко добавлять к HTML элементам необходимые margin и padding отступы. Имена этих классов имеют вид:

  • {property}{sides}-{size} для xs устройств
  • {property}{sides}-{sm…xl}-{size} для sm и выше

Вместо {property} необходимо указать первую букву названия отступа, m – для margin, p – для padding.

Вместо {sides} необходимо указать сторону:

  • t – для задания отступа сверху (top)
  • b – для задания отступа снизу (bottom)
  • l – для задания отступа слева (left)
  • r – для задания отступа справа (right)
  • x – для задания отступа слева и справа
  • y – для задания отступа сверху и снизу

Если {sides} не указать, то тогда отступ будет установлен для всех 4 сторон элемента.

Вместо {size} необходимо задать величину отступа – 0, 1, 2, 3, 4, 5 или auto (только для margin). Значение 1 означает 0.25rem, значение 20.5rem, значение 31rem, значение 41.5rem, значение 53rem.

Примеры использования

Установим HTML-элементу padding-top, равный 1rem:

<div>
    ..........
</div>

Расположим два блока по центру. Для этого первому блоку установим margin-left:auto с помощью класса ml-auto, а второму – margin-right:auto с помощью класса mr-auto. Кроме этого, дополнительно зададим отступ между блоками, с помощью классов mr-3 и ml-3.

<div>
    <div>
        <div>
            Первый блок
        </div>
        <div>
            Второй блок
        </div>
    </div>
</div>

Установим элементу на xs устройствах margin-bottom, равный 1.5rem. Для всех остальных устройств этот margin уберём.

<div>
    ..........
</div>

Классы для плавающих блоков

<div>
    <div>
        <button>Кнопка, float:left</button>
        <button>Кнопка, float:right</button>
    </div>
</div>

Классы для свойства display

Для установки свойства display используются классы

  • d-{value} для xs устройств
  • d-{sm…xl}-{value} для sm и выше

Вместо {value} необходимо указать значение none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.

Размер экрана CSS-класс
Скрывать всегда .d-none
Скрывать только на xs .d-none .d-sm-block
Скрывать только на sm .d-sm-none .d-md-block
Скрывать только на md .d-md-none .d-lg-block
Скрывать только на lg .d-lg-none .d-xl-block
Скрывать только на xl .d-xl-none
Показывать всегда .d-block
Показывать только на xs .d-block .d-sm-none
Показывать только на sm . d-none .d-sm-block .d-md-none
Показывать только на md .d-none .d-md-block .d-lg-none
Показывать только на lg .d-none .d-lg-block .d-xl-none
Показывать только на xl .d-none .d-xl-block

Классы для свойства overflow

<div>.....</div>
<div>.....</div>

Классы изображений

/* responsive images */
.img-fluid {
    max-width: 100%;
    height: auto;
}
/* image thumbnails */
.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк • Шаблон сайта

Обзор 4-й версии Bootstrap: описание, преимущества и недостатки

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

Если вы не знали…

Bootstrap — это фреймворк на основе HTML и CSS. Он содержит стили для основных элементов, которые применяются в верстке. Использование такого фреймворка значительно ускоряет процесс создания страниц. Стандартные стили легко менять, что обеспечивает гибкий и простой процесс создания макетов сайтов.

У меня есть серия уроков о Bootstrap, которая постоянно пополняется. Благодаря этим урокам вы сможете легко научиться создавать макеты сайтов, даже не обладая большими знаниями в верстке.

Для начала немного истории. Замечательно, что четвертая версия фреймворка вышла ровно через 4 года после запуска первой бета-версии. Тот памятный момент запечатлен этим твитом разработчиков:

Woohoo! Twitter Bootstrap, an open-sourced CSS/HTML framework from myself and @fat, just went live: http://t.co/3OOsQ5T #kaboom

— Mark Otto (@mdo) August 19, 2011

Тогда автору нужно было объяснять, что такое Bootstrap. Сегодня это имя говорит само за себя 🙂

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

Что нового?

Согласно отчету разработчиков, в этой версии множество нововведений, поэтому все описывать нет смысла, остановимся на самых интересных и важных:

  1. Переезд с Less на Sass. Меня, как любителя этого языка, особенно радует такой переезд, хотя большинство разработчиков это изменение даже не заметит.
    Причина проста: после компиляции препроцессорного языка все равно получается обычный CSS, а в исходниках 99% людей никогда не заглядывали и правильно делали. Компиляция CSS теперь проводится при помощи библиотеки Libsass, который работает в разы быстрее своих аналогов.
  2. Улучшен процесс верстки макетов, в частности это коснулось блочной структуры страницы. Разработчики переработали структуру этой части фреймворка, что повлияло в первую очередь на мобильные экраны. И до этого дела с мобильными и планшетами у бутстрапа шли очень неплохо, теперь же миксины стали больше ориентированными на разные мобильные устройства.
  3. Встроенная поддержка flexbox. Я еще не писал о верстке при помощи flexbox, но будущее уже рядом. Это мощный компонент html5, благодаря которому верстка будет вести себя в точности как таблица или как набор блоков — как мы захотим. В 4-й версии Bootstrap достаточно будет рекомпилировать CSS, чтобы блочная верстка работала не при помощи float: left , а на основе flexbox.
    Теперь сверстать такой макет займет две минуты:
  4. Превью и панели заменены на карты. Карты — это новый компонент Bootstrap, который фактически будет объединять в себе небольшие по формату элементы с превью изображений и текстовых блоков с обводкой. Думаю, такое нововведение сделано для того, чтобы собрать компоненты, которые не должны выделяться в отдельные из-за небольшого размера.
  5. HTML резеты собраны в одном модуле под названием “Reboot”.
    HTML Reset — это набор стилей, который заменяет собой стандартные CSS-стили, встроенные в браузер по умолчанию. Такие можно увидеть, если страница работает без подключенного CSS. Принято отключать их, чтобы они не портили процесс верстки.

    В новой версии Bootstrap обнуляющие стили собраны в файл Normalize.css, чтобы при необходимости они были под рукой. Мое мнение: они должны были быть там с самого начала 🙂

  6. Новые возможности кастомизации шаблонов. Теперь, чтобы поменять стиль элемента, не нужно создавать отдельный файл темы. Достаточно будет обновить переменные в Sass-файле на свой вкус, и в скомпилированном файле вы получите обновленный вид любых элементов. Для примера можно вспомнить тени, градиенты, скругленные углы, анимации. Раньше, чтобы убрать скругление углов у кнопок, нужно было создавать свой резет и иногда использовать !important, а теперь достаточно поменять переменные в Sass.
    На заметку: и раньше стандартное оформление можно было менять прямо в исходниках и компилировать CSS заново, но теперь такие переменные специально собраны в отдельных файлах, так что копаться в исходном коде станет намного проще.
  7. Отмена поддержки IE8. То, что IE8 давно пора забыть, все и так знают. Теперь разработчикам не нужно думать о том, как сделать так, чтобы крутой градиент выглядел так же круто и в IE8.
  8. Переход с пикселей на размеры в rem и em. Пиксели уступили место rem и em, а это еще один шаг к лучшему отображению сайта на мобильных устройствах, когда размер букв и отступы зависят от размера экрана.
  9. Обновление кода всех плагинов JavaScript. Каждый js-плагин в новом бутстрапе был переписан в соответствии с требованиями ES6, что делает код более структурированным, быстрым и надежным.
    ES или ECMAScript — это официальный стандарт языка JavaScript версии 6
  10. Обновлена работа всплывающих подсказок и блоков.
  11. Улучшенная документация и поиск. Практически весь мануал был переписан с примерами и исходным кодом. Поиск по документации тоже работает быстро, хотя толку от него с такой структурой документов немного.
  12. Много другого. Новые классы для отступов, кастомизированные элементы управления формами.

Все эти и множество других улучшений вы найдете в новой версии Bootstrap.

Кстати, подписывайтесь на мой твиттер, чтобы получать там свежие уроки по Bootstrap.

Развитие проекта

С растущим количеством пользователей и компонентов, которые нужно поддерживать, растет и количество багов, с которыми нужно бороться. Разработчики проекта приглашают всех желающих принимать активное участие в его развитии.

Поэтому в репозитории проекта с нетерпением ждут ваших коммитов :).

Поддержка Bootstrap v3

Самый важный вопрос, за которым сюда пришли большинство читателей: будет ли сайт, сверстанный при помощи Bootstrap 3, работать хорошо, если обновить версию фреймворка?

Нужно заметить, что с выходом третьей версии была прекращена поддержка бутстрапа версии 2, о чем разработчики жалеют до сих пор. Бутстрап будет дорабатываться и дальше. Критические баги и ошибки будут лататься, но не так активно, как раньше. Само собой, документация для третьей версии останется доступной наравне с четвертой.

Код, написанный на BS3, будет поддерживаться в новой версии, и ваши элементы продолжат работать как надо. К ним добавятся новые классы и возможности, например:

<div>
  <div>.col-md-9 .col-md-push-3</div>
  <div>.col-md-3 .col-md-pull-9</div>
</div>

Но ничего страшного в этом нет, это и называется прогресс фреймворка. Умея верстать на Bootstrap 3 и читая мой блог, вы легко освоите и четвертую версию.

Темы

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

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

Отказавшись от отдельных тем, разработчики предлагают нам эти темы купить :).

Темы, кстати, основаны на Bootstrap 3: сейчас это панель управления, приложение и продажный сайт. Возможно, в будущем темы станут выгодной покупкой, а пока это хороший способ поддержать разработчиков.

Мое мнение

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

Я рад, что у нас есть такой мощный инструмент, который с каждым обновлением становится все более удобным и продуманным. Надеюсь, он нравится и вам.

Поделитесь и вы мнением — как вам впечатления от верстки на Bootstrap.

Урок 004. Подключение Bootstrap 3 к сайту на Django

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

Давайте посмотрим, как обстоит дело с Bootstrap 3 в Django .

django-bootstrap3

Итак, для  Django существует готовое приложение django-bootstrap3 , которое необходимо установить, подключить, и для использования добавить необходимые компоненты в тег head на страницах сайта.

Установка

Установка приложение осуществляется с использованием утилиты pip, не забудьте только активировать виртуальное окружение.


pip install django-bootstrap3

Подключение

Прежде, чем использовать Bootstrap, его необходимо подключить в конфигурационном файле.


INSTALLED_APPS = [
    ...
    'bootstrap3',
    ...
]

Использование

Модуль Bootstrap для Django позволяет использовать как готовые формы, без затрат времени на вёрстку, так и просто воспользоваться стилями и библиотекой jQuery, которая используется для данной текущей версии Bootstrap.

Например, для минимального подключения стилей оформления и скриптов Bootstrap достаточно будет прописать следующее в теге head.


{% load bootstrap3 %}
<script src="{% bootstrap_jquery_url %}"></script>
{% bootstrap_javascript %}
{% bootstrap_css %}

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


{% load bootstrap3 %}

{# Display a form #}

<form action="/url/to/submit/" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit">
            {% bootstrap_icon "star" %} Submit
        </button>
    {% endbuttons %}
</form>

Для Django рекомендую VDS-сервера хостера Timeweb .

Примеры работы с сеткой в Bootstrap 4

В Bootstrap 4 используются следующие идентификаторы размеров:


Extra small
<576px


Small
≥576px


Medium
≥768px


Large
≥992px


Extra large
≥1200px

Максимальная
ширина контейнера

None (auto)

540px

720px

960px

1140px

Префикс класса

col-*

col-sm-*

col-md-*

col-lg-*

col-xl-*

Где вместо звездочки задается ширина колонки в количестве "элементарных столцов", число корторых в Bootstrap 4, так же как и в Bootstrap 3, фиксировано, и составляет 12 столбцов в одном контентном блоке.

Для каждого идентификатора размера считается, что количество колонок в данном размере - 12 штук. Правила верстки сделаны так, что они распространяются на указанный размер экрана и выше, если не указано другое. Для более мелких идентификаторов размеров, если не специализировано иное, считается, что ширина блока 12 колонок. Именно поэтому, блоки на экранов мелких размеров выстраиваются "в столбик" по вертикали.

Совершенно обычным делом считается подход, когда суммарное количество столбцов в блоках. размещенных в одной строке row, больше чем 12. Тогда колонки, занимаемые столбцы после 12-го, будут отображаться с новой строки.

Пример верстки макета:

<section>

<div>

<div>

<div>A1</div>

<div>A2</div>

</div>

</div>

</section>

<section>

<div>

B

</div>

</section>

<section>

<div>

<div>

<div>C1</div>

<div>C2</div>

<div>C3</div>

</div>

</div>

</section>

<section>

<div>

<div>

<div>D1</div>

<div>D2</div>

<div>D3</div>

<div>D4</div>

</div>

</div>

</section>

Автоматическая ширина ячеек

Если колонка прописывается с классом col (без тире и числа столбцов), то ширина колонки расчитывается автоматически так, чтобы она занимала максимально возможное свободное место. Например:

<divcol">1</div>

<div>2</div>

<div>3</div>

</div>

Данный код покажет строку из трех равноширинных ячеек.

Иногда стоит немного другая задача - выделить под ширину ячейки столько, сколько занимает контент ячейки. Для это можно воспользоваться классом вида col-sm-auto.

Размещение ячеек по центру строки

Иногда необходимо разместить ячейку по центру строки. Делается это путем указания специального класса выравнивания вида justify-content-sm-center для блока row, вот так:

<div>

<div>

Тут текст

</div>

</div>

То есть, все колонки в теге с классом row и дополнительным классом выравнивания, будут выровнены по центру. Если колонок несколько, то по центру будет выровнена вся группа колонок вместе (а не каждая колонка по отдельности, естественно).

Следует ли мне перейти на Bootstrap 4?

В этом блоге мы поговорим о Bootstrap 4, давайте начнем с самого начала. Bootstrap - это CSS Framework, облегчающий разработку веб-дизайна, который можно адаптировать к любому устройству. Именно поэтому мощный фреймворк является одним из самых популярных и доступных в наше время. Теперь, когда мы знаем, что такое Bootstrap, давайте продолжим нашу центральную тему.

В последнее время много говорят о новой версии Bootstrap; и каким-то образом веб-разработчики использовали Bootstrap или, по крайней мере, знают, какие классы используются чаще всего.

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

Давайте познакомимся с Bootstrap 4

Bootstrap 4 начал развиваться в соответствии с четырьмя высоко потребляемыми и важными технологиями: HTML 5, CSS3, JavaScript и Sass.Эта последняя технология является одним из ведущих изменений, хотя она уже была создана в Bootstrap 3 через порт, теперь она используется предопределенным образом с помощью библиотеки Libsass. И именно для этих же технологий мы рекомендуем перейти с Bootstrap 4 на Bootstrap 3. Мы предоставим вам дополнительную информацию об изменениях, произошедших между этими двумя версиями, чтобы вы могли выбрать между ними.

Как сделать миграцию?

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

Бетон

Пора вдаваться в подробности, чтобы увидеть десять наиболее важных изменений Bootstrap 4 по сравнению с Bootstrap 3.

1. От LESS к SASS.

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

2. Поддержка Flexbox.

Эта новая опция позволяет использовать div с автоматической высотой, что позволяет адаптировать его.Раньше вы могли вносить изменения самостоятельно, но Bootstrap решил добавить их по умолчанию. К сожалению, он еще не поддерживается IE9 (Internet Explorer 9) или ниже, поэтому параметр Flex отключен, но его можно включить, открыв файлы _variables.css и включив flex: $ enable-flex: true! По умолчанию; .

3. Новые классы.

В версии Bootstrap 3 необходимо было создать несколько пользовательских классов, чтобы иметь возможность создавать свой веб-сайт, но теперь Bootstrap 4 имеет для вас отличные новости.Теперь вы можете создавать определенные классы, например, улучшенные классы для выравнивания текста, а классы для добавления поля или отступа с переменными значениями являются большим преимуществом.

Синтаксис прост:
Классы именуются в формате {свойство} {адрес} - {размер} f или xs и {свойство} {адрес} - {точка останова} - {размер} для sm, md, LG и XL.

Кроме того, среди прочего, к кнопкам были добавлены новые пользовательские стили. Теперь, благодаря Bootstrap 4, вы можете быть уверены, что ваши собственные файлы CSS будут меньше.

4. Новый размер сетки.

Теперь существует пять уровней сетки для поддержки стандартной ширины экрана в книжной и альбомной ориентации. Bootstrap 4 представляет новую сетку с классами col-xl- *. Этот дополнительный уровень расширяет средний диапазон запроса до 544 пикселей. Хотя новый уровень XL предполагает, что он был добавлен для поддержки очень больших экранов, все наоборот.
Все уровни 3.x сдвигаются вверх в 4.x, чтобы соответствовать новому уровню с 544 пикселей до 768 пикселей внизу. Хотя старый 3.x col-xs- * поддерживает ширину экрана менее 768 пикселей, новый уровень 4.x col-xs- * поддерживает ширину экрана менее 544 пикселей. Новый уровень xs меньше, что означает улучшенную поддержку смартфонов.

5. Новая единица измерения типографики (бэр).

Now Bootstrap 4 позволяет нам оптимизировать адаптивный дизайн наших текстов; это связано с тем, что вместо px используется rems, это упрощает изменение значений в медиа-запросах, так как теперь будет необходимо только изменить значение, которое есть в теге HTML, вместо изменения каждого класса.

6. Прощай, глификоны.

Во многих случаях они были дополнительным элементом, который не многие люди хотели использовать, и разработчики предпочитают использовать другие ресурсы, поэтому Bootstrap решил исключить глификоны, делая ставку на библиотеку значков Font Awesome, это вызвало изменение в структуре Bootstrap, поскольку теперь папки шрифтов не существует.

7. Включен ECMAScript 6.

Теперь EC6 находится в Bootstrap, перед разработчиками была поставлена ​​задача переписать все файлы JS, чтобы воспользоваться всеми улучшениями, которые предлагает EC6.

8. Новые компоненты и изменения во многих из них.

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

9. Перезагрузите.

В версии Bootstrap 3 мы использовали Normilize.css, чтобы изменить порядок всех элементов HTML, чтобы они имели единообразный вид. Теперь Bootstrap 4 принял улучшенную версию Normilize.css, что означает оптимальную перезагрузку.

10. Bootstrap 4 легче.

Несмотря на большее количество классов, Bootstrap 4 легче своего предшественника; это связано с использованием Sass и потерей папки Fonts. Это позволяет создавать более легкие проекты и увеличивать скорость загрузки нашего сайта.

Увидев эти новые функции, вы уже знаете, какие фундаментальные изменения необходимо внести на свою веб-страницу, чтобы иметь возможность перейти с Bootstrap 3 на Bootstrap 4.Но это только поверхность всех изменений, которые представляет Bootstrap 4, вы можете проверить дополнительную информацию в официальном руководстве по Bootstrap.

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

Мы уже знакомы с этой новой версией этого мощного CSS Framework.Использование этого фреймворка позволило улучшить взаимодействие с пользователем и создать безупречный адаптивный дизайн, так что каждый может пользоваться веб-сайтами на любом устройстве.

twbs / bootstrap: самый популярный фреймворк HTML, CSS и JavaScript для разработки адаптивных мобильных проектов в Интернете.

Бутстрап

Элегантная, интуитивно понятная и мощная интерфейсная среда для более быстрой и простой веб-разработки.
Изучить документацию Bootstrap »

Сообщить об ошибке · Функция запроса · Темы · Блог

Бутстрап 4

Наша ветка по умолчанию предназначена для разработки нашего предстоящего выпуска Bootstrap 5.Перейдите в ветку v4-dev , чтобы просмотреть readme, документацию и исходный код для Bootstrap 4.

Содержание

Быстрый старт

Доступно несколько вариантов быстрого запуска:

  • Скачать последнюю версию
  • Клонировать репо: git clone https://github.com/twbs/bootstrap.git
  • Установить с помощью npm: npm install bootstrap @ next
  • Установить с пряжей: пряжа добавить бутстрап @ следующий
  • Установить с помощью Composer: composer require twbs / bootstrap: 5.0,0-бета3
  • Установить с помощью NuGet: CSS: Загрузочный пакет установочного пакета Sass: Установочный пакет bootstrap.sass

Прочтите страницу «Приступая к работе», чтобы получить информацию о содержимом платформы, шаблонах, примерах и многом другом.

Статус

Что включено

В загрузке вы найдете следующие каталоги и файлы, логически сгруппированные по общим ресурсам и предоставляющие как скомпилированные, так и минифицированные варианты.Вы увидите что-то вроде этого:

  бутстрап /
├── css /
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── бутстрап.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js /
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
  

Мы предоставляем скомпилированные CSS и JS ( bootstrap.* ), а также скомпилированные и минимизированные CSS и JS ( bootstrap.min. * ). исходные карты ( bootstrap. *. map ) доступны для использования с инструментами разработчика некоторых браузеров. Связанные файлы JS ( bootstrap.bundle.js и уменьшенные bootstrap.bundle.min.js ) включают Popper.

Ошибки и запросы функций

Есть ошибка или запрос функции? Пожалуйста, сначала прочтите руководство по проблеме и найдите существующие и закрытые проблемы. Если ваша проблема или идея еще не решена, откройте новый выпуск.

Документация

Документация

Bootstrap, включенная в этот репо в корневом каталоге, создана с помощью Hugo и размещена на страницах GitHub по адресу https://getbootstrap.com/. Документы также можно запускать локально.

Поиск по документации осуществляется с помощью DocSearch от Algolia. Работаете над поиском? Обязательно установите debug: true в site / assets / js / search.js .

Локальная работа с документацией

  1. Запустите npm install , чтобы установить Node.js, включая Hugo (конструктор сайтов).
  2. Запустите npm run test (или конкретный сценарий npm), чтобы восстановить распределенные файлы CSS и JavaScript, а также ресурсы нашей документации.
  3. Из корневого каталога / bootstrap запустите npm run docs-serve в командной строке.
  4. Откройте http: // localhost: 9001/ в своем браузере и вуаля.

Узнайте больше об использовании Hugo, прочитав его документацию.

Документация к предыдущим выпускам

Вы можете найти все наши документы по предыдущим выпускам на https: // getbootstrap.com / docs / versions /.

Предыдущие выпуски и документация к ним также доступны для загрузки.

Содействие

Пожалуйста, прочтите наши правила участия. Включены инструкции по открытию вопросов, стандарты кодирования и примечания по развитию.

Более того, если ваш запрос на вытягивание содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Весь HTML и CSS должны соответствовать Руководству по кодам, которое ведет Марк Отто.

Настройки редактора

доступны в конфигурации редактора для удобного использования в обычных текстовых редакторах.Узнайте больше и загрузите плагины на https://editorconfig.org/.

Сообщество

Получайте обновления о разработке Bootstrap и общайтесь с разработчиками проекта и членами сообщества.

  • Подпишитесь на @getbootstrap в Twitter.
  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими загрузчиками в IRC. На сервере irc.freenode.net в канале ## bootstrap .
  • Справку по реализации
  • можно найти на сайте Stack Overflow (помечено как bootstrap-5 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Версии

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

См. Раздел «Релизы» нашего проекта GitHub для просмотра журналов изменений для каждой версии выпуска Bootstrap. Сообщения с объявлениями о выпуске в официальном блоге Bootstrap содержат сводку наиболее примечательных изменений, внесенных в каждый выпуск.

Создатели

Марк Отто

Джейкоб Торнтон

Спасибо

Спасибо BrowserStack за предоставленную инфраструктуру, которая позволяет нам тестировать в реальных браузерах!

Спонсоры

Поддержите этот проект, став спонсором.Здесь будет отображаться ваш логотип со ссылкой на ваш веб-сайт. [Стать спонсором]

Поддержавшие

Спасибо всем нашим спонсорам! 🙏 [Стать спонсором]

Авторские права и лицензия

Авторские права на код и документацию 2011–2021, авторы Bootstrap и Twitter, Inc. Код выпущен под лицензией MIT. Документы выпущены по лицензии Creative Commons.

Bootstrap 4 Cheat Sheet - Полный список классов Bootstrap

Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis conctetur purus sit amet fermentum.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et.Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Что нового и что изменилось в Bootstrap 4

Так или иначе, почти каждый хоть раз использовал Bootstrap. Миллионы веб-сайтов, прототипов и тем для известных CMS (таких как WordPress) основаны на Bootstrap. Фреймворк прост в установке, использовании и невероятно экономит время. Он построен на высококачественном HTML, CSS и JavaScript, что позволяет создавать красивый дизайн с минимальными усилиями.

Благодаря медиа-запросам CSS, он эффективно масштабирует веб-сайты и приложения с помощью единой базы кода, обеспечивая приятное взаимодействие с пользователями независимо от того, какое устройство они используют (телефоны, планшеты или ноутбуки). В нем есть компоненты, которые можно легко реализовать: модальные окна, галереи, всплывающие подсказки, системы складных вкладок, раскрывающиеся меню, кнопки и многое другое.

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

Прежде чем я начну знакомить с новыми функциями Bootstrap 4, давайте кратко рассмотрим последние обновления.

Краткая недавняя история Bootstrap

19 августа 2015 года, по случаю четвертого дня рождения Bootstrap и после года разработки, команда разработчиков выпустила первую альфа-версию Bootstrap 4.Самым важным изменением по сравнению с Bootstrap 3 был окончательный отказ от Internet Explorer 8 и последующая возможность использовать лучшие методы CSS3 без необходимости полагаться на хаки или отступления CSS.

С тех пор последовало четыре второстепенных выпуска: Bootstrap 4 alpha 2 8 декабря 2015 г., Bootstrap 4 alpha 3 27 июля 2016 г. и Bootstrap 4 alpha 4 19 октября 2016 г. Текущая стабильная версия версия ( Bootstrap 3.3.7 ) была официально выпущена 25 июля 2016 года.

Благодаря этим обновлениям (и удивительной помощи огромного сообщества Bootstrap) были предложены и включены сотни улучшений, исправлений ошибок и улучшений документации.

Что нового в Bootstrap 4?

Bootstrap 4 построен на следующих стандартах: HTML5, CSS3, JavaScript и Sass. В последние годы фронтенд-разработчики отдали предпочтение Sass вместо Less, широко применяя его в своих проектах. Во всех ранее выпущенных версиях Bootstrap использовал Less в качестве препроцессора.

Начиная с версии 3, порт Bootstrap на Sass был создан и поддерживался. Bootstrap 4 теперь использует его по умолчанию и использует Libsass, реализацию компилятора Sass на C / C ++, для очень быстрой компиляции. Если вам интересно и вы хотите узнать больше о «конкуренции» между Less и Sass, а также изучить причины недавнего решения команды разработчиков изменить кодовую базу, я предлагаю вам взглянуть на статью с мнением под названием «Почему Bootstrap 4 Значит, победил Sass "Эда Шарбено.

А теперь давайте выясним, что может предложить Bootstrap 4.

Карты

Классы .panel , thumbnail и .well были заменены на .card в Bootstrap 4. Классы модификаторов для карт предлагают функциональность, аналогичную этим компонентам. Карта есть:

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

Карты могут быть одиночными, сгруппированными или иметь одинаковую высоту. Чтобы дать вам лучшее представление о том, как карта s заменит упомянутые ранее компоненты, я создал пример, демонстрирующий тот же визуальный компонент, созданный с использованием миниатюры для Bootstrap 3 и карты для Bootstrap 4.

Код, разработанный с использованием Bootstrap 3, показан ниже:

  

Bootstrap 4

Новая версия Bootstrap невероятна.Вам обязательно стоит попробовать!

Загрузить

Результат:

Код, созданный с помощью Bootstrap 4, выглядит следующим образом:

  

Bootstrap 4

Новая версия Bootstrap невероятна. Вам обязательно стоит попробовать!

Загрузить

Код Bootstrap 4 приведет к:

Как видите, разметка для достижения желаемого результата практически идентична.Компонент card требует использования пары дополнительных классов, но это связано с его гибкостью. Более того, как видно из скриншотов, в Bootstrap 3 изображение по умолчанию центрируется.

Новый стиль кнопок

Кнопки имеют новый стиль. Они определенно стали «плоскими» и убрали градиенты. Кроме того, были введены классов .btn-outline- * .

Вы можете увидеть, как их внешний вид изменился с течением времени, и увидеть различия в примере ниже.Учитывая следующий HTML:

  


 Ссылка 
  

Так выглядят кнопки в Bootstrap 3:

И это их новый вид в Bootstrap 4:

Изменения в типографике

В Bootstrap 4 16 пикселей - это новый размер шрифта по умолчанию (ранее он был 14 пикселей), что означает, что размер текста больше и заметнее.

Более того, в этой новой версии все должно быть больше dynamic благодаря важному усовершенствованию: размер шрифта и система сетки теперь основаны на rem s. Имейте в виду, что при желании вы все равно можете использовать пиксели, em или точки для типографики. Однако размер шрифта Bootstrap 4 полностью основан на модуле rem , и причина этого изменения заключается в том, что rem s упрощают для мобильных устройств масштабирование вверх или вниз .

Говоря о шрифтах, важно помнить, что Bootstrap 4 удаляет значок шрифта Glyphicons. Если вам нужны значки, команда разработчиков предлагает следующие варианты:

Использование rem s также применимо к системе сетки, которая теперь имеет max-width , установленную в rem s.

Отображать заголовки

Использование rem s также было использовано для введения нового типографского компонента: отображать заголовок . Bootstrap 3 уже поддерживал такие классы, как h2 , h3 и т. Д., Чтобы отображать элементы, как если бы они были заголовками.Bootstrap 4 увеличивает возможности для разработчиков за счет реализации этого нового компонента, который следует использовать, когда вам нужно, чтобы заголовок выделялся на странице.

Bootstrap 4 поддерживает четырех разных размеров для заголовка дисплея (класс display- * ). В следующем примере показано, как их использовать:

  

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Вот как они выглядят:

Flexbox

Одним из самых значительных нововведений в этой версии Bootstrap является поддержка Flexbox , которая обеспечивает более простые и гибкие варианты компоновки в CSS.Как указано в официальном руководстве Bootstrap,

В частности, [Flexbox] предоставляет:

  • Простое вертикальное выравнивание содержимого в родительском элементе.
  • Простое переупорядочивание контента на разных устройствах и разрешениях экрана с помощью медиа-запросов.
  • Easy CSS-only столбцы одинаковой высоты для макетов на основе сетки.

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

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

Прочие изменения

Представлены новые служебные классы Spacing Utility Class , позволяющие лучше контролировать горизонтальное и вертикальное пространство. Теперь вы можете добавить пространство в любом направлении, используя служебный класс (с полями или отступами).

Код простой:

  

Все предельно интуитивно понятно: м, - поля, п, - отступы.Что касается направлений: т сверху, r справа, л слева, x слева и справа, y сверху и снизу и a для всех. Наконец, для размеров: 0 для нуля, auto, для авто, md, для среднего и lg, для большого. Оставьте поле пустым по умолчанию.

В качестве примечания стоит упомянуть, что каждый плагин был переписан в ES6 , чтобы воспользоваться преимуществами новейших улучшений JavaScript, а вся документация была перекомпилирована в Markdown .

Для получения дополнительных ресурсов ознакомьтесь с этой статьей Николаса Черминара и этой статьей Кэрол Скелли на Medium.

Что изменилось в Bootstrap 4 по сравнению с Bootstrap 3?

Среди компонентов, которые уже были задействованы в Bootstrap 3, но были внесены соответствующие изменения в версию 4, я хочу упомянуть два важных изменения. Во-первых, в была введена новая точка останова сетки с классами col-xl- * . Четырехуровневая сеточная система, на которой была основана Bootstrap 3, превратилась в пятиуровневую сеточную систему, включая новую точку останова для поддержки всех типичных портретных и альбомных экранов.

Теперь 5 уровней:

  1. Очень мелкий ( <544 пикс. )
  2. Маленький ( ≥544 пикселей )
  3. Средний ( ≥768 пикселей )
  4. Большой ( ≥992 пикс. )
  5. Очень большой ( ≥1200 пикселей )

Точка останова XL предназначена для экрана с шириной> 1200 пикселей, в то время как точка останова XS позволяет нам нацеливаться на экраны меньше 544 пикселей, обеспечивая лучшую поддержку для типичных устройств меньшей ширины.

Уровень col-xs- * в версии 3 поддерживал ширину экрана менее 768 пикселей, а новый уровень поддерживает ширину экрана менее 544 пикселей.Как следствие, это изменение улучшает поддержку портретного просмотра на мобильных устройствах (смартфонах).

Во-вторых, Bootstrap 3 не поддерживает настраиваемые формы , которые были введены в версии 4. Это полностью настраиваемые элементы, заменяющие настройки браузера по умолчанию. То же самое относится к обратным таблицам , которые были добавлены в Bootstrap 4 после введения .table-inverse class . Этот пример CodePen показывает, как можно реализовать эту новую функцию.

Это должно дать вам достаточно информации о различиях между версиями 3 и 4, но если вы хотите знать буквально все, я предлагаю этот подробный список. Имейте в виду, что этот список будет пересматриваться по мере разработки.

Заключение

Эта статья была нацелена на быстрый обзор того, что нового в Bootstrap 4 и что изменится с официальным переходом от версии 3 к версии 4. Она не предназначена для того, чтобы быть всеобъемлющей, и лучший совет, если вы хотите знать Чтобы узнать больше о Bootstrap 4, внимательно прочтите документацию, доступную на официальном сайте, и следуйте полному Руководству по миграции Bootstrap 4 для получения последних изменений.

Дата выпуска Bootstrap 4 в настоящее время неизвестна, но если вы хотите получить более подробное представление о других функциях, на которых рабочая группа сосредоточит свое внимание, и посмотреть, как идет их работа, вы можете взглянуть на страница проекта на GitHub. Не стесняйтесь присоединяться к сообществу, если хотите помочь! У команды разработчиков есть амбициозный план развития и длинный список задач, поэтому я уверен, что ваше сотрудничество будет оценено по достоинству.

Связанные ресурсы:

бутстрап - npm

Бутстрап

Элегантная, интуитивно понятная и мощная интерфейсная среда для более быстрой и простой веб-разработки.
Изучить документацию Bootstrap »

Сообщить об ошибке · Функция запроса · Темы · Блог

Содержание

Быстрый старт

Доступно несколько вариантов быстрого запуска:

  • Загрузите последний выпуск.
  • Клонировать репо: git clone https://github.com/twbs/bootstrap.git
  • Установить с помощью npm: npm install bootstrap
  • Установить с пряжей: пряжа добавить бутстрап @ 4.6,0
  • Установить с помощью Composer: композитору требуется twbs / bootstrap: 4.6.0
  • Установить с помощью NuGet: CSS: Загрузочный пакет установочного пакета Sass: Установочный пакет bootstrap.sass

Прочтите страницу «Приступая к работе», чтобы получить информацию о содержимом платформы, шаблонах, примерах и многом другом.

Статус

Что включено

В загрузке вы найдете следующие каталоги и файлы, логически сгруппированные по общим ресурсам и предоставляющие как скомпилированные, так и минифицированные варианты.Вы увидите что-то вроде этого:

  бутстрап /
└── dist /
    ├── css /
    │ ├── bootstrap-grid.css
    │ ├── bootstrap-grid.css.map
    │ ├── bootstrap-grid.min.css
    │ ├── bootstrap-grid.min.css.map
    │ ├── bootstrap-reboot.css
    │ ├── bootstrap-reboot.css.map
    │ ├── bootstrap-reboot.min.css
    │ ├── bootstrap-reboot.min.css.map
    │ ├── bootstrap.css
    │ ├── bootstrap.css.map
    │ ├── bootstrap.min.css
    │ └── bootstrap.min.css.map
    └── js /
        ├── бутстрап.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map
  

Мы предоставляем скомпилированные CSS и JS ( bootstrap. * ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min. * ). исходные карты ( bootstrap. *. map ) доступны для использования с инструментами разработчика некоторых браузеров.Связанные файлы JS ( bootstrap.bundle.js и уменьшенные bootstrap.bundle.min.js ) включают Popper, но не jQuery.

Ошибки и запросы функций

Есть ошибка или запрос функции? Пожалуйста, сначала прочтите руководство по проблеме и найдите существующие и закрытые проблемы. Если ваша проблема или идея еще не решена, откройте новый выпуск.

Документация

Документация

Bootstrap, включенная в этот репо в корневом каталоге, создана с помощью Hugo и размещена на страницах GitHub по адресу https: // getbootstrap.com /. Документы также можно запускать локально.

Поиск по документации осуществляется с помощью DocSearch от Algolia. Работаете над поиском? Обязательно установите debug: true в site / assets / js / search.js .

Локальная работа с документацией

  1. Запустите npm install , чтобы установить зависимости Node.js, включая Hugo (конструктор сайтов).
  2. Запустите npm run test (или конкретный сценарий npm), чтобы восстановить распределенные файлы CSS и JavaScript, а также ресурсы нашей документации.
  3. Запустите npm start для компиляции файлов CSS и JavaScript, создания наших документов и отслеживания изменений.
  4. Откройте http: // localhost: 9001/ в своем браузере и вуаля.

Узнайте больше об использовании Hugo, прочитав его документацию.

Документация к предыдущим выпускам

Вы можете найти все наши документы по предыдущим выпускам на https://getbootstrap.com/docs/versions/.

Предыдущие выпуски и документация к ним также доступны для загрузки.

Вклад

Пожалуйста, прочтите наши правила участия. Включены инструкции по открытию вопросов, стандарты кодирования и примечания по развитию.

Более того, если ваш запрос на вытягивание содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Весь HTML и CSS должны соответствовать Руководству по кодам, которое ведет Марк Отто.

Настройки редактора

доступны в конфигурации редактора для удобного использования в обычных текстовых редакторах. Узнайте больше и загрузите плагины по адресу https: // editorconfig.org /.

Сообщество

Получайте обновления о разработке Bootstrap и общайтесь с разработчиками проекта и членами сообщества.

  • Подпишитесь на @getbootstrap в Twitter.
  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими загрузчиками в IRC. На сервере irc.freenode.net в канале ## bootstrap .
  • Справку по реализации
  • можно найти на сайте Stack Overflow (с тегом bootstrap-4 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Управление версиями

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

См. Раздел «Релизы» нашего проекта GitHub для просмотра журналов изменений для каждой версии выпуска Bootstrap. Сообщения с объявлениями о выпуске в официальном блоге Bootstrap содержат сводку наиболее примечательных изменений, внесенных в каждый выпуск.

Создатели

Марк Отто

Джейкоб Торнтон

Спасибо

Спасибо BrowserStack за предоставленную инфраструктуру, которая позволяет нам тестировать в реальных браузерах!

Спонсоры

Поддержите этот проект, став спонсором.Здесь будет отображаться ваш логотип со ссылкой на ваш веб-сайт. [Стать спонсором]

Сторонники

Спасибо всем нашим спонсорам! 🙏 [Стать спонсором]

Авторское право и лицензия

Авторские права на код и документацию 2011-2021, авторские права авторов Bootstrap и Twitter, Inc., выпущены под лицензией MIT. Документы выпущены по лицензии Creative Commons.

Список ресурсов и подключаемых модулей начальной загрузки

907
Средство выбора даты для начальной загрузки Средство выбора даты для начальной загрузки.

Bootstrap 2

Bootstrap 3

Angular Bootstrap Colorpicker Никаких зависимостей jQuery, только директива AngularJS, основанная на библиотеке jQuery bootstrap-colorpicker.

Bootstrap 3

Bootstrap Colorpicker Простой и настраиваемый компонент colorpicker для Bootstrap.

Bootstrap 3

React Bootstrap Datepicker Средство выбора даты на основе React-Bootstrap.

Bootstrap 3

Загрузка файла jQuery Виджет загрузки файлов с возможностью выбора нескольких файлов, поддержкой перетаскивания, индикаторами выполнения, изображениями для проверки и предварительного просмотра, аудио и видео для jQuery.

Bootstrap 3

Bootstrap 3 Datepicker Виджет выбора даты / времени на основе Bootstrap.

Bootstrap 3

Bootstrap Select Bootstrap-select - это плагин jQuery, который использует раскрывающийся список Bootstrap.js для стилизации и добавления дополнительных функций к стандартным элементам выбора.

Bootstrap 3

Bootstrap Средство выбора диапазона дат Компонент средства выбора диапазона дат для Bootstrap.

Bootstrap 3

jqBootstrapValidation Плагин проверки jQuery для форм начальной загрузки.

Bootstrap 2

Bootstrap 3

FormValidation Плагин для проверки форм Bootstrap

Bootstrap 3

Bootstrap 4

Bootstrap Bootstrap Combootbox Bootstrap

Bootstrap 2

Bootstrap 3

Плавающие метки Bootstrap UX-дружественные метки плавающей формы для Bootstrap 3

Bootstrap 3

Bootstrap label 9403 Float Label
Bootstrap Show Password Простой, но интуитивно понятный плагин формы Bootstrap, позволяющий пользователям видеть свой пароль.

Bootstrap 2

Bootstrap 3

Tokenfield для Bootstrap Расширенный плагин тегирования / токенизации для jQuery и Bootstrap с упором на клавиатуру и поддержку копирования и вставки.

Bootstrap 3

Bootstrap Multiselect Плагин jQuery multiselect, основанный на Bootstrap.

Bootstrap 3

Bootstrap Select Dropdown Плагин jQuery для Bootstrap 4, который преобразует элементы выбора и множественного выбора в раскрывающиеся списки.

Bootstrap 4

Bootstrap Toggle Bootstrap Toggle - очень гибкий плагин Bootstrap, который преобразует флажки в переключатели.

Bootstrap 3

Datepicker для добавления любого другого плагина Boot740 a date к любому другому плагину Boot740 a date к элемент в Bootstrap.

Bootstrap 3

Bootstrap MaxLength Визуальный индикатор обратной связи для атрибута maxlength.

Bootstrap 3

Bootstrap Iconpicker Простое средство выбора значков на основе Bootstrap 3. Позволяет пользователю выбрать значок из раскрывающегося меню.

Bootstrap 3

Теги Bootstrap Подключаемый модуль jQuery, предназначенный для расширения Bootstrap и включения функции тегов.

Bootstrap 3

Bootstrap Tag Autocomplete Плагин автозаполнения @mention, аналогичный функциональности, представленной в Facebook или Twitter.

Bootstrap 2

Bootcomplete.js Легкая альтернатива автозаполнения AJAX для Bootstrap 3

Bootstrap 3

jQuery MiniColors jQuery MiniColors с поддержкой jstrapuery крошечного цвета с поддержкой jstrapuery.

Bootstrap 3

Цветовая палитра для Bootstrap Плагин раскрывающегося списка цветовой палитры для Bootstrap.

Bootstrap 2

Bootstrap 3

Bootstrap Slider Компонент слайдера Bootstrap.

Bootstrap 3

Bootstrap Year Calendar Полностью настраиваемый виджет календаря на год для Bootstrap.

Bootstrap 3

jQuery Spinner Числовой счетчик на основе jQuery, поддерживает операции с клавиатурой и непрерывное изменение.

Bootstrap 3

Классы полей и отступов начальной загрузки

Свойство margin добавляет интервал между элементами, а CSS-отступы между содержимым и границей контейнера.

Bootstrap 4 имеет встроенные вспомогательные классы для полей и отступов, которые вы можете легко использовать в различных элементах для управления интервалом.

Несколько простых примеров

Синтаксис использования сокращенных полей и отступов

Вы можете использовать сокращенные классы заполнения и поля Bootstrap 4 следующим образом:

Для очень маленьких устройств, например xs:

{свойство} {стороны} - {размер}

Для других устройств / окон просмотра (малых, средних, больших и очень больших):

{свойство} {стороны} - {точка останова} - {размер}

Где:

свойство = м для поля и p для заполнения

Ниже приведены сторон сокращенных значений:

  • l = определяет левое поле или отступ слева
  • r = определяет правое поле или правое заполнение
  • t = определяет верхнее поле или верхнее заполнение
  • b = определяет нижнее поле или правое заполнение
  • x = Для настройки левого и правого заполнения и полей одним вызовом
  • y = Для настройки верхнего и нижнего полей
  • пусто = поля и отступы со всех сторон

Размер может иметь значение от 0 до 5 и автоматический .Я покажу вам примеры, чтобы увидеть разницу.

Точка останова = sm, md, lg и xl.

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

Для левой прокладки в сверхмалых устройствах:

пл-2

или от среднего до очень большого:

пл-мд-2

Теперь позвольте мне показать вам использование этих сокращенных служебных классов заполнения и полей в действии в Bootstrap 4.

Пример классов заполнения Bootstrap для всех направлений

В этом примере классы заполнения используются в абзацах следующим образом:

Таким образом, точка останова не используется, поэтому это применимо к окнам просмотра от очень малых до очень больших. Это означает, что если вы измените размер страницы примера, отступы сохранятся для всех окон просмотра. Взглянуть:

См. Онлайн-демонстрацию и код

В разметке:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

Демонстрация классов заполнения

p-5

p-4

п-3

п-2

п-1

п- 0


Вы можете видеть, что p-0 находится рядом с элементом div контейнера и различием заполнения во всех направлениях для разных служебных классов.

Пример использования левого и верхнего классов заполнения

В следующем примере четырем абзацам даны разные индивидуальные классы заполнения. Первый относится к малым устройствам с использованием класса pl-sm-5 . То есть будет применяться только левый отступ.

Во втором теге

используются классы pt-md-2 и pl-md-3 . Это означает, что в средних видовых экранах верхний отступ будет составлять две точки, а левый отступ - 3.

Для третьего абзаца применяются классы pt-lg-3 и pl-lg-2 . Под .lg это означает с больших устройств / вьюпортов. Левый отступ - 2, а верхний - 3.

Наконец, в последнем абзаце указаны классы заполнения для очень больших видовых экранов. Классы: pt-xl-5 и pl-xl-4 .

Для всех вышеперечисленных абзацев для очень маленьких видовых экранов отступы остаются нулевыми. Взглянуть:

См. Онлайн-демонстрацию и код

В разметке:

Демонстрация индивидуальных классов заполнения

pl-sm-5

pt-md-2 pl-md-3

pt-lg-3 pl-lg-2

pt-xl-5 pl-xl-4


Точно так же вы можете использовать нижний и правый отступы по отдельности в разных элементах.Например:

Нижняя обивка:

Прокладка правая:

Демонстрация использования классов маржи для всех направлений

Таким же образом вы можете использовать служебные классы полей Bootstrap для добавления пробелов между элементами. Как и заполнение, вы можете использовать один класс для всех направлений или отдельные классы для каждого направления.

В следующем примере применяется заполнение во всех направлениях в четырех абзацах для всех окон просмотра:

См. Онлайн-демонстрацию и код

Код:

Демонстрация классов маржи

m-2

m-3

м-1

м-5

Пример применения верхнего и нижнего поля

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

для днища используются эти классы:

  • мб-см-5
  • мб-см-4
  • мб-см-2
  • мб-см-1

Поскольку точка останова .sm используется во всех этих классах, она применяется как к маленьким, так и к очень большим устройствам. Взглянуть:

См. Онлайн-демонстрацию и код

HTML-код:

Демонстрация классов маржи

mt-sm-1 mb-sm-5

mt -см-2 мб-см-4

мт-см-4 мб-см-2

мт-см-3 мб-см- 1

Использование x и y для полей

В этом примере показано использование x и y для сторон поля.Напомню, что сторона ‘x’, устанавливает поля для левого и правого, тогда как сторона ‘y’, устанавливает поля для верха и низа.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *