Usage of basic styles of Bootstrap

1. Preparation

1, Responsive layout

Bootstrap is a responsive layout framework that can automatically adapt to different devices Size display mode, usage method: introduce the following code in the head tag:

[Related recommendations: Bootstrap tutorial]

e6a2ef4717ed03faee9e40cd54c601e7

where initial-scale=1 means the scaling ratio is 1.

2, introduce bootstrap.css

You can download the bootstrap.css file locally for local import, or you can use CDN to import. The CDN import method is as follows:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Advantages and disadvantages of using CDN: 1. It must be introduced in a network environment; 2. If there are files on the local server, the loading speed will be very fast. For example, the CDN exists on a server in Qingdao bootstrap.css file, users in the Qingdao area will import the file very quickly, otherwise it will be slower and the loading delay will be higher; 3. There is no code prompt in the Webstorm software when using CDN to load css files. If you need code prompts, It is recommended to download bootstrap.css locally and then import it.

3, introduce bootstrap.js and jQuery.js

You can download the bootstrap.js and jQuery.js files locally for local import, or you can use CDN to import. The CDN import method is as follows ：

<!-- jQuery 某些bootstrap插件需要使用 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 所有的bootstrap插件都需要引入 -->
<script src="js/bootstrap.min.js"></script>

Note: Try to place the introduction of the js file at the end of the body tag to improve the performance of the browser rendering the page.

2. Styles commonly used in development

1. Grid system

Bootstrap provides a responsive, mobile device-first fluid grid system that can be easily As the screen or viewport size increases, the system will automatically divide it into up to 12 columns.

• "Row" must be contained in .container (fixed width) or .container-fluid (100% width) , in order to give it appropriate alignment and padding. Fluid layout container (.container-fluid), change the outermost layout element .container to .container-fluid, you can layout the fixed-width grid Convert to 100% width layout. The difference from .container is that the maximum width of the container is always set to 100% of the device screen.

• #Columns in the grid system represent the range they span by specifying a value from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4 .

• If the "column" contained in a "row" is greater than 12, the elements where the extra "column" is located will be treated as a whole. Arrange in a row.

The code snippet is as follows:

<p class="container">
//将一行按照8:4分成两列
  <p class="row">
    <p class="col-md-8">.col-md-8</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//将一行三等分为三列
  <p class="row">
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
    <p class="col-md-4">.col-md-4</p>
  </p>
//将一行等分为两列
  <p class="row">
    <p class="col-md-6">.col-md-6</p>
    <p class="col-md-6">.col-md-6</p>
  </p>
</p>

Grid parameters

You can view the Bootstrap grid in detail through the following table How the grid system works on a variety of screen devices;

The compatibility mode is backward compatible. For example, when using .col-md-, it will still be arranged according to the layout of the medium screen on the large screen. For small or ultra-small screens, they are arranged in a stacked manner. In the same principle, if .col-xs- is set, the set layout will be displayed on all devices because the grid system is backward compatible;

The grid layout uses a left-floating layout. You can clear the floating by defining the class attribute value as .clearfix;

.col-md-offset-5 to set the grid The 5 empty spaces on the left, .col-md-push-3, means that the grid is moved 3 spaces to the right, .col-md-pull-3 means that the grid is moved 3 spaces to the left;

-width: @screen-sm--width: @screen-md--width: @screen-lg-min) { ... }

e.g:
p{
/* 中等屏幕（桌面显示器，大于等于 992px） 此时执行{}里面的样式*/

@media (min-width: @screen-md-min) { width:100% }

/* 大屏幕（大桌面显示器，大于等于 1200px） 此时执行{}里面的样式*/

@media (min-width: @screen-lg-min) { width:80%}}

The above is the detailed content of Introduction to BootStrap basic styles. For more information, please follow other related articles on the PHP Chinese website!