Bootstrap
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
A Expansion Pack
Mainly used responsive web design (website content according to the user's environment, such as mobile phones, notebooks, browser size, screen resolution) is automatically adjusted. Very simple things have to play on the big names - -
The basic format: col- model - the number of columns
model:
Phone: col-xs-
Tablet: col-sm-
Notebook: col-md-
Widescreen: col-lg-
The screen is too small (such as you, but speaking with col-md-6 in the phone) will be the vertical arrangement of the content.
Number of columns:
The Bootstrap Each column is divided into 12 parts, such as class = " COL-MD-12" is the medium-sized fill line browser, class = ". 6-COL-MD" is the medium-sized half of browsers
example:
<div class="container"> <div class="row"> <div class="col-md-4">1</div> <!--确保每行列数总和是12--> <div class="col-md-8">2</div> </div> <div class="row">...</div> </div>
Column Reset: arranged according to different screen sizes use the format
<div class="col-xs-6 col-sm-3">1</div>
<div class="col-xs-6 col-sm-3">2</div>
<div class="col-xs-6 col-sm-3">3</div>
<div class="col-xs-6 col-sm-3">4</div>
Accounting for 1/2 of the small screen, accounting for a quarter on the big screen
If not col-xs-6, 1/4 of the large screen, the screen lists the longitudinal narrow line each.