BootStrap Responsive Pages

BootStrap:

Web front-end CSS framework;

BootStrap is based on HTML, CSS, JavaScript.

The pages designed by it can be directly accessed on mobile phones, pads, and PCs according to predefined different styles.

BootStrap官网

Ready to work:

　　1. Download BootStrap;

　　2. Import the folder (css&fonts&js) in BootStrap into the project;

　　3. Introduce files into web pages:

< head > 
    < title ></ title > 
    < meta charset ="utf-8" > 
    < meta name ="viewport" content ="width=device-width, initial-scale=1" > 
    <!-- Bootstrap -- > 
    < link href = "bootstrap.min.css file path" rel = "stylesheet" > 
    <!-- jQuery (all of Bootstrap's JavaScript plugins depend on jQuery, so it must be in the front) --> 
    < script src = "jquery" .min.js file path" ></script>
    <!--Loads all of Bootstrap's JavaScript plugins. You can also just load individual plugins as needed. --> 
    < script src ="bootstrap.min.js file path" ></ script > 
</ head >

Page Layout:

Global CSS for BootStrap

　　1. Layout container:

　　　　The container class is used for fixed-width containers that support responsive layouts; eg: < div class = "container" ></ div >

　　　　The container-fluid class is used for containers that are 100% wide and occupy the entire viewport;

　　2. Grid system:

Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases. It contains easy-to-use predefined classes, as well as powerful minxins for generating more semantic layouts.

　　　　Use the .row style to define the rows of the grid. < div class = "row" ></ div >

　　　　Define column: (below)

Little Demo

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>My Bootstrap 响应式页面</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-xs-6">
                </div>
                <div class="col-md-4 col-xs-6"">
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </body>
</html>