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);}