bootstrop的应用

在作前端开发中，其实有百分之四十的时间用来布局写样式，百分之三十用来写JS逻辑交互，百分之三十时间用来测试调bug，能够看的到的是，用在布局+样式的时候会比较多，

因此会有不少的前端框架诞生，例如bootstrap

前端框架包含有设定好的html布局结构，css样式，一些js效果，理论上将，不须要写一行代码，只需复制粘贴就能够实现一个静态页面

官方不要脸的介绍：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

用bootstrap不只能够写PC的页面，还能够作响应式

响应式：利用媒体查询等技术，经过检测浏览器的尺寸不一样，来显示不一样的布局结构，原理就是，媒体查询能够检测到屏幕的尺寸是否处于某一个范围，若是是的时候可让某一段css代码起做用，来实现结构切换

boot 默认的将屏幕划分红了四种：

0-768 xs ;768-992 sm ; 992-1200 md;1200- lg ;

boot 提供了两个布局容器，这两个布局容器是要做为某一个大的区域的最外层元素的，会和其余的一些布局类名配合使用

.container .container-fluid

container-fluid在任意屏幕下宽度都是百分之一百

container 是在xs屏永远都是100%；768-992，宽度：768；992-1200，宽度：992；1200- 宽度：1200，永远居中

boot 提供了栅格系统（12栅格化，网格化，网格系统）会让咱们在布局的时候，想象着将一行的空间分红12份，经过设置每个元素占几份来控制元素的排列

row类名能够在容器中将某一行分红12份

col-type-num 能够肯定某一行中的某一个元素在type屏幕的状况下占num份

注意，在使用这些类名的时候有小屏优先这样的原则:

在写媒体查询样式的时候，应该先写小屏的样式，再写大屏的样式，小屏解析的css代码会较少，性能较高

col-type-offset-num 设定的是某一个元素在某一个屏幕尺寸下向右偏移几份

visible-type hidden-type 在某一种屏幕下显示或隐藏

 

使用LESS来实现栅格化布局框架

>借助less预处理器与gulp自动化构建工具来实现响应式十二栅格化布局

什么是less？

一种 动态 样式 语言.

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既能够在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也能够借助Node.js或者Rhino在服务端运行（能够在node中进行编译）。

使用方法：

1. 在页面中能够直接引入less文件，可是必须引入less.js对其进行客户端编译。通常在练习的时候能够这样引入，在开发中就不要使用这样的方式了，由于在客户端进行编译会大量的浪费性能，增长页面响应时间

2. 利用gulp等工具对less进行编译，再项目中引入编译后的css文件

使用gulp搭建less编译环境

1. 全局安装gulp

npm install gulp --global

2. 在项目目录下进行 npm init建立package.json

3. 下载gulp依赖包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具

npm install gulp gulp-less gulp-autoprefixer gulp-clean-css --save-dev

4. 建立gulpfile.js文件编写任务
```
var gulp = require("gulp")
var less = require("gulp-less")
//css 前缀兼容
var auto = require("gulp-autoprefixer")

gulp.task("compile:less",function(){
gulp.src("./less/**/*.less")
.pipe(less())
.pipe(auto({
grid:true,
browsers:['last 2 versions']
}))
.pipe(gulp.dest('./css'))
})

gulp.task("watch",function () {
gulp.watch("./less/**/*.less",['compile:less'])
})

gulp.task("default",['compile:less','watch'])
```

这样就能够在该项目中，。执行gulp来开启监听less文件并编译的任务

编写响应式栅格化框架

1. 定需求

利用三个阀值将屏幕尺寸分红四种类型：

阀值： 768-992-1200

类型： xs-sm-md-lg

栅格化数量：12

```
@screen1:768px;
@screen1:992px;
@screen1:1200px;
@gridnum:12;
```

栅格化类名与样式

container,container-fluid

row

col-type-num

```
// mixins

.width(@w:100%){
width: @w;
margin-left:auto;
margin-right:auto;
}

.padding-content(@w:15px){
padding-left: @w;
padding-right: @w;
}

.clearfix{
&:after{
content:'';
display:block;
height: 0;
overflow: hidden;
visibility: hidden;
clear:both;
}
}

// 0-768 xs
//container container-fluid

.container,.container-fluid{
.width;
.padding-content;
.clearfix;
.row{
margin-left: -15px;
margin-right: -15px;
.clearfix;
}
.ghb(xs);
}

.visible-xs{display: block;}
.visible-sm{display: none;}
.visible-md{display: none;}
.visible-lg{display: none;}

.hidden-xs{display: none;}
.hidden-sm{display: block;}
.hidden-md{display: block;}
.hidden-lg{display: block;}

 

// 768-992 sm
//container container-fluid

@media screen and (min-width:@screen1){
.container{
.width(@screen1);
}
.container,.container-fluid{
.ghb(sm);
}

.visible-xs{display: none;}
.visible-sm{display: block;}
.visible-md{display: none;}
.visible-lg{display: none;}

.hidden-xs{display: block;}
.hidden-sm{display: none;}
.hidden-md{display: block;}
.hidden-lg{display: block;}

}

// 992-1200 md
//container container-fluid

@media screen and (min-width:@screen2){
.container{
.width(@screen2);
}
.container,.container-fluid{
.ghb(md);
}
.visible-xs{display: none;}
.visible-sm{display: none;}
.visible-md{display: block;}
.visible-lg{display: none;}

.hidden-xs{display: block;}
.hidden-sm{display: block;}
.hidden-md{display: none;}
.hidden-lg{display: block;}
}

 

// 1200- lg
//container container-fluid

@media screen and (min-width:@screen3){
.container{
.width(@screen3);
}
.container,.container-fluid{
.ghb(lg);
}

.visible-xs{display: none;}
.visible-sm{display: none;}
.visible-md{display: none;}
.visible-lg{display: block;}

.hidden-xs{display: block;}
.hidden-sm{display: block;}
.hidden-md{display: block;}
.hidden-lg{display: none;}
}

 

 

// .abc (@i:1) when (@i <= 100) {
// .a@{i}{
// width: unit(@i,px);// number->pixel
// }

// .abc(@i+1);
// }
// .abc;

 

.ghb (@type,@i:0) when(@i<=@gridnum) {

.col-@{type}-@{i}{
width:@i/@gridnum*100%;
float:left;
}

.col-@{type}-offset-@{i}{
margin-left:@i/@gridnum*100%;
}

.ghb(@type,@i+1);}