BootStrap基礎(chǔ)入門

BootStrap基礎(chǔ)入門

一、BootStrap概述

1.1什么是BootStrap

  • BootStrap，基于HTML、CSS、JavaScript的前端框架（半成品）。其預(yù)定義一套CSS樣式和與樣式對(duì)應(yīng)的jQuery代碼，我們只需要提供固定HTML結(jié)構(gòu)，添加固定的class樣式，就可以完成指定效果的實(shí)現(xiàn)
  • BootStrap在jQuery的基礎(chǔ)工作，可以理解BootStrap就是jQuery的一個(gè)插件。
  • BootStrap使得web開發(fā)更加快捷，代碼優(yōu)雅，美觀大方。
  • 由Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)。
  • BootStrap基礎(chǔ)入門使用的都是自帶CSS樣式，高級(jí)開發(fā)中需要使用HTML5，CSS3，動(dòng)態(tài)CSS語言Less進(jìn)行自定義開發(fā)。
  • 國內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于BootStrap源碼進(jìn)行性能優(yōu)化而來
  • 中文官網(wǎng)：http://www.bootcss.com/

1.2什么是響應(yīng)式布局

  • 響應(yīng)式布局：一個(gè)網(wǎng)站能夠兼容多個(gè)終端（手機(jī)、iPad等），而不需要為每個(gè)終端做一個(gè)特定的版本。此概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。
  • 響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用“大勢(shì)所趨”來形容也不為過。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。
  • BootStrap就是響應(yīng)式布局最為成功的實(shí)現(xiàn)，為了兼容不同的瀏覽器采用jQuery，為了適配不同的終端采用CSS3 Media Query(媒體查詢)

二、環(huán)境搭建

2.1下載

下載.PNG

2.2目錄結(jié)構(gòu)

目錄結(jié)構(gòu).png

2.3內(nèi)容結(jié)構(gòu)

發(fā)布版，及開始使用到的BootStrap內(nèi)容結(jié)構(gòu)

內(nèi)容結(jié)構(gòu).PNG
bootstrap/
├── css/
│   ├── bootstrap.css     //預(yù)定義的CSS文件
│   ├── bootstrap.css.map   //CSS與less源碼對(duì)應(yīng)文件
│   ├── bootstrap.min.css   //壓縮
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map  主題文件
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js      //js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot  //字體（字體圖標(biāo)）
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

上面展示的就是 Bootstrap 的基本文件結(jié)構(gòu)：預(yù)編譯文件可以直接使用到任何 web 項(xiàng)目中。我們提供了編譯好的 CSS 和 JS (bootstrap.) 文件，還有經(jīng)過壓縮的 CSS 和 JS (bootstrap.min.) 文件。同時(shí)還提供了 CSS 源碼映射表 (bootstrap.*.map) ，可以在某些瀏覽器的開發(fā)工具中使用。同時(shí)還包含了來自 Glyphicons 的圖標(biāo)字體，在附帶的 Bootstrap 主題中使用到了這些圖標(biāo)。

三、模版代碼

3.1基本模版

<!DOCTYPE html>  <!--HTML5約束（固定值）-->
<html lang="zh-CN">  <!--建議編寫，聲明語言，暫沒有發(fā)現(xiàn)用途 -->

    <head>
        <!--響應(yīng)式開發(fā)必須使用，且必須在<head>前三行 -->
        <meta charset="utf-8">
        <!--聲明文檔兼容模式，表示使用IE瀏覽器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--設(shè)置視口的寬度(值為設(shè)備的理想寬度)，頁面初始縮放值<理想寬度/可見寬度>-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
        <title>Bootstrap基本模板</title>

        <!-- 引入Bootstrap核心樣式文件 -->
        <!--預(yù)定義的CSS樣式-->
        <link href="../../css/bootstrap.min.css" rel="stylesheet">

        
    </head>

    <body>
        <h1>你好，世界！</h1>

        <!-- 引入jQuery核心js文件 -->
        <!--基于jQuery-->
        <script src="../../js/jquery-1.11.0.min.js"></script>
        <!-- 引入BootStrap核心js文件 -->
        <!--BootStrap類庫-->
        <script src="../../js/bootstrap.min.js"></script>
    </body>

</html>

3.2完整模版

