Introduction of the Bootstrap

Bootstrap comes from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making Web development faster. Bootstrap can be downloaded by directly entering the Chinese official website, selecting the Chinese document and clicking the Download button.

  • Chinese official website: www.bootCSS.com/
  • Liverpoolfc.tv: getbootstrap.com/

Framework: as the name implies is a set of architecture, it has a relatively complete web function solution, and the control in the framework itself, there are prefabricated style library, components and plug-ins. Users develop according to some specification specified by the framework.

The Bootstrap advantages

  • Standardization of HTM | + CSS coding standards
  • Provides a set of simple, intuitive, powerful components
  • It has its own ecosystem, constantly updated and iterated
  • It makes development easier and improves the efficiency of development

The Bootstrap version

  • 2. X.x: stop maintenance, compatibility is good, the code is not simple enough, the function is not perfect.
  • 3. X: Currently the most used, stable, but abandoned IE6, IE7. On | E8 support effect is not good, but the interface to used for developing responsive layout, mobile devices, the priority of the WEB project.
  • 4. X.x: the latest version, not very popular at present

Use the Bootstrap

At this stage we will only consider using its style library. The control is in the framework itself, the user should be in accordance with the framework of a certain specification for development.

Bootstrap uses four steps:

1. Create folder structure

2. Create the HTML skeleton structure

<! -- Requires the current web page to be rendered using the highest version of Internet Explorer kernel -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<! Viewport Settings: viewport width is the same as the device, the default zoom ratio is the same as PC, users can not scale by themselves -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<! --[if lt IE 9]> <! -- Solve the problem that IE9 does not recognize new html5 tags and causes CSS to fail -->
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   	<! CSS3 Media Query not recognized by IE9 -->
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><! [endif]-->Copy the code

3. Introduce related style files

<! Bootstrap core style -->
<link rel="stylesheet" href="bootstrap/css/boqtstrap.min.css">
Copy the code

4. Writing content

  • Use the Bootstrap predefined styles directly
  • Modify the original style of Bootstrap, and pay attention to the weight problem
  • The key to learning Bootstrap well is to know what styles it defines and what effects these styles can achieve. If you use them often, you need to read the styles on the official website, so that you can use them directly in the future

Bootstrap Layout container

Bootstrap requires wrapping a. Container container around the page content and raster system, which provides two classes for this purpose.

  1. The container class
  • Responsive layout of the container with fixed width
  • Large screen (>=1200p x) width set to 1170px
  • Middle screen (>=992p for width 970p×
  • Small screen (>=768p for width 750px
  • Ultra-small screen (100%)

Note: The default. Container class of Bootstrap has a maximum width of 1170 for sorting. You will need to override this property if you want to change it. However, other classes, such as col-MD-2, are not recommended to change. Changing these public classes may cause a series of unexpected changes. If you need to change the style of the parent element, you can change the related attributes of the parent element and use! Method change for the important field to increase weight. 2. The container – fluid type

  • The flow layout container is 100 percent wide
  • A container that occupies all viewports.
  • Suitable for mobile page development

Bootstrap grid system

  • A gridsystem is a system that divides a page layout into columns of equal width, and then modularizes the page layout by defining the number of columns.
  • Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases.

Responsive layout is achieved by varying the number of grids occupied.

Grid option parameter

The grid system is used to create a page layout with a series of rows and columns into which your content can be placed.

  • It is divided into 1 to 12 equal parts according to different screens
  • A row can remove 15px margins from the parent container
  • Xs (extra small): super small; Sm (small) : a small; Md (medium) : medium; Lg,) : big,
  • If a column is greater than 12, the element containing the extra column will be arranged on another row as a whole
  • Each column defaults to about 15 pixels of padding
  • You can specify the class names of multiple devices in a column, for example, class=” col-MD-4 col-SM-6 “, to achieve a responsive layout
<div class="container">
    <div class="row">
      <! Each div has three columns -->
      <div class="col-lg-3">1</div>
      <div class="col-lg-3">2</div>
      <div class="col-lg-3">3</div>
      <div class="col-lg-3">4</div>
    </div>
    <div class="row">
      <! -- When the total number of column children is less than 12, there is some blank space -->
      <div class="col-lg-6">1</div>
      <div class="col-lg-1">2</div>
      <div class="col-lg-1">3</div>
      <div class="col-lg-1">4</div>
    </div>
    <div class="row">
      <! When the total number of column children is greater than 12, the extra element is displayed as a float.
      <div class="col-lg-6">1</div>
      <div class="col-lg-4">2</div>
      <div class="col-lg-2">3</div>
      <div class="col-lg-2">4</div>
    </div>
    <div class="row">
      <! -- Example of setting up a responsive layout with 4 elements in a row for a large screen and 2 elements for a medium screen -->
      <div class="col-lg-3 col-md-6">1</div>
      <div class="col-lg-3 col-md-6">2</div>
      <div class="col-lg-3 col-md-6">3</div>
      <div class="col-lg-3 col-md-6">4</div>
    </div>
</div>
Copy the code

Column nested

The built-in raster system nested the content again. The simple idea is that a column is divided into several columns. We can do this by adding a new.row element and a set of.col-sm-* elements to an existing.col-sm-* element.

<div class="container">
    <div class="row">
      <! Nesting a new grid system -->
      <div class="col-lg-4 row">
      	<p class="col-lg-6">1</p>
        <p class="col-lg-6">2</p>
      </div>
      <div class="col-lg-4">2</div>
      <div class="col-lg-4">3</div>
    </div>
</div>
Copy the code

The column offset

Use. Col – md – offset –The (numeric) class can offset columns to the right(number) column. These classes actually add a margin to the left of the current element by using the * selector.

<div class="container">
    <div class="row">
      <! Nesting a new grid system -->
      <div class="col-lg-4">On the left side of the</div>
      <div class="col-lg-4 col-lg-offset-4">On the right side</div>
      <! -- Shift the element x to the right to center it -->
      <div class="col-lg-8 col-lg-offset-2">The box is in the middle of the screen</div>
    </div>
</div>
Copy the code

Column sorting

Col-md-push -* to the right and col-md-pull-* to the left make it easy to change the order of columns.

<div class="container">
    <div class="row">
      <! Push the element on the left back 8 places -->
      <div class="col-lg-4 col-lg-push-8">On the left side of the</div>
      <! Pull the element on the right 4 places forward -->
      <div class="col-lg-8 col-lg-pull-4">On the right side</div>
      <! -- Push the element back x places to center it -->
      <div class="col-lg-8 col-lg-push-2">The box is in the middle of the screen</div>
</div>
Copy the code

Bootstrap Responsive tool

To speed up mobile-friendly page development, take advantage of media queries and use these utility classes to make it easy to show or hide page content for different devices.

In contrast, visible-XS, visible-SM, visible-MD, and Visibe-LG display certain content for different devices and hide it at other times.

Bootstrap For other items (buttons, forms, and tables), refer to the Bootstrap documentation.

Font folder for Bootstrap

It contains many small ICONS, pictures, etc. When using it, you need to find the relevant class name on the official website, and you can give the element, for example, the small icon of the camera is Glyphicon Glyphicon-camera.

<a href="#" class="glyphicon glyphicon-camera">Life hall</a>
Copy the code

Bootstrap helper class

Bootstrap also has a number of helper classes, such as the Clear float ClearFix class, text color class, background class, and more. It’s all available on the official website

Bootstrap img-responsive class

Img images can be implemented in a responsive style that automatically scales with the screen size.

Other classes of Bootstrap

Bootstrap and many other classes related to typography can be found on the website