First, in response to the development of formula
1.1 responsive development principle
is to use media queries layout and style settings for devices of different widths, so as to fit the purpose of different devices.
| Equipment division | Size range |
|---|---|
| Ultra-small screen (mobile phone) | < 768px |
| Small screen devices (Tablet) | >= 768px ~ < 992px |
| Medium screen (desktop monitor) | >= 992px ~ <1200px |
| Widescreen (large desktop monitors) | >= 1200px |
1.2 responsive layout container
responsive required layout container as a parent to child element with change effect is achieved.
It is in principle different screen layout to change the size of the container through the media query, and then change the arrangement and size of the child elements inside in order to achieve different screens, to see different page layout and style changes.
Two, Bootstrap distal development framework
About 2.1 Bootstrap
Bootstrap from Twitter (Twitter), it is the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT
, which is simple and flexible, so that Web developers more quickly.
- Chinese official website: http: //www.bootcss.com/
- Official website: http: //getbootstrap.com/
advantage:
- Standardized coding standard html + css
- Provides a simple, intuitive, powerful components
- It has its own ecosystem, constantly updated iteration
- Make development easier and improve the efficiency of the development
Bootstrap 2.2 using
Bootstrap using four steps: 1. Create a folder structure 2. 3. Create html skeleton structure 4 is introduced related style files written content
- Create html skeleton structure
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
2.3 layout container
Bootstrap page content and needs to be wrapped in a raster system .container container, which provides two useful for this class.
-
container type
container in response to a fixed-width layout of
a large screen (> = 1200px) 1170px width as
the screen (> = 992px) 970px width as
small screen (> = 768px) 750px width as
ultra small-screen (100%) -
based container-fluid
flow layout container width hundred percent
occupy all the viewport (the viewport) of the container.
Width modified container
For example take the width of 1280, while the inside container Bootstrap maximum width 1170px, so we need to manually change the width of the lower container
/* 利用媒体查询修改 container宽度适合效果图宽度 */
@media (min-width: 1280px) {
.container {
width: 1280px;
}
}
Three, Bootstrap grid system
3.1 Introduction to grid system
grid system English as "grid systems", it was translated as "grid system", which refers to the page layout is divided into equal-width columns, then pass
through the defined number of columns modular page layout .
Bootstrap provides a responsive, mobile device priority streaming grid system, with the increase of the screen or viewport (the viewport) size,
the system will automatically be divided into a maximum of 12.
3.2 Grid Options parameter
grid system is used to create page layouts by combining a series of rows (row) and column (column), you can put the contents of these create a good layout.
| Ultra-small screen (mobile phone) <768px | Small screen device (tablet)> = 768px | Medium screen (desktop monitor)> = 992px | Widescreen (large desktop monitors)> = 1200px | |
|---|---|---|---|---|
| .container maximum width | Automatically (100%) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg |
| Column (column) number | 12 | 12 | 12 | 12 |
1 to 12 are divided into equal parts in different screens
- Row (Row) may be removed margins of the parent container action 15px
- xs-extra small: ultra-small; sm-small: small; md-medium: Medium; lg-large: large;
- Column (column) is greater than 12, the excess of element "column (column)" will be located as a whole from the other row arranged
- Each column has a default 15 pixels of padding
- It can be simultaneously a plurality of devices specified class name, for example, so as to divide the different parts class = "col-md-4 col-sm-6"
3.3 Nested
grid system built content nested grid system again. Simple to understand a small column and then the column into a number of parts. We can add a new element of .row
and a series of .col-sm- * element into the .col-sm- * existing elements.
<div class="container">
<div class="row">
<div class="col-md-10">
<!-- 列嵌套 -->
<!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-8">b</div>
</div>
</div>
<div class="col-md-2">2</div>
</div>
3.4 offset
using .col-md-offset- * based columns may be shifted to the right. These classes are actually increased by use of the selector * the left margin (margin) of the current element.
<div class="row">
<div class="col-md-3">左侧3</div>
<!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
<div class="col-md-3 col-md-offset-6">右侧3</div>
</div>
<div class="row">
<!-- 偏中间 -->
<!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
<div class="col-md-8 col-md-offset-2">中间盒子8</div>
</div>
Renderings:
3.5 sort
by using .col-md-push- * and .col-md-pull- * class can easily change the row (column) order.
- .col-md-push- *: push to the right
- .col-md-pull- *: pull the left
<div class="container">
<div class="row">
<div class="col-md-4 ">左侧</div>
<div class="col-md-8 ">右侧</div>
</div>
<div class="row">
<!-- “左侧div”向右推8，-->
<!-- “右侧div”向左拉4 -->
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
Renderings:
3.6 responsive tool
in order to accelerate the mobile device-friendly page development work, the use of media queries, and use these tools for different devices can easily
display (visible) or hidden page content (hidden).
.hidden-xs: ultra-small screen to hide, other visible;
.hidden-SM: small screen to hide, other visible;
.hidden-md: the screen to hide, other visible;
.hidden-LG: big screen to hide, other visible;
also visible-lg have a similar effect;
Bootstrap other (buttons, forms, tables) Bootstrap reference document.
Fourth, the mobile terminal layout summary
- Fluid layout (layout percentage)
- flex elastic layout (recommended)
- rem adaptation layout (recommended)
- Responsive layout
suggestion: We choose a major technology selection, as other technical assistance, this hybrid technology development
