Badges

Содержание:

Поддержка браузерами
- Мобильных устройств
- Браузеры для ПК
Community
Как это работает
Как настроить микрофон в скайпе?
Custom Checkbox
- Example
Containers
- Responsive
Auto margins
- With align-items
Bootstrap 4 CDN
- MaxCDN:
Sass options
Align content
What is Bootstrap?
- Bootstrap 4 Example
Горизонтальная форма
- - Bootstrap 4 против Bootstrap 3
Create First Web Page With Bootstrap 4
Использование сетки
Варианты оформления изображений
Custom Select Menu Size
- Example
Класс для придания изображениям гибкости
Важные глобальные переменные
- В HTML5 Тип документа
- Адаптивный Мета-тег
- Размерность блоков
- Normalize.css
Reordering
- Order classes
- Offsetting columns
  - Offset classes
  - Margin utilities
Bootstrap 3 vs. Bootstrap 4
Sass примеси
- Переменные
- Смешивания
- Примеры использования
Обзор компонента Forms
Alignment
- Vertical alignment
- Horizontal alignment
- No gutters
- Column wrapping
- Column breaks

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ.

Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.

Мобильных устройств

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

Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются

	Chrome	В Firefox	Safari
Android	Supported	Supported	N/A
iOS	Supported	Supported	Supported

Браузеры для ПК

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

	Chrome	В Firefox	Internet Explorer	Opera	Safari
Mac	Supported	Supported	N/A	Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not supported

В Windows мы поддерживаем Internet Explorer 8-11.

Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (СОЭ) версия браузера Firefox.

Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux, а также интернет Эксплорер 7, а также Microsoft края, хотя они официально не поддерживаются.

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

Community

Работа с input: подборка полезных решений на html и css

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Follow @getbootstrap on Twitter.
Read and subscribe to The Official Bootstrap Blog.
Join the official Slack room.
Chat with fellow Bootstrappers in IRC. On the server, in the channel.
Implementation help may be found at Stack Overflow (tagged ).
Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

Как это работает

Наклонный текст html тег i курсив примеры

На высоком уровне, блочная система работает так:

Существует три основных компонента—контейнера, строки и столбцы.
Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
«Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.

Как настроить микрофон в скайпе?

Настройка темы

Иногда доступ к микрофону заблокирован настройками безопасности — чтобы исключить возможность управления микрофоном извне. По этой причине микрофон в скайпе может не работать . В «настройках звука» переходим в параметры конфиденциальности микрофона»:

Если это так — включаем доступ к микрофону:

Скайп считается классическим приложением. Поэтому эта программа должна быть в списке ниже. Включаем все настройки переключателями:

Если используйте скайп в браузере, то в списке должен быть и тот браузер, в котором у вас работает скайп. Теперь, когда мы установили доступ к микрофону, можно и самом скайпе выставить предпочитаемый микрофон через «Настройки»…

…а затем установить выключатель в положение » настроить микрофон автоматически»:

При успешной настройке вы увидите, как индикатор «громкости» микрофона меняется в такт Вашему голосу.

Custom Checkbox

To create a custom checkbox, wrap a container element, like <div>, with a
class of and around the checkbox. Then add the to the input with type=»checkbox».

Tip: If you use labels for accompanying text, add the class to it.
Note that the value of the for attribute should match the id of the checkbox:

Custom checkbox

Default checkbox

Example

<form> <div class=»custom-control custom-checkbox»>
<input type=»checkbox» class=»custom-control-input» id=»customCheck»
name=»example1″>
<label class=»custom-control-label» for=»customCheck»>Check this custom
checkbox</label> </div></form>

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with three different containers:

, which sets a at each responsive breakpoint
, which is at all breakpoints
, which is until the specified breakpoint

The table below illustrates how each container’s compares to the original and across each breakpoint.

See them in action and compare them in our .

Extra small<576px	Small≥576px	Medium≥768px	Large≥992px	Extra large≥1200px
100%	540px	720px	960px	1140px
100%	540px	720px	960px	1140px
100%	100%	720px	960px	1140px
100%	100%	100%	960px	1140px
100%	100%	100%	100%	1140px
100%	100%	100%	100%	100%

Responsive

Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply s for each of the higher breakpoints. For example, is 100% wide to start until the breakpoint is reached, where it will scale up with , , and .

Auto margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (), and pushing two items to the left ().

Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default value. See this StackOverflow answer for more details.

Flex item
Flex item
Flex item

With align-items

Vertically move one flex item to the top or bottom of a container by mixing , , and or .

Flex item
Flex item
Flex item

Bootstrap 4 CDN

If you don’t want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap’s CSS and JavaScript. You must also include jQuery:

MaxCDN:

<!— Latest compiled and minified CSS —><link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css»><!— jQuery library —><script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>
<!— Popper JS —><script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script><!— Latest compiled JavaScript —><script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script>

One advantage of using the Bootstrap 4 CDN:
Many users already have downloaded
Bootstrap 4 from MaxCDN when visiting
another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN’s will make sure that once a user requests a file from it, it will be served
from the server closest to them, which also leads to faster loading time.jQuery and Popper?Bootstrap 4 use jQuery and Popper.js for
JavaScript components (like modals, tooltips, popovers etc). However, if you just use the
CSS part of Bootstrap, you don’t need them.

Show components that require jQuery »

Closable alerts
Buttons and checkboxes/radio buttons for toggling states
Carousel for slides, controls, and indicators
Collapse for toggling content
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

Sass options

Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables. Override a variable’s value and recompile with as needed.

You can find and customize these variables for key global options in Bootstrap’s file.

Variable	Values	Description
	(default), or any value > 0	Specifies the default spacer value to programmatically generate our spacer utilities.
	(default) or	Enables predefined styles on various components.
	or (default)	Enables predefined styles on various components.
	or (default)	Enables predefined gradients via styles on various components.
	(default) or	Enables predefined s on various components.
	(default) or	Enables the , which suppresses certain animations/transitions based on the users’ browser/operating system preferences.
	or (default)	Deprecated
	(default) or	Enables the generation of CSS classes for the grid system (e.g., , , , etc.).
	(default) or	Enables pseudo element caret on .
	(default) or	Add “hand” cursor to non-disabled button elements.
	(default) or	Enables styles for optimizing printing.
	or (default)	Enables .
	(default) or	Enables icons within textual inputs and some custom forms for validation states.
	or (default)	Set to to show warnings when using any of the deprecated mixins and functions that are planned to be removed in .

Align content

Use utilities on flexbox containers to align flex items together on the cross axis. Choose from (browser default), , , , , or . To demonstrate these utilities, we’ve enforced and increased the number of flex items.

Heads up! This property has no effect on single rows of flex items.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Responsive variations also exist for .

What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.

Bootstrap 4 Example

<div class=»jumbotron text-center»>  <h1>My First Bootstrap
Page</h1> <p>Resize this responsive page to see the effect!</p> </div><div class=»container»> <div class=»row»>
    <div class=»col-sm-4″>      <h3>Column 1</h3>      <p>Lorem ipsum
dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Column 2</h3>      <p>Lorem ipsum
dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Column 3</h3>       <p>Lorem ipsum
dolor..</p>    </div> </div></div>

Горизонтальная форма

Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы метка относительно текстовых полей расположилась по центру вертикали.

Bootstrap 4 против Bootstrap 3

Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки
При использовании сеток для макета формы, Bootstrap 4 требует класс .row. Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3).
Метки
Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label

Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label, но впоследствии заменил его на .col-form-label.
Класс .form-horizontal
Bootstrap 3 требует класс .form-horizontal, тогда как Bootstrap 4 нет.

Create First Web Page With Bootstrap 4

1. Add the HTML5 doctype

Bootstrap 4 uses HTML elements and CSS properties that require
the HTML5 doctype.

Always include the HTML5 doctype at the beginning of
the page, along with the lang attribute and the correct character set:

<!DOCTYPE html><html lang=»en»> <head> <meta charset=»utf-8″> </head></html>

2. Bootstrap 4 is mobile-first

Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are
part of the core framework.

To ensure proper rendering and touch zooming, add the following tag inside the
element:

The part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).

The part sets the initial zoom level when the page is first loaded
by the browser.

3. Containers

Bootstrap 4 also requires a containing element to wrap site contents.

There are two container classes to choose from:

The class provides a responsive fixed width container
The class provides a full width container, spanning the entire width of the viewport

.container

.container-fluid

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

<form>
    <div class="row">
        <div class="col">
            <input type="text" class="form-control" placeholder="Имя">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Фамилия">
        </div>
        <div class="col">
            <input type="email" class="form-control" placeholder="Почта">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Пароль">
        </div>
    </div>
</form>

<form>
    <div class="form-row">
        <div class="col">
            <input type="text" class="form-control" placeholder="Имя">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Фамилия">
        </div>
        <div class="col">
            <input type="email" class="form-control" placeholder="Почта">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Пароль">
        </div>
    </div>
