1 grid
Bootstrap provides a responsive, mobile-first streaming raster system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases.
<! DOCTYPE html>"Utf-8"/> <title></title> <link rel="stylesheet"href="Css/index.css"/> <meta name="Viewport"Content="width=device-width,initial-scale=1"> <meta name="Viewport"Content="width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no"> <link rel="icon"href="./img/index.png"> <link rel="stylesheet"href="Http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!--jquery file. Be sure to introduce-<script src= before Bootstrap.min.js"Http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!--the latest Bootstrap core JavaScript files--<script src="Http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> class="Page-header"> Using the <small>bootstrap grid System layout page </small>11111111111111111111111111111111111111111</p> <H2class="Page-header"> block one class="Page-header"> Block two class="Page-header"> Block III Center the display, divided into three equal parts displayed in the same row
<! DOCTYPE html>"Utf-8"/> <title></title> <link rel="stylesheet"href="Css/index.css"/> <meta name="Viewport"Content="width=device-width,initial-scale=1"> <meta name="Viewport"Content="width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no"> <link rel="icon"href="./img/index.png"> <link rel="stylesheet"href="Http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!--jquery file. Be sure to introduce-<script src= before Bootstrap.min.js"Http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!--the latest Bootstrap core JavaScript files--<script src="Http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> class="Container"> class="Page-header"> Using the <small>bootstrap grid System layout page </small>11111111111111111111111111111111111111111</p> <divclass="Row"> <divclass="col-md-4"> <H2class="Page-header"> block one class="col-md-4"> <H2class="Page-header"> Block two class="col-md-4"> <H2class="Page-header"> Block III Knowledge Points:
1) Center The contents of the display, using the CSS Class container.
Container This class sets the width of the content and centers the actual content.
2) display content on the same line, and the average is divided into three parts, you need to use the CSS class row
The displayed pages are as follows:
Citation information:
http://v3.bootcss.com/css/#grid
Bootstrap Learning Summary-02 grid layout