<!DOCTYPE html>  
<html lang="zh-CN"> 

    <head>      
        <meta charset="utf-8">
        <!--聲明文檔兼容模式，表示使用IE瀏覽器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--設(shè)置視口的寬度(值為設(shè)備的理想寬度)，頁面初始縮放值<理想寬度/可見寬度>-->
        <!--視口的作用：在移動(dòng)瀏覽器中，當(dāng)頁面寬度超出設(shè)備，瀏覽器內(nèi)部虛擬的一個(gè)頁面容器，會(huì)將頁面縮放到設(shè)備這么大來展示-->   
        <!--width   設(shè)置layout viewport  的寬度，為一個(gè)正整數(shù)，或字符串"width-device"(表示采用設(shè)備的寬度)
            initial-scale   設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
            minimum-scale   允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
            maximum-scale   允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
            height  設(shè)置layout viewport  的高度，這個(gè)屬性對(duì)我們并不重要，很少使用
            user-scalable   是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
            如果設(shè)置"user-scalable=no",那么"minimum-scale"和"maximum-scale"無效
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
        <title>Bootstrap完整模板</title>

        <!-- 引入Bootstrap核心樣式文件 -->
        <link href="../../css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim 和 Respond.js 用于讓 IE8 支持 HTML5元素和媒體查詢 -->
        <!-- 注意： 如果通過 file://  引入 Respond.js 文件，則該文件無法起效果，必須放置到web服務(wù)器中，暫時(shí)不必掌握 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    </head>

    <body>
        <!--正文從此處開始-->
        <h1>你好，世界！</h1>

        <!--前端開發(fā)建議：網(wǎng)站優(yōu)化時(shí)，除了立即需要工作的js存放在head外，將大部分JS文件放在頁面的末尾-->

        <!-- 引入jQuery核心js文件，必須放置在bootStrap.js前面！ -->
        <script src="../../js/jquery-1.11.0.min.js"></script>
        <!-- 引入BootStrap核心js文件 -->
        <script src="../../js/bootstrap.min.js"></script>
    </body>

</html>

四、viewport介紹

4.1Viewport的概念

通俗的講，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點(diǎn)，就是瀏覽器上(也可能是一個(gè)app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下，一般 來講，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來說都比較小，所以為了能在移動(dòng)設(shè)備上正 常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站，移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由 設(shè)備自己決定的），但帶來的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度。

瀏覽器.png

4.2css中的1px并不等于設(shè)備的1px

在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會(huì)造成我們的一個(gè)錯(cuò)覺，那就是css 中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理 像素是不同的。在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁中，我們無需對(duì)這個(gè)津津計(jì)較，但在移動(dòng)設(shè)備上，必須弄明白這點(diǎn)。在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如 iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像 素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著 同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。其他品牌的移動(dòng)設(shè)備也是這個(gè)道理。例如安卓設(shè)備根據(jù)屏幕像素密度可分為 ldpi、mdpi、hdpi、xhdpi等不同的等級(jí)，分辨率也是五花八門，安卓設(shè)備上的一個(gè)css像素相當(dāng)于多少個(gè)屏幕物理像素，也因設(shè)備的不同而不 同，沒有一個(gè)定論。

還有一個(gè)因素也會(huì)引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁面放大一倍，那么css中1px所代表的物理像素也會(huì)增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會(huì)減少一倍。

4.3利用meta標(biāo)簽對(duì)viewport進(jìn)行控制

我們?cè)陂_發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：

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

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。也不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓 viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說會(huì)出現(xiàn)橫向滾動(dòng)條。

meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。

在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)，如下：

meta標(biāo)簽.PNG

這些屬性可以同時(shí)使用，也可以單獨(dú)使用或混合使用，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開就行了。

4.4總結(jié)

  • 第一，必須設(shè)置 meta viewport 標(biāo)簽

    如果不設(shè)置meta viewport標(biāo)簽，那么移動(dòng)設(shè)備上瀏覽器默認(rèn)的寬度值為800px，980px，1024px等這些，總之是大于屏幕寬度的。這里的寬度所用的單位px都是指css中的px，它跟代表實(shí)際屏幕物理像素的px不是一回事。

  • 第二、設(shè)置瀏覽器視口寬度為設(shè)備理想寬度

 每個(gè)移動(dòng)設(shè)備瀏覽器中都有一個(gè)理想的寬度，這個(gè)理想的寬度是指css中的寬度，跟設(shè)備的物理寬度沒有關(guān)系，在css中，這個(gè)寬度就相當(dāng)于100%的 所代表的那個(gè)寬度。我們可以用meta標(biāo)簽把viewport的寬度設(shè)為那個(gè)理想的寬度，如果不知道這個(gè)設(shè)備的理想寬度是多少，那么用devicewidth這個(gè)特殊值就行了

瀏覽器的寬度設(shè)置為設(shè)備的理想寬度:

<meta name="viewport" content="width=device-width,initial-scale=1">
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容