Summary of Bootstrap Adapting to Multiple Devices
Bootstrap provides a responsive, mobile-first streaming grid (grid) system that automatically divides up to 12 columns as the screen or viewport size increases .
Grid options are:
mobile device (<768px), class prefix: col-xs-
tablet device (>=768px), class prefix: col-sm
-medium device desktop computer (>=992px), class prefix: col-md -
Desktop computers for large devices (>=1200px), class prefix: col-lg-
If you want to display different layouts on different devices, you only need to adapt more.
eg: <div class="col-xs-6 col-sm-3 col-md-6 col-lg-9" >..</div>
In this example, we provide 4 different column layouts, which are suitable for Four devices. On mobile, it will be a layout of 50% left and 50% right. On a tablet it would be a 25%/75% layout. On a medium device it would be a 50%/50% layout. On devices with large viewports, it will be a 75%/25% layout.
"Responsive" is to decide which class to use according to the width of the browser
• When the screen width u≥1200px, bootstrap will automatically select the class col-lg-*;
• When the screen width u≥992px, bootstrap will automatically select the col-md-* class;
• When the screen width u≥768px, bootstrap will automatically select the col-sm-* class;
• When the screen width u<768px , bootstrap will automatically select the col-xs-* class;
disabling responsive layout has the following steps:
1. Remove the tag that sets the browser viewport (viewport) mentioned in this CSS document: <meta>.
2. Override the frame's default width setting by setting a width value for the .container class, eg width: 970px !important; . Make sure these settings are all placed after the default Bootstrap CSS file. Note that you can also omit !important if you put it in a media query.
3. If navigation bars are used, the collapse and unfold behavior of all navigation bars needs to be removed.
4. For grid layout, add additional .col-xs-* classes or replace .col-md-* and .col-lg-*. Don't worry, the grid system for ultra-small screen devices can be expanded in all resolutions.
IE Compatibility Mode
Bootstrap does not support IE's ancient compatibility mode. In order to make IE browser run the latest rendering mode, it is recommended to add this <meta> tag to your page:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Press F12 Open the debugging tool of IE, you can see what the current rendering mode of IE is.
This meta tag is included in all Bootstrap documents and instance pages in order to have the best rendering in each supported version of IE.
To ensure proper drawing and touch scaling, the viewport metadata tag needs to be added to the <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
On mobile device browsers, you can disable scaling of the viewport by setting the meta attribute of the viewport to user-scalable=no (zooming) function. This way, when zooming is disabled, users can only scroll, making your website look more like a native app. Note that this method is not recommended for all websites, it depends on your own situation!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
• Width=device-width => means the page width is the device screen Width; ensure that the web page can be correctly rendered by devices with different screen resolutions;
• user-scalable=no => whether the scaling ratio can be adjusted (yes/no);
• initial-scale=1.0 => indicates the initial scaling ratio, with 1 :1 is rendered without any scaling; minimum-scale=0.5: minimum allowed scaling;
• maximum-scale=2.
Ultra small screen phones (<768px) Small screen tablets (≥768px) Medium screen desktop monitors (≥992px) Large screen large desktop monitors (≥1200px
) Threshold will become horizontal arrangement C
.container max-width None (auto) 750px 970px 1170px
class prefix .col-xs- .col-sm- .col-md- .col-lg-
number of columns 12
max columns ( column) width automatic ~62px ~81px ~97px
slot (gutter) width 30px (each column has 15px left and right)
can be nested
Yes Offsets Yes
Column sorting Yes
Grid system
Bootstrap provides a set of responsive, mobile devices A preferred fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases. It includes easy-to-use predefined classes, and powerful mixins for generating more semantic layouts.
Introduction The
grid system is used to create page layouts through a series of row and column combinations into which your content can be placed. Here's how the Bootstrap grid system works:
• "rows" must be contained in either .container (fixed width) or .container-fluid (100% width) to give them the proper alignment and padding.
• Creates a set of "columns" in the horizontal direction with "rows".
• Your content should be placed in "column", and only "column" can be a direct child of "row".
• Presets like .row and .col-xs-4 The defined classes can be used to quickly create grid layouts. The mixins defined in the Bootstrap source code can also be used to create semantic layouts.
• By setting the padding property for "column", create a column-to-column layout Gutter. By setting a negative margin for the .row element to offset the padding set for the .container element, it also indirectly offsets the padding for the "column" contained in the "row".
• Negative margins are why the examples below stick out. The contents of a grid column line up.
• Columns in a grid system are represented by specifying a value from 1 to 12 to indicate the range they span. For example , three equal-width columns can be created using three .col-xs-4.
• If a "row" contains a "column" greater than 12, the extra "column" The element it is in will be laid out on a new line as a whole.
• The grid class is suitable for devices with a screen width greater than or equal to the breakpoint size, and overrides the grid class for small screen devices. Therefore, apply any .col on the element -md-* grid classes apply to devices with a screen width greater than or equal to the demarcation point size, and override grid classes for small screen devices. Therefore, applying any .col-lg-* on an element that does not exist also has a large impact Screen device.
Briefly explain the picture:
1. The outermost border, with a large white area, is equivalent to the visible area of the browser. There are responsive effects in the grid system of the Bootstrap framework, which has four types of browsers (ultra small screen, small screen, medium screen and large screen), and its breakpoint (the dividing point of pixels) is 768px, 992px and 1220px.
2. The second border (1) is equivalent to the container (.container). It has different widths for different browser resolutions: auto, 750px, 970px, and 1170px. Set in line 736 to line 756 of bootstrap.css:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
3. The horizontal bar of No. 2 describes that the row (.row) of the container is divided into 12 equal parts, that is, the column. Each column has a "padding-left: 15px" (in pink in the image) and a "padding-right: 15px" (in purple in the image). This also causes the padding-left of the first column and the padding-right of the last column to occupy 30px of the total width, which makes the page unsightly. Of course, if you need to leave a certain spacing, this approach is good. As shown in line 767 ~ line 772 in bootstrap.css:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
4. The third horizontal bar is the row container (.row), which defines the "margin-left" and "margin-right" values of "-15px", which are used to offset the left padding of the first column and the last column. Right inner distance. You can see from line 763 to line 767 of bootstrap.css:
.row {
margin-right: -15px;
margin-left: -15px;
Implementing column composition is very simple, and only involves two CSS features: float and width percentage. In the bootstrap.css file, line 1088 ~ 1126:
/* Make sure all columns are floated to the left */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
/* Define the width of each column combination (in percentage used) */
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
5. Column offset
Sometimes , we don't want two adjacent columns to be close together, but we don't want to use margin or other technical means. At this time, you can use the column offset (offset) function to achieve. Using column offset is also very simple, just add the class name "col-md-offset-*" to the column element (where the asterisk represents the number of column combinations to be offset), then the column with this class name will be Right offset. For example, you add "col-md-offset-4" to the column element, which means that the column is shifted to the right by the width of 4 columns.
6. Column sorting
Column sorting is actually changing the direction of the column, that is, changing the left and right floating, and setting the floating distance. In Bootstrap's grid system this is done by adding the class names "col-md-push-*" and "col-md-pull-*" (where the asterisk represents the number of column combinations to move).
Adding the bootstrap container
bootstrap's .container class is very useful, it creates a centered area in the page, and then we can put content from other places in it. The container class is equivalent to creating a centered div with a static width and a magnet value of auto. The advantage of the container class of twitter bootstrap is that it is responsive, it will calculate the best width to use based on the width of the current screen.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
In the body tag, create a div with the container class.
Navigation bar Navigation can be created
using nav element, and we want to create a navigation bar to organize navigation items, in bootstrap, the navigation bar is called navbar
<div class="container">
<h1>Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
</ul>
</div>
</nav>
</div>
ul is the actual navigation content, where .nav indicates that this is a set of navigations, and .navbar-nav indicates that it is used for navigation in the navbar. li is the actual navigation item, you can use .active to describe the currently active navigation.
Note .navbar-collapse, which means to turn the navigation into a vertical orientation when the width of the viewport is less than 768px.
container
.Container and .container_fluid are two different types of outer containers in bootstrap. According to the official statement, the difference between the two is:
The .container class is used for fixed-width containers that support responsive layouts.
The .container-fluid class is used for containers that are 100% wide and occupy the full viewport.