The bootstrap summary

1. What is BootStrap

A front-end development framework, Bootstrap, from Twitter, is currently a popular front-end framework. Bootstrap is simple and flexible based on HTML, CSS, and JavaScript, making Web development faster.
Framework: a semi-finished software that developers can develop on the basis of the framework to simplify coding.

2. Why use BootStrap

Defines a number of CSS styles and JS plug-ins. We developers can use these styles and plug-ins directly to get rich page effects
Responsive layout: The same set of pages can be compatible with devices of different resolutions. It ADAPTS to computers, phablets.

3.BootStrap quick start method 1

To download Bootstrap, go to v3.bootcss.com/. **
- The directory structure after downloading and unpacking bootstrap:
- Precompiled files can be used directly in any Web project. Among thembootstrap.*Is compiled,bootstrap.min.*Is compiled and compressed, the content of the two is the same, the difference is that a compressed file, we generally introduce the compressed file, this will make the access speed is a little faster, no compression of the code is more convenient (carriage return and base character).
Copy the three folders in your project

Create an HTML page and import the necessary resource files

<! DOCTYPEhtml>
	<html lang="zh-CN">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <! The above 3 meta tags must come first, and everything else must come after them! -->
	    <title>Bootstrap HelloWorld</title>
	
	    <! -- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
         <! -- jQuery (all JavaScript plug-ins for Bootstrap rely on jQuery and must be placed first) -->
	    <script src="Js/jquery - 3.2.1. Min. Js." "></script>
	    <! Load all JavaScript plugins for Bootstrap. You can also load individual plug-ins as needed. -->
	    <script src="js/bootstrap.min.js"></script>
	</head>
	<body>
	<h1>Hello world!</h1>
	
	</body>
	</html>
Copy the code

Note: BootStrap downloaded from the official website does not have jquery-3.2.1.

Link: pan.baidu.com/s/1dSgWRQ6x… Extraction code: UD5Q

4. Quick start Method 2

CDN import, download free

< link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" >

< script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" > < / script >

< script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" > < / script >

<! DOCTYPEhtml>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <! The above 3 meta tags must come first, and everything else must come after them! -->
    <title>Bootstrap HelloWorld</title>

    <! -- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello world!</h1>

    <! -- jQuery (all JavaScript plug-ins for Bootstrap rely on jQuery and must be placed first) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <! Load all JavaScript plugins for Bootstrap. You can also load individual plug-ins as needed. -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>
Copy the code

5. Responsive layout

The same set of pages can be compatible with devices of different resolutions
Implementation: Depends on the grid system. As the screen size increases, the system automatically divides into up to 12 columns.
Use of grid system:
1. Define the container. Equivalent to table before
  
  <div class="container"></div>
  
  Container: Leave white on both sides
  
  Container-fluid: Each device is 100% width
2. Define line. That’s what TR was before
<div class="row"></div>
1. Define elements. Specifies the number of cells that this element occupies on different devices.
<div class="col-xs-1"></div>

Format: COL – Equipment code – cell number

Equipment Code:

Xs: Ultra-small screen, mobile phone (<768px)

Sm: Small screen tablet (≥768px)

Md: Medium screen desktop monitor (≥992px)

Lg: Large screen large desktop monitor (≥1200px)
1. Note:
If there are more than 12 cells in a row, the excess part is wrapped.

Raster properties are compatible upward. Properties defined for the small screen apply to the large screen.

If the device width is less than the minimum width set by the raster class element attribute, an element will fill a row.

case

<! DOCTYPEhtml>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
   
div.container div.row div {
    margin:5px 0px;
     
}
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">A total of 12 columns</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
        <div class="col-xs-1 ">1 column</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">Of four columns</div>
        <div class="col-xs-4 ">Of four columns</div>
        <div class="col-xs-4 ">Of four columns</div>
    </div>
</div>
Copy the code

6. CSS styles and JS plug-ins

Global CSS Styles

Button:
- <button type="button" class=" BTN btn-default">
- <button type="button" class=" BTN btn-primary"> </button>
- <button type="button" class=" BTN btn-success">
- <button type="button" class=" BTN btn-info"> </button>
- Class =" BTN bTN-warning "Warning button
- Class =" BTN bTN-danger "Danger button
- class="btn btn-link"Link button

The picture

Specify class=img-responsive in div so that the image supports responsive layout // image shape<img src="xxx" alt="xxx" class="img-rounded">/ / square<img src="xxx" alt="xxx" class="img-circle">/ / round<img src="xxx" alt="xxx" class="img-thunbnail">/ / picture frameCopy the code

form

  <body>
   <table class="table table-hover">
       <tr>
           <th>The column 1</th>
           <th>Column 2</th>
       </tr>
        <tr>
           <td>The column value 1</td>
           <td>The column value 2</td>
       </tr>
    </table>
  </body>//class="table table-striped": indicates a table with stripes. //class="table table-bordered": indicates a table with stripes......Copy the code

The form
- Add class=”from-control” to form entry

component
- The navigation bar
  - Defined using the nav element,<nav class="navbar navbar-default"></nav>
  - Defines the navigation bar Settings for inverting colorsclass="navbar navbar-inverse"
- Article page
Js plug-in
- Shuffling: a Carousel
- You can choose the title, speed, and direction of rotation

7. To summarize

The official documentation is very detailed, what to implement directly to find, and then take it to change. www.bootcss.com/.
Bootstrap for a quick overview,
How2j also writes well, can briefly understand.

This article is published by OpenWrite, a blogging tool platform

1. What is BootStrap

2. Why use BootStrap

3.BootStrap quick start method 1

4. Quick start Method 2

5. Responsive layout

6. CSS styles and JS plug-ins

7. To summarize

Related Posts

Front-end code optimization utility

The back-end obtains the USER IP address of the NUXT project

Node Basics – KOA (3)