bootstrap框架應用

---------------------------------------------------------------bootstrap-------------------------------------------------

開發中文網：v3.bootcss.com

（1）前段？  框架 ？

用戶 --》  前端應用程序 ---》後端應用程序 ---》後端服務器。

框架：Library 或者lib，都值得是框架。第三方提供的，一些接口或者功能。

 

一.Bootstrap框架是什麼？？

   BootStrap,最先的時候是兩個單詞的合成。如今成爲專有名詞Bootstrap,它是一個快速開發web應用程序和網站的前端框架。

 

二.爲何要學boot，並且爲何那麼火爆？

(1)容易上手，學過HTML和CSS的人就能來學習

（2）遊覽器支持，幾乎全部的遊覽器都支持bootstrap框架

（3）開發速度快，代碼優雅簡單

（4）移動先行，移動設備優先：自從3。0版本之後更好的適應於移動端開發。可是並非不能開發PC端

（5）響應式設計：Bootstrap自帶響應式設計，CSS能夠適用於PC\移動端設備的自適應

 

 

三.strap所要學的方向或者東西？

（1）基本的頁面結構：網格系統和基本的頁面模板

（2）全局CSS樣式：框架提供的CSS類

（3）組件：導航欄、警告框、下拉菜單等等

（4）JavaScript插件：用到的是JQ支持的插件。  輪播圖等等。。

 (5) 定製 ：定製本身的組件   （不是重點）

 

 

四.如何下載呢？

（1）Bootstrap: 這是一個專有的名詞， 意思爲引導指令和引導程序

（2）下載：http://www.bootcss.com/ 是boot的官網，文檔是英文的

（3）中文的官方網站：v3.bootcss.com  如今學的而是3版本

 

 相似的框架還有不少：妹子UI amaze UI 也是同樣的，是國內開發的

 

五.viewport使用

 

  <!-- 1.設置 字符的編碼格式-->

    <meta charset="utf-8">

    <!-- 2.讓IE遊覽器渲染試圖，按照edge遊覽器的方法 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 3.這是vieport 視口 -->

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

    <!-- meta:vp -->

 

     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

     <!-- width=device-width 讓網頁的尺寸等於手機的尺寸

          user-scalable = no; 禁止縮放（不推薦全部頁面使用，具體看狀況）

          initial-scale = 1;使CSS裏面的標籤 按照設置的尺寸1:1顯示在手機上

 

      -->

 

六,佈局容器-版心

（1）bootstrap已經給 body設置了基本的字體.顏色等等。全部的a標籤，有顏色。並且正常狀態下不顯示下劃線，除了hover顯示下劃線。

（2）佈局容器：container 版心。bootstrap須要爲頁面內容和柵格系統包裹一個 .container 容器。

       版心取值範圍

       1.屏幕大小  手機（<768） 寬度   寬度100% 

      2.小屏幕  768--992     寬度爲750px             

      3.顯示器  992-1200   寬度爲970                  

      4.超大屏幕 大於1200   寬度爲1170               

 

    <!-- .container 類用於固定寬度並支持響應式佈局的容器。 -->

    <!-- .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器 -->

注意：柵格系統使用會出現的幾種狀況

    @ 第一種狀況  只設置md,那麼 lg也會和md現象一致。而xs,md沒有響應式樣子

    @第二種狀況  只設sm，那麼  sm\md\lg一個樣子，xs沒有樣子

    @ 第三種狀況  設置sm\md  那麼 sm一個樣子， md和lg一個樣子，xs沒有樣子

     第四種狀況  只設置xs ，那麼xs\sm\md\lg全設置上了  （因此說xs特殊）

     注：如有同行中元素A設置offset，元素B不設置，則B還會緊貼着A，並不會覆蓋住B；若A偏移，B也偏移，那他們就各自偏移，互不影響；

    也就是offset會影響其餘，會帶着其餘一塊兒偏移，

    但，push-幾個單位或者pull-幾個單位，不會影響其餘，也就是，若A發生偏移，B沒有設置偏移，因此會出現A覆蓋住了B.

（3）柵格系統

       《1》柵格系統：是bootstrap提供的響應式佈局方式

                柵格系統的核心

                row（被劃分爲12個大小的單位）

                       列   列  列

                row

                row

-------------------------------------------------------望共同進步--------------------------------------------------