</form>

<form>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="input-email">Почта</label>
            <input type="email" class="form-control" id="input-email" placeholder="Введите email">
        </div>
        <div class="form-group col-md-6">
            <label for="input-password">Пароль</label>
            <input type="password" class="form-control" id="input-password" placeholder="Введите пароль">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="input-zip">Индекс</label>
            <input type="text" class="form-control" id="input-zip" placeholder="Почтовый индекс">
        </div>
        <div class="form-group col-md-3">
            <label for="input-city">Город</label>
            <input type="text" class="form-control" id="input-city" placeholder="Город доставки">
        </div>
        <div class="form-group col-md-6">
            <label for="input-address">Адрес</label>
            <input type="text" class="form-control" id="input-address" placeholder="Адрес доставки">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Пример вертикального выравнивания элементов формы. Ширина каждого элемента определяется содержимым:

<form>
    <div class="row align-items-center">
        <div class="col-auto">
            <label for="input-email" class="sr-only">Почта</label>
            <input type="email" class="form-control mb-2" id="input-email" placeholder="Введите email">
        </div>
        <div class="col-auto">
            <label for="input-password" class="sr-only">Пароль</label>
            <input type="password" class="form-control mb-2" id="input-password" placeholder="Введите пароль">
        </div>
        <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="remember">
            <label class="form-check-label" for="remember">
                Запомнить
            </label>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-2">Войти</button>
        </div>
        <div class="col-auto">
            Поля со звездочкой обязательны
        </div>
    </div>
</form>

Если не использовать класс , то эта форма выглядела бы так:

Варианты оформления изображений

В этом разделе рассмотрим примеры оформления изображений с помощью CSS.

1. Пример, в котором показано как можно разместить текст поверх изображения.

<style>
/* CSS */
.img__container {
  position: relative;
  margin: 20px auto 30px auto;
}

.img__container>img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 6px #9E9E9E;
  border: 4px solid #fff;
}

.img__description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.img__header {
  font-weight: bold;
  font-size: 1.25em;
}    
</style>

<!-- HTML -->
<div class="img__container">
  <img src="image.png" class="image" alt="Описание изображения...">
  <div class="img__description">
    <div class="img__header">Заголовок для текста</div>
    Текст поверх изображения...
  </div>
</div>

2. Рамка для изображения с использованием CSS-свойств , и .

<style>
/* CSS */
.image {
  display: block;
  margin: 20px auto 30px auto;
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
  outline: 6px dotted #fff;
  outline-offset: -3px;
  border: 8px solid #eee;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

3. Изображение, стилизованное с использованием CSS-свойств и .

<style>
/* CSS */
.image {
  display: block;
  margin: 20px auto 30px auto;
  max-width: 100%;
  height: auto;
  box-shadow: -6px 6px 0 #E0E0E0, -12px 12px 0 #BDBDBD;
  margin-bottom: 30px;
  border: 6px solid #F5F5F5;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

4. Изображение, оформленное с помощью CSS-свойств и .

<style>
/* CSS */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto 30px auto;
  border: 5px solid #fff;
  box-shadow: 0 0 10px #9e9e9e;
  border-radius: 4px;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

5. Пример, в котором показана CSS3 техника для установки фонового изображения на весь экран.

/* CSS */
html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

6. Пример, в котором элементу установим фоновое изображение.

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

<style>
/* CSS */
.page-title {
  background-image: url(bg.png);
}
</style>

<!-- HTML -->
<div class="page-title">...</div>

Изображение применять в качестве фона рекомендуется только в том случае, если оно не является частью контента, а используется только для оформления.

Custom Select Menu Size

Use the class to create a small select menu and the class for a large one:

Small Custom Select MenuVolvoFiatAudiDefault Custom Select MenuVolvoFiatAudiLarge Custom Select MenuVolvoFiatAudi

Example

<form> <!— Small —> <select name=»cars» class=»custom-select-sm»>
<option selected>Small Custom Select Menu</option>    <option
value=»volvo»>Volvo</option>    <option value=»fiat»>Fiat</option>
<option value=»audi»>Audi</option> </select> <!— Large —> <select name=»cars» class=»custom-select-lg»>
<option selected>Large Custom Select Menu</option>    <option
value=»volvo»>Volvo</option>    <option value=»fiat»>Fiat</option>
<option value=»audi»>Audi</option> </select></form>

Класс для придания изображениям гибкости

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

Чтобы сделать изображения гибкими к ним нужно добавить специальные классы этого фреймворка:

в Bootstrap 3;
в Bootstrap 4.

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

<!-- Bootstrap 3 -->  
<img src="..." class="img-responsive">

<!-- Bootstrap 4 -->  
<img src="..." class="img-fluid">

Эти классы на самом деле выполняют очень простые действия, они применяют к изображению CSS-свойства и .

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

/* 1 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

/* 2 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались на странице как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}

Если необходимо сделать не все изображения на странице гибкими, а только те, которые расположены в определённом блоке, то в этом случае это необходимо определить с помощью CSS-селекторов:

/* например, сделаем гибкими только те изображения, которые расположены в элементе с классом main */
.main img {
  display: block;
  height: auto;
  max-width: 100%;
  /* дополнительно их выровняем по центру */
  margin-left: auto;
  margin-right: auto;
  /* и добавим внешний нижний отступ */
  margin-bottom: 15px;
}

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

<!-- Гибкое изображение, имеющее ширину 600 пикселей (Bootstrap 3) -->  
<img src="..." class="img-responsive" width="600">

<!-- Гибкое изображение, имеющее размер 600x800 пикселей (Bootstrap 4) --> 
<img src="..." class="img-fluid" width="600" height="800">

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

Важные глобальные переменные

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

В HTML5 Тип документа

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

Адаптивный Мета-тег

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

Вы можете увидеть пример этого в действии в .

Размерность блоков

Для более простой калибровки в CSS, то переключатель глобальный значение для . Это гарантирует , не влияет на конечный вычисляется Ширина элемента, но это может вызвать проблемы с некоторыми программами сторонних разработчиков, таких как карты Google и Google пользовательского поиска.

В тех редких случаях, вы должны переопределить его, использовать что-то вроде следующего:

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

Узнать больше о модель и размер в CSS трюки.

Normalize.css

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

Reordering

Order classes

Use classes for controlling the visual order of your content. These classes are responsive, so you can set the by breakpoint (e.g., ). Includes support for through across all five grid tiers.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

There are also responsive and classes that change the of an element by applying and (), respectively. These classes can also be intermixed with the numbered classes as needed.

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

Offsetting columns

You can offset grid columns in two ways: our responsive grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using classes. These classes increase the left margin of a column by columns. For example, moves over four columns.

.col-md-4
.col-md-4 .offset-md-4

.col-md-3 .offset-md-3
.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Margin utilities

With the move to flexbox in v4, you can use margin utilities like to force sibling columns away from one another.

.col-md-4
.col-md-4 .ml-auto

.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto

.col-auto .mr-auto
.col-auto

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.

Bootstrap 4 supports the latest, stable releases of all major browsers and
platforms. However, Internet Explorer 9 and down is not supported.

If you require IE8-9 support, use Bootstrap 3. It is the most
stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to
it.

Droppped icon support: Bootstrap 4 does not support BS3 Glyphicons. Use Font-Awesome or other icon libraries instead.

Sass примеси

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

Переменные

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

Смешивания

Смешивания используются в сочетании с переменных разметкок, чтобы образовать семантические CSS для отдельных столбцов разметки.

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

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

Увидеть его в действии в это привело к примеру.

Обзор компонента Forms

Компонент Forms – это набор стилей (CSS), которые предназначены для оформления HTML форм. Добавление стилей к форме и её элементам осуществляется
посредством классов.

Пример формы, оформленной с помощью стилей Bootstrap:

Правила корректного создания форм в Bootstrap:

Поместить каждую группу элементов (например, input и связанный с ним label) в элемент div с классом form-group.
Этот класс добавляет нижние отступы к группам элементов. Кроме этого данный класс также добавляет стили к некоторым
элементам формы, чтобы обеспечить их корректное отображение на различных устройствах.
Добавить к каждому текстовому элементу управления формы input, select
и textarea класс form-control. Данный
класс добавляет к элементам формы стили визуального оформления, оформление, когда он получает фокус, размеры и
многое другое.

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a as shown below.

Vertical alignment

One of three columns

Horizontal alignment

One of two columns

No gutters

The gutters between columns in our predefined grid classes can be removed with . This removes the negative s from and the horizontal from all immediate children columns.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

Need an edge-to-edge design? Drop the parent or .

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

.col-sm-6 .col-md-8
.col-6 .col-md-4

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9
.col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6Subsequent columns continue along the new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple s, but not every implementation method can account for this.

.col-6 .col-sm-3
.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4