bootstrap課程1 bootstrap爲何這麼火

bootstrap課程1 bootstrap爲何這麼火

1、總結

一句話總結：響應式，樣式多，功能多。

 

一、bootstrap經過什麼藥實現響應式？

響應式web佈局是讓用戶經過不一樣尺寸的瀏覽器均可以得到良好視覺的一種方法。是目前比較流行的一種佈局方法。

經過CSS3 Media Queries（媒體（設備）查詢），媒體查詢是讓頁面內容在不一樣的媒體環境下運行時能夠展現不一樣的樣式（這個樣式固然是由咱們來書寫規定的）。

 

二、響應式佈局是什麼？

響應式web佈局是讓用戶經過不一樣尺寸的瀏覽器均可以得到良好視覺的一種方法。是目前比較流行的一種佈局方法。

 

三、html5的data屬性有什麼用？

data屬性是HTML5中定義的一個全局屬性，它用來存在頁面或者應用程序的私有自定義數據。

咱們能夠爲全部 HTML 元素上嵌入自定義 data 屬性，自定義（存儲）的數據能夠被CSS或者JS來使用，來提升用戶體驗。

 

四、bootstrap中的響應式柵格系統如何實現？

經過斷點來變化

在上面這樣視口寬度由小變大的過程當中，首先是保持默認的豎直堆疊，而後超過了sm的斷點，sm的樣式生效，變爲一行兩列的排版，再繼續超過lg的斷點後，lg的樣式也生效，因爲lg的樣式代碼定義在sm以後，因此會覆蓋掉sm的樣式，從而獲得一行四列的排版。

 

 

2、bootstrap簡介

預處理腳本

雖然能夠直接使用 Bootstrap 提供的 CSS 樣式表，不要忘記 Bootstrap 的源碼是基於最流行的 CSS 預處理腳本 - Less 和 Sass 開發的。你能夠採用預編譯的 CSS 文件快速開發，也能夠從源碼定製本身須要的樣式。

 

一個框架、多種設備

你的網站和應用能在 Bootstrap 的幫助下經過同一份代碼快速、有效適配手機、平板、PC 設備，這一切都是 CSS 媒體查詢（Media Query）的功勞。

 

特性齊全

Bootstrap 提供了全面、美觀的文檔。你能在這裏找到關於 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的全部詳細文檔。

 

 

3、bootstrap使用心得總結

背景介紹：2015年9月份開始接觸bootstrap前端框架集，爲何呢，由於它實在是太火了，慕課網、菜鳥教程這些我常常逛的網站上bootstrap都是一個專題了，再加之它簡單好上手因而就選了它來入門。
項目：1.電子手冊閱讀網站的搭建；2.我的博客網站的搭建。

bootstrap的特色：

1.響應式佈局

概念：響應式web佈局是讓用戶經過不一樣尺寸的瀏覽器均可以得到良好視覺的一種方法。是目前比較流行的一種佈局方法。
實現原理：經過CSS3 Media Queries（媒體（設備）查詢），媒體查詢是讓頁面內容在不一樣的媒體環境下運行時能夠展現不一樣的樣式（這個樣式固然是由咱們來書寫規定的）。@media是CSS3中規定的屬性，它能夠實現針對不一樣媒體設備來設置不一樣的樣式的目的。並且就算是在同一設備中它也能夠在你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。
Bootstrap主要用到min-width、max-width，以及and語法，用於在不一樣的分辨率下設置不一樣的CSS樣式。
@media的語法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

其中mediatype有print（打印設備）、screen（用於電腦屏幕，平板電腦，智能手機等）、speech（應用於屏幕閱讀器等發聲設備）；media feature則是用來規定如最大寬度或者最小寬度。

咱們來看看bootstrap中佈局容器的例子：
Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。
以下

固定寬度佈局
<div class="container">
  ...
</div>
或者 流式佈局
<div class="container-fluid">
  ...
</div>

在bootstrap的css文檔中@media屬性

1591~1605行

@media (min-width: 768px) {
  .container { width: 750px; }
}
@media (min-width: 992px) {
  .container { width: 970px; }
}
@media (min-width: 1200px) {
  .container { width: 1170px; }
}
……

以上代碼實現了隨瀏覽器寬度的變化container容器的寬度也進行變化。

2.移動設備優先

在html文件中head區域加入這樣的一個meta標籤，name=「viewpoint」是指這個標籤對移動設備生效，content中width=device-width是指寬度爲設備寬度，initial-scale=1意思是初始縮放比例爲1.

<meta name="viewport" content="width=device-width, initial-scale=1">

可是在css文檔中沒有對超小屏幕定義任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的移動設備優先！

/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */

/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

3.data-*屬性的使用

data屬性是HTML5中定義的一個全局屬性，它用來存在頁面或者應用程序的私有自定義數據。咱們能夠爲全部 HTML 元素上嵌入自定義 data 屬性，自定義（存儲）的數據能夠被CSS或者JS來使用，來提升用戶體驗。

data-* 屬性包括兩部分：
屬性名不該該包含任何大寫字母，而且在前綴 「data-」 以後必須有至少一個字符
屬性值能夠是任意字符串

data屬性是bootstrap中應用不少的一個屬性，它可讓開發者僅僅經過data屬性API就能使用全部Bootstrap中的插件，並且不用寫一行JavaScript代碼。
bootstap中封裝的data-*屬性的API

**css中**
[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .btn-group > .btn input[type="radio"], [data-toggle="buttons"] > .btn input[type="checkbox"], [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } **js中** [data-toggle="buttons"
[data-toggle="collapse"][data-toggle="dropdown"][data-toggle="modal"][data-toggle="tab"][data-toggle="pill"]

4.柵格系統

參考：http://www.jb51.net/css/362199.html
柵格將一個頁面能夠拆分紅多個區塊來理解，而正是這些區塊共同構成了真個頁面的佈局。根據不一樣的屏幕尺寸狀況，調整這些區塊的排版，就能夠實現響應式設計。另外，屏幕寬度較大的時候，區塊傾向於水平分佈，而屏幕寬度較小的時候，區塊傾向於豎直堆疊。
柵格樣式庫通常是這樣作的：將頁面劃分爲若干等寬的列（column），而後推薦你經過等寬列來建立響應式的頁面區塊。
Bootstrap把它的柵格放在CSS這個分類下，並稱它爲Gird system。默認分爲12列。

要點一：容器、行與列

<div class="container">  
    <div class="row">  
        <div class="col-md-6"></div>  
        <div class="col-md-6"></div>  
    </div>  
</div>

container、row、column必須保持特定的層級關係，柵格系統才能夠正常工做。

要點二：斷點類型

Bootstrap柵格的column對應的類名形如.col-xx-y。y是數字，表示該元素的寬度佔據12列中的多少列。而xx只有特定的幾個值可供選擇，分別是xs、sm、md、lg，它們就是斷點類型。
在Bootstrap柵格的設計中，斷點的意義是，當視口（viewport）寬度小於斷點時，column將豎直堆疊（display: block的默認表現），而當視口寬度大於或等於斷點時，column將水平排列（float的效果）。按照xs、sm、md、lg的順序，斷點像素值依次增大，其中xs表示極小，即認爲視口寬度永遠不小於xs斷點，column將始終水平浮動。
有時候，會須要將多種斷點類型組合使用，以實現更細緻的響應式設計。此時不一樣的斷點類型之間會有怎樣的相互做用呢？
先看看Bootstrap的sass源碼是如何定義柵格的：

@include make-grid-columns;   
@include make-grid(xs);   
@media (min-width: $screen-sm-min) {   
  @include make-grid(sm);   
}   
@media (min-width: $screen-md-min) {   
  @include make-grid(md);   
}   
@media (min-width: $screen-lg-min) {   
  @include make-grid(lg);   
}

能夠看到，用了min-width的寫法，並且斷點像素值越大的，對應代碼越靠後。因此，若是有這樣的一些元素：

<div class="container">   
    <div class="row">   
        <div class="col-sm-6 col-lg-3">1</div>   
        <div class="col-sm-6 col-lg-3">2</div>   
        <div class="col-sm-6 col-lg-3">3</div>   
        <div class="col-sm-6 col-lg-3">4</div>   
    </div>   
</div>

 

 
結合前面的源碼，能夠想到，在上面這樣視口寬度由小變大的過程當中，首先是保持默認的豎直堆疊，而後超過了sm的斷點，sm的樣式生效，變爲一行兩列的排版，再繼續超過lg的斷點後，lg的樣式也生效，因爲lg的樣式代碼定義在sm以後，因此會覆蓋掉sm的樣式，從而獲得一行四列的排版。 因此，結合使用多個斷點類型，就能夠引入多個斷點變化，把響應式作得更加細緻。