Обновление
Содержание:
- Bootstrap Checkboxes
- Важные глобальные переменные
- CSS variables
- Sass примеси
- Auto margins
- Create First Web Page With Bootstrap 4
- Sass mixins
- Sass options
- Пользовательские компоненты
- II. Классы и компоненты
- Custom File Upload
- Флажки Bootstrap
- Варианты оформления изображений
- Quick start
- Флажки и переключатели
- Customizing the grid
- Important globals
- Использование сетки
- How it works
- Auto-layout columns
- Direction
- Функционал разметки
- Internet Explorer 10 на Windows 8 и Windows Phone 8
- Адаптивные таблицы
Bootstrap Checkboxes
Checkboxes are used if you want the user to select any number of options from
a list of preset options.
The following example contains three checkboxes. The last option is disabled:
Example
<div class=»form-check»> <label class=»form-check-label»>
<input type=»checkbox» class=»form-check-input» value=»»>Option 1
</label></div><div class=»form-check»> <label
class=»form-check-label»> <input type=»checkbox»
class=»form-check-input» value=»»>Option 2 </label></div>
<div class=»form-check»> <label class=»form-check-label»>
<input type=»checkbox» class=»form-check-input» value=»» disabled>Option 3
</label></div>
Example explained
Use a wrapper element with to ensure proper margins for labels and checkboxes.
Add the class to label elements, and to style checkboxes properly inside the container.
Важные глобальные переменные
Bootstrap использует несколько важных глобальных стилей и настроек, которые вы должны знать при его использовании, все они являются почти исключительно ориентированы на нормализацию кросс стилей браузера. Давайте начнем.
В HTML5 Тип документа
Bootstrap требует использования HTML5 doctype. Без него вы увидите местами неполные стили, но в том числе он не должен вызывать каких-либо значительных сбоев.
Адаптивный Мета-тег
Bootstrap в первую очередь разработан для мобильных устройств, стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью запросов на основе CSS. Чтобы обеспечить правильную визуализацию и масштабирование касания для всех устройств, добавьте адаптивный мета тег viewport в свой .
Вы можете увидеть пример этого в действии в .
Размерность блоков
Для более простой калибровки в CSS, то переключатель глобальный значение для . Это гарантирует , не влияет на конечный вычисляется Ширина элемента, но это может вызвать проблемы с некоторыми программами сторонних разработчиков, таких как карты Google и Google пользовательского поиска.
В тех редких случаях, вы должны переопределить его, использовать что-то вроде следующего:
Приведенные выше фрагменты, вложенные элементы, в том числе контент, созданный с помощью и —Все наследуют указанную для .
Узнать больше о модель и размер в CSS трюки.
Normalize.css
Для улучшения кросс-браузер рендеринга, мы используем чтобы устранить небольшие расхождения в разных браузерах и на разных устройствах. Мы и в дальнейшем построить на этом с нашей, чуть более самоуверенные типы с Reboot.
CSS variables
Bootstrap 4 includes around two dozen CSS custom properties (variables) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.
Examples
CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.
Breakpoint variables
While we originally included breakpoints in our CSS variables (e.g., ), these are not supported in media queries, but they can still be used within rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. .
Here’s an example of what’s not supported:
And here’s an example of what is supported:
Sass примеси
При использовании Bootstrap источник Sass файлов, у вас есть возможность использования Sass переменных и миксинов для создания пользовательских семантических, aдаптивный страница разметки. Наш использовать те же переменные и миксины представить целый набор готовых классов для быстрого aдаптивный разметки.
Переменные
Переменные и карты определить количество столбцов, ширину промежутка, а медиа запросов точки, с которой начинается плавающие столбцы. Мы используем их, чтобы создать предопределенный грид классов, описанных выше, а также для пользовательских миксины, перечисленных ниже.
Смешивания
Смешивания используются в сочетании с переменных разметкок, чтобы образовать семантические CSS для отдельных столбцов разметки.
Примеры использования
Вы можете изменить переменные на собственные значения, или просто использовать миксины с их значениями по умолчанию. Вот пример с использованием параметров по умолчанию, чтобы создать два столбца разметка с зазором между ними.
Увидеть его в действии в это привело к примеру.
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
Flex item
Flex item
Flex item
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
Flex item
Flex item
Flex item
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:
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
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
Sass mixins
When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
Variables
Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
Example usage
You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.
Main content
Secondary content
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 . |
Пользовательские компоненты
Одностраничный шаблон для построения простых и красивых домашних страниц.
Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.
Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.
Базовая структура для администратора приборная панель с фиксированным боковым меню и панели навигации.
Шаблон пользовательской формы настроен для простого входа на сайт.
Создание компонованого нав. меню с выровненными ссылками
Внимание!
Закрепление колонтитула в нижней части браузера для случая, когда высота контента сама собой не делает этого.
II. Классы и компоненты
глава третья
Оформление контента
- Оформление и работа с текстом
- Стилизация HTML списков
- Средства Bootstrap для оформления изображений
-
Оформление HTML таблиц
- CSS для HTML элемента figure
-
Классы платформы для HTML форм
-
Примеры оформления форм
-
Вспомогательные классы
- Оформление заголовков
глава четвёртая
Компоненты
-
Breadcrumb (навигационные
цепочки, хлебные крошки) -
Collapse и создание на базе него
аккордеона -
Dropdowns (выпадающие
списки) -
Jumbotron
(оформление ключевой информации) -
Modal (модальные окна для
веб-страницы) -
Navs (навигационные
блоки) -
Navbar (основное меню
сайта) -
Panels (Bootstrap 3
панели) - Popovers (всплывающие панели)
-
Scrollspy (выделение ссылок на
основании положения прокрутки) - Tabs (Bootstrap 3 вкладки)
-
Thumbnails (Bootstrap 3
галерея) - Alerts (сообщения)
- Badges (бейджи)
- Buttons (кнопки)
- Carousel (карусель)
- Pagination (навигационный блок для пагинации)
- Progress (индикаторы выполнения)
- Tooltips (всплывающие подсказки)
только для Bootstrap 3
- Иконки Glyphicons
-
Affix (sticky-позиционирование
элементов)
только для Bootstrap 4
- Card (карточка)
- Spinners (Спиннеры)
- Navbar (основное меню)
глава пятая
Классы помощники
-
Управление отображением элементов (Bootstrap 4)
-
Классы для работы с flexbox (Bootstrap 4)
-
Управление margin и padding отступами (Bootstrap 4)
-
Управление границами и скруглениями углов элементов (Bootstrap 4)
Custom File Upload
To create a custom file upload, wrap a container element with a
class of around the input with type=»file». Then add the to it.
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:
Choose file
Note that you also have to include some jQuery code if you want the name of the file to appear when you select a specific file:
Example
<form> <div class=»custom-file»> <input
type=»file» class=»custom-file-input» id=»customFile»>
<label class=»custom-file-label» for=»customFile»>Choose file</label>
</div></form><script>// Add the following code if
you want the name of the file appear on select
$(«.custom-file-input»).on(«change», function() { var fileName =
$(this).val().split(«\\»).pop();
$(this).siblings(«.custom-file-label»).addClass(«selected»).html(fileName);
});</script>
❮ Previous
Next ❯
Флажки Bootstrap
Option 1
Option 2
Option 3
Флажки используются, если требуется, чтобы пользователь мог выбрать любое количество параметров из списка предустановленных параметров.
В следующем примере содержатся три флажка. Последний параметр отключен:
Пример
<div class=»checkbox»> <label><input type=»checkbox» value=»»>Option 1</label></div><div class=»checkbox»> <label><input type=»checkbox» value=»»>Option 2</label></div><div class=»checkbox disabled»> <label><input type=»checkbox» value=»» disabled>Option 3</label></div>
Используйте класс, если вы хотите, чтобы флажки отображались в одной строке:
Option 1
Option 2
Option 3
Пример
<label class=»checkbox-inline»><input type=»checkbox» value=»»>Option 1</label><label class=»checkbox-inline»><input type=»checkbox» value=»»>Option 2</label><label class=»checkbox-inline»><input type=»checkbox» value=»»>Option 3</label>
Варианты оформления изображений
В этом разделе рассмотрим примеры оформления изображений с помощью 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>
Изображение применять в качестве фона рекомендуется только в том случае, если оно не является частью контента, а используется только для оформления.
Quick start
Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. 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. We use jQuery’s slim build, but the full version is also supported.
Place one of 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.
Bundle
Include everything you need in one script with our bundle. Our and include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our section.
Components
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re unsure about the page structure, keep reading for an example page template.
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
- Toasts for displaying and dismissing
- Tooltips and popovers for displaying and positioning (also requires Popper.js)
- Scrollspy for scroll behavior and navigation updates
Флажки и переключатели
Bootstrap 4 предоставляет классы .form-check, .form-check-label, .form-check-input и .form-check-inline для отображения флажков и переключателей.
Чтобы отобразить флажки или переключатели друг под другом, вложите каждый из них в элемент <div> с классом .form-check. Кроме того, добавьте .form-check-label к элементу <label> и .form-check-input к элементу <input>.
В одну строку
В Bootstrap 4 флажки и переключатели по умолчанию располагаются друг под другом. Вы можете отобразить их в одну строку, добавив .form-check-inline к внешнему <div>. Оставьте .form-check-input в элементе <input>.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<!— Флажки —>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»checkbox» id=»inlineCheckbox1″ value=»1″>
<label class=»form-check-label»>1</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»checkbox» id=»inlineCheckbox2″ value=»2″>
<label class=»form-check-label»>2</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»checkbox» id=»inlineCheckbox3″ value=»3″>
<label class=»form-check-label»>3</label>
</div>
<!— Переключатели —>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»radio» name=»inlineRadioOptions» id=»inlineRadio1″ value=»1″>
<label class=»form-check-label»>1</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»radio» name=»inlineRadioOptions» id=»inlineRadio2″ value=»2″>
<label class=»form-check-label»>2</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»radio» name=»inlineRadioOptions» id=»inlineRadio3″ value=»3″>
<label class=»form-check-label»>3</label>
</div>
</div>
Bootstrap 4 против Bootstrap 3
Bootstrap 3 для отображения флажков и переключателей использует .radio, .radio-inline, .checkbox или .checkbox-inline. Bootstrap 4 использует .form-check, .form-check-label, .form-check-input и .form-check-inline.
Customizing the grid
Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
Columns and gutters
The number of grid columns can be modified via Sass variables. is used to generate the widths (in percent) of each individual column while sets the width for the column gutters.
Grid tiers
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the and to something like this:
When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in (not , , or ).
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.
Использование сетки
<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>
Если не использовать класс , то эта форма выглядела бы так:
How it works
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
New to or unfamiliar with flexbox? for background, terminology, guidelines, and code snippets.
One of three columns
One of three columns
One of three columns
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .
Breaking it down, here’s how it works:
- Containers provide a means to center and horizontally pad your site’s contents. Use for a responsive pixel width or for across all viewport and device sizes.
- Rows are wrappers for columns. Each column has horizontal (called a gutter) for controlling the space between them. This is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
- In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
- Thanks to flexbox, grid columns without a specified will automatically layout as equal width columns. For example, four instances of will each automatically be 25% wide from the small breakpoint and up. See the section for more examples.
- Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .
- Column s are set in percentages, so they’re always fluid and sized relative to their parent element.
- Columns have horizontal to create the gutters between individual columns, however, you can remove the from rows and from columns with on the .
- To make the grid responsive, there are five grid breakpoints, one for each : all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., applies to small, medium, large, and extra large devices, but not the first breakpoint).
- You can use predefined grid classes (like ) or for more semantic markup.
Be aware of the limitations and bugs around flexbox, like the .
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 multi-line
Create equal-width columns that span multiple lines by inserting a where you want the columns to break to a new line. Make the breaks responsive by mixing with some responsive display utilities.
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 your target browsers don’t fall into the buggy versions.
col
col
col
col
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
Direction
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is . However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
Use to set a horizontal direction (the browser default), or to start the horizontal direction from the opposite side.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Use to set a vertical direction, or to start the vertical direction from the opposite side.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Responsive variations also exist for .
Функционал разметки
При Bootstrap использует s или s для определения большинства размеров, s применяются для грид точки останова и ширины контейнера. Это происходит потому, что Ширина области просмотра в пикселях и не меняется с .
Смотри как аспекты Bootstrap блочная система работают на нескольких устройствах с таблица.
| Сверхмалые<544px | Небольшой≥544px | Средний≥768px по | Большие≥992px | Очень большой≥1200px | |
|---|---|---|---|---|---|
| Поведение разметки | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Ширина контейнера | None (auto) | 576px | 720px | 940px | 1140px |
| Класс префикса | |||||
| # колонок | 12 | ||||
| Промежуточная ширина | 1.875rem / 30px (15px on each side of a column) | ||||
| Вкладка | Yes | ||||
| Отступ | Yes | ||||
| Выравнивание столбцов | Yes |
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 в качестве демонстрации.
Адаптивные таблицы
Сделать таблицу адаптивной можно просто с помощью добавления класса к , благодаря этому у Вас появятся полосы прокрутки таблицы на устройствах с малыми дисплеями (менее 768px). При просмотре таблицы на устройстве с шириной экрана более чем 768px Вы даже не заметите разницы.
Вертикальной подрезки/усечения
Адаптивный таблицы использовать , который загибается любое содержание, которое выходит за пределы нижней или верхней кромками таблица. В частности, это может клип выпадающие меню и другие сторонние виджеты.
Firefox и fieldsets
Firefox имеет какой-то несуразный набор полей для укладки участием что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:
Для получения дополнительной информации, прочитайте .
| # | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| # | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Обратный стиль
Превратите традиционную таблицу на их стороне с помощью . При использовании обратного стиля, заголовок таблицы будет в первом столбце, первая строка таблицы становится второй колонкой, вторая строка становится третьей колонкой, и т. д.
Содержание заказа и сложных таблицы
Помните, что изменения стиля визуальный порядок содержания. Убедитесь, что вы только применить этот стиль к хорошо сформированные и простые данные таблицы (и в частности, не использовать это для разметка таблицы) с соответствующими таблица заголовков ячеек для каждой строки и столбца.
Кроме того, этот класс не будет работать за таблицы клеток, которые охватывают несколько строк или столбцов (с помощью или атрибуты).
| # | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
