C чего начать

Подсказки для полей формы

<form>
    <div class="form-group">
        <label for="input-email">Почта</label>
        <input type="email" class="form-control" id="input-email" placeholder="Введите email">
    </div>
    <div class="form-group">
        <label for="input-password">Пароль</label>
        <input type="password" class="form-control" id="input-password" placeholder="Введите пароль">
        <small id="password-help" class="form-text text-muted">
            Пароль должен быть длиной 8-20 символов, содержать буквы и цифры
            и не должен содержать пробелов.
        </small>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Регистрация</button>
    </div>
</form>

<form class="form-inline">
    <label for="input-email" class="sr-only">Почта</label>
    <input type="email" class="form-control" id="input-email" placeholder="Введите email">

    <div class="form-group mx-sm-2">
        <label for="input-password" class="sr-only">Пароль:</label>
        <input type="password" class="form-control" id="input-password" placeholder="Введите пароль">
        <small id="password-help" class="text-muted ml-sm-2">
            Должен быть не менее 8 символов.
        </small>
    </div>

    <button type="submit" class="btn btn-primary">Регистрация</button>
</form>

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

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

Альтернативные браузеры, которые используют последнюю версию 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 может столкнуться, смотрите наш Баги в браузере.

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>

Required Fields

A label that is associated with a required field is automatically annotated with
a CSS class. doesn’t provide any styling for required fields. You’re free to add any appropriate CSS to style
required fields as desired. One example would be to automatically add an
asterisk to the end of the label:

label.required:after {
  content:" *";
}

The label class is determined based on the definition of a presence
validator with the associated model attribute. Presently this is one of:
ActiveRecord::Validations::PresenceValidator or
ActiveModel::Validations::PresenceValidator.

In cases where this behaviour is undesirable, use the option to force the class to be present or absent:

<%= f.password_field :login, label: "New Username", required: true %>
<%= f.password_field :password, label: "New Password", required: false %>

Usage

bootstrap_form_for

To get started, use the helper in place of the Rails helper. Here’s an example:

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

This generates the following HTML:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user" type="password">
  </div>
  <div class="form-check">
    <input name="user" type="hidden" value="">
    <input class="form-check-input" id="user_remember_me" name="user" type="checkbox" value="1">
    <label class="form-check-label" for="user_remember_me">Remember me</label>
  </div>
  <input class="btn btn-secondary" name="commit" type="submit" value="Log In">
</form>

bootstrap_form_tag

If your form is not backed by a model, use the . Usage of this helper is the same as , except no model object is passed in as the first argument. Here’s an example:

<%= bootstrap_form_tag url: '/subscribe' do |f| %>
  <%= f.email_field :email, value: 'name@example.com' %>
  <%= f.submit %>
<% end %>

bootstrap_form_with

Note that in Rails 5.1 does not add IDs to form elements and labels by default, which are both important to Bootstrap markup. This behaviour is corrected in Rails 5.2.

To get started, just use the helper in place of . Here’s an example:

<%= bootstrap_form_with(model: @user, local: true) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

This generates:

<form role="form" action="/users" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="&#x2713;" />
  <div class="form-group">
    <label class="required" for="user_email">Email</label>
    <input class="form-control" type="email" value="steve@example.com" name="user" />
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" type="password" name="user" />
    <small class="form-text text-muted">A good password should be at least six characters long</small>
  </div>
  <div class="form-check">
    <input name="user" type="hidden" value="">
    <input class="form-check-input" id="user_remember_me" name="user" type="checkbox" value="1">
    <label class="form-check-label" for="user_remember_me">Remember me</label>
  </div>
  <input type="submit" name="commit" value="Log In" class="btn btn-secondary" data-disable-with="Log In" />
</form>

supports both the and use cases
in .

Загрузочные переключатели

Option 1

Option 2

Option 3

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

Следующий пример содержит три переключателя. Последний параметр отключен:

Пример

<div class=»radio»>  <label><input type=»radio» name=»optradio»>Option 1</label></div><div class=»radio»>  <label><input type=»radio» name=»optradio»>Option 2</label></div><div class=»radio disabled»>  <label><input type=»radio» name=»optradio» disabled>Option 3</label>
</div>

Используйте класс, если вы хотите, чтобы переключатели отображались на одной строке:

Option 1

Option 2

Option 3

Пример

<label class=»radio-inline»><input type=»radio» name=»optradio»>Option 1</label>
<label class=»radio-inline»><input type=»radio» name=»optradio»>Option 2</label>
<label class=»radio-inline»><input type=»radio» name=»optradio»>Option 3</label>

Bootstrap Form Control States

  • INPUT FOCUS — The outline of the input is removed and a box-shadow is applied on focus
  • DISABLED INPUTS — Add a attribute to disable an input field
  • DISABLED FIELDSETS — Add a attribute to a fieldset to disable all controls within
  • READONLY INPUTS — Add a attribute to an input to prevent user input
  • VALIDATION STATES — Bootstrap includes validation styles for error, warning, and
    success messages. To use, add , , or to the parent element
  • ICONS — You can add feedback icons with the class and an icon
  • HIDDEN LABELS — Add a class on non-visible labels

The following example demonstrates some of the form control states above in a Horizontal form:

Example

<form class=»form-horizontal»>  <div class=»form-group»>    <label class=»col-sm-2 control-label»>Focused</label>    <div class=»col-sm-10″>      <input class=»form-control» id=»focusedInput» type=»text» value=»Click to focus»>    </div>  </div>  <div class=»form-group»>    <label for=»disabledInput» class=»col-sm-2 control-label»>Disabled</label>    <div class=»col-sm-10″>      <input class=»form-control» id=»disabledInput» type=»text» disabled>    </div>  </div>  <fieldset disabled>    <div class=»form-group»>      <label for=»disabledTextInput» class=»col-sm-2 control-label»>Fieldset disabled</label>      <div class=»col-sm-10″>        <input type=»text» id=»disabledTextInput» class=»form-control»>      </div>    </div>    <div class=»form-group»>      <label for=»disabledSelect» class=»col-sm-2 control-label»></label>      <div class=»col-sm-10″>        <select id=»disabledSelect» class=»form-control»>          <option>Disabled select</option>        </select>      </div>    </div>  </fieldset>  <div class=»form-group has-success has-feedback»>    <label class=»col-sm-2 control-label» for=»inputSuccess»>    Input with success and icon</label>    <div class=»col-sm-10″>      <input type=»text» class=»form-control» id=»inputSuccess»>      <span class=»glyphicon glyphicon-ok form-control-feedback»></span>    </div>  </div>  <div class=»form-group has-warning has-feedback»>    <label class=»col-sm-2 control-label» for=»inputWarning»>    Input with warning and icon</label>    <div class=»col-sm-10″>      <input type=»text» class=»form-control» id=»inputWarning»>      <span class=»glyphicon glyphicon-warning-sign form-control-feedback»></span>    </div>  </div>  <div class=»form-group has-error has-feedback»>    <label class=»col-sm-2 control-label» for=»inputError»>    Input with error and icon</label>    <div class=»col-sm-10″>      <input type=»text» class=»form-control» id=»inputError»>      <span class=»glyphicon glyphicon-remove form-control-feedback»></span>    </div>  </div></form>

And here is an example of some of the form control states in an Inline form:

Example

<form class=»form-inline»>  <div class=»form-group»>    <label for=»focusedInput»>Focused</label>    <input class=»form-control» id=»focusedInput» type=»text»>  </div>  <div class=»form-group»>    <label for=»inputPassword»>Disabled</label>    <input class=»form-control» id=»disabledInput» type=»text» disabled>  </div>  <div class=»form-group has-success has-feedback»>    <label for=»inputSuccess2″>Input with success</label>    <input type=»text» class=»form-control» id=»inputSuccess2″>    <span class=»glyphicon glyphicon-ok form-control-feedback»></span>  </div>  <div class=»form-group has-warning has-feedback»>    <label for=»inputWarning2″>Input with warning</label>    <input type=»text» class=»form-control» id=»inputWarning2″>    <span class=»glyphicon glyphicon-warning-sign form-control-feedback»></span>  </div>  <div class=»form-group has-error has-feedback»>    <label for=»inputError2″>Input with error</label>    <input type=»text» class=»form-control» id=»inputError2″>    <span class=»glyphicon glyphicon-remove form-control-feedback»></span>  </div></form>

❮ Previous
Next ❯

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Quick start

Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use jQuery’s slim build, but the full version is also supported.

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Our and include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our section.

Show components requiring JavaScript

  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

Форма в одну строку

Используйте класс .form-inline, чтобы элементы формы отображались как строчно-блочные и выравнивались по левому краю. Используйте вспомогательные класса (например, mr-sm-2), чтобы добавить пространство между элементами.

Обратите внимание, всё это применимо только тогда, когда область просмотра имеет ширину не меньше 576 пикселей.
Имя
Фамилия
Отправить

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<form class=»form-inline»>
<label class=»mr-sm-2 mb-0″ for=»first_name»>Имя</label>
<input type=»text» class=»form-control mr-sm-2 mb-2 mb-sm-0″ id=»first_name» name=»first_name»>
<label class=»mr-sm-2 mb-0″ for=»last_name»>Фамилия</label>
<input type=»text» class=»form-control mr-sm-2 mb-2 mb-sm-0″ id=»last_name» name=»last_name»>
<button type=»submit» class=»btn btn-primary mt-2 mt-sm-0″>Отправить</button>
</form>

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from to . Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Equal-width columns can be broken into multiple lines, but there was a that prevented this from working without an explicit or . There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.

Column
Column

Column
Column

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Variable width content

Use classes to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a where you want the columns to break to a new line. Make the breaks responsive by mixing the with some responsive display utilities.

col
col

col
col

Disabled forms

Add the boolean attribute on an input to prevent user interactions and make it appear lighter.

Add the attribute to a to disable all the controls within. Browsers treat all native form controls (, , and elements) inside a as disabled, preventing both keyboard and mouse interactions on them.

However, if your form also includes custom button-like elements such as , these will only be given a style of , meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding to prevent them from receiving focus and to signal their state to assistive technologies.

Сообщество

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

  • Cледите @getbootstrap on Twitter.
  • Чиатйте и подписывайтесь на The Official Bootstrap Blog.
  • Присоединяйтесь к The official Slack room.
  • Общайтесь с фоловерами Bootstrappers в IRC. Канал на сервере .
  • Помощь в реализации на Stackoverflow ().
  • При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

Скрытые метки

В полях ввода всегда должны указываться метки, иначе программы чтения с экрана ожидают проблемы. При необходимости вы можете скрыть метку с помощью класса .sr-only.

Здесь мы используем .sr-only, чтобы скрыть метки, а также добавляем атрибут placeholder, чтобы подсказывать пользователю что вводить. Использование атрибута placeholder таким способом не рекомендуется, так как это может вызвать проблемы с удобством пользования.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<form class=»form-inline»>
<label class=»mr-sm-2 mb-0 sr-only» for=»first_name»>Имя</label>
<input type=»text» class=»form-control mr-sm-2 mb-2 mb-sm-0″
id=»first_name» name=»first_name» placeholder=»Имя»>
<label class=»mr-sm-2 mb-0 sr-only» for=»last_name»>Фамилия</label>
<input type=»text» class=»form-control mr-sm-2 mb-2 mb-sm-0″
id=»last_name» name=»last_name» placeholder=»Фамилия»>
<button type=»submit» class=»btn btn-primary mt-2 mt-sm-0″>Отправить</button>
</form>

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

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

Столбцы и промежутки

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

Грид уровней

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

При внесении любых изменений в файл Sass переменные или карты, Вам необходимо сохранить изменения и перекомпилировать. Это будет совершенно новый набор предопределенных грид классы для ширины столбцов, смещение, толкает и тянет. Адаптивный ЖКХ видимости также будут обновлены, чтобы использовать пользовательские точки останова.

Важные глобальные атрибуты

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

HTML5 doctype

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

«Отзывчивый» мета-тэг

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

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

Размер ширины и высоты элемента

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

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

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

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

Horizontal alignment

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

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-12 .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

.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

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

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Forms

Every group of form fields should reside in a element. Bootstrap provides no default styling for the element, but there are some powerful browser features that are provided by default.

  • New to browser forms? Consider reviewing the MDN form docs for an overview and complete list of available attributes.
  • s within a default to , so strive to be specific and always include a .
  • You can disable every form element within a form with the attribute on the .

Since Bootstrap applies and to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий