響應(yīng)式布局可以使用浮動(dòng)自己制作，需要將網(wǎng)頁中的邏輯區(qū)塊的大小設(shè)置成符合最小設(shè)備的大小，在視口（顯示設(shè)計(jì)的顯示區(qū)域）較大時(shí)，則這些小的邏輯區(qū)塊將水平排列。最好的方法就是使用Bootstrap響應(yīng)式CSS框架。Bootstrap是一個(gè)簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，一種框架適應(yīng)各種設(shè)備，讓web開發(fā)更迅速、簡單。下面我們就簡單介紹一下Bootstrap的用法。3.2.1加入Bootstrap支持首先，要使用Bootstrap必須先引入三個(gè)meta屬性，而且這三個(gè)meta屬性必須出現(xiàn)在head標(biāo)記的最前面，即這三個(gè)meta之前不能再有任何內(nèi)容。HTML代碼如下：<metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1">其中第一個(gè)charset屬性大家已經(jīng)很熟悉了，它指定網(wǎng)頁使用的編碼方式，也可以這么認(rèn)為，Bootstrap使用的網(wǎng)頁編碼方式是utf-8。Utf-8編碼是通用的字符集，可以兼容世界上任何一種語言。X-UA-Compatible是文檔兼容模式的定義，Edge模式告訴IE以最高級(jí)模式渲染文檔，也就是任何IE版本都以當(dāng)前版本所支持的最高級(jí)標(biāo)準(zhǔn)模式渲染，避免版本升級(jí)造成的影響[12]。viewport用于指定用戶是否可以縮放Web頁面，如果可以，那么最大和最小縮放比例是什么，還可以表示文檔針對(duì)移動(dòng)設(shè)備進(jìn)行了優(yōu)化[13]。Viewport包含如下屬性[14]：◆width——設(shè)置layoutviewport的寬度，為一個(gè)正整數(shù)，或字符串"width-device"。

◆initial-scale——設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)?！鬽inimum-scale——允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

◆maximum-scale——允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)?！鬶eight——設(shè)置layoutviewport的高度，這個(gè)屬性對(duì)我們并不重要，很少使用?！魎ser-scalable——是否允許用戶進(jìn)行縮放，值為"no"或"yes",no代表不允許，yes代表允許。其次，要引入bootstrap.min.css，它定義了Bootstrap中各控件元素的樣式。HTML代碼如下：<linkhref="../css/bootstrap.min.css"rel="stylesheet">這里需要注意是bootstrap.min.css文件的路徑要書寫正確，否則無法應(yīng)用Bootstrap定義的樣式。第三，要引入jquery.min.js和bootstrap.min.js。Bootstrap需要jquery的支持。jQuery是一款優(yōu)秀的JavaScript（Ajax）框架，在實(shí)際應(yīng)用中用的特別多。這兩個(gè)js文件（即JavaScript源文件）包含了Bootstrap中動(dòng)態(tài)的內(nèi)容。HTML代碼如下：<scriptsrc="/jquery/1.12.4/jquery.min.js"></script><scriptsrc="../js/bootstrap.min.js"></script>此外，為了兼容IE9以下版本的瀏覽器，需要引入html5shiv.min.js和respond.min.js，主要用于IE9以下版本的瀏覽器支持HTML5元素和媒體查找。HTML代碼如下：<!--[ifltIE9]><scriptsrc="/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="/respond.js/1.4.2/respond.min.js"></script><![endif]-->完整的代碼如清單3-2所示。這個(gè)模板來自Bootstrap中文網(wǎng)[15]，我們可以使用這個(gè)模板來構(gòu)造自己的網(wǎng)頁。加入了Bootstrap的支持我們就可以使用它來制作自己的網(wǎng)頁了。下面我們使用Bootstrap制作一個(gè)圖3-1所示的導(dǎo)航菜單，可以看到使用Bootstrap比前面3.1節(jié)的制作過程簡單的是太多了。而且我們還制作了一個(gè)下拉式二級(jí)菜單。3.2.2Bootstrap制作導(dǎo)航菜單

如果使用Bootstrap制作導(dǎo)航菜單，那就容易多了。我們沒有必要像3.1節(jié)那樣編寫這么多CSS代碼，也沒有必要考慮導(dǎo)航鏈接和Tab頁之間的關(guān)系，只需要把要顯示的內(nèi)容按照Bootstrap的要求編寫即可。我們?nèi)匀恢谱鲌D3-1所示的導(dǎo)航菜單，效果如圖3-2所示，風(fēng)格與圖3-1不同。圖3-2Bootstrap制作的導(dǎo)航菜單Bootstrap制作導(dǎo)航菜單十分容易，所有的頁面元素都提供了模板，只要按照它的模板，填充自己的內(nèi)容就可以了。Bootstrap的導(dǎo)航條必須是一個(gè)nav元素，或者，如果是div元素的話，則必須指定role=”navigation”屬性。我們使用nav元素制作導(dǎo)航菜單。代碼如下：<nav> <ulclass="navnav-pills"><lirole="presentation"class="active"><ahref="#">首頁</a></li><lirole="presentation"><ahref="#">自學(xué)考試</a></li> <lirole="presentation"><ahref="#">英語四六級(jí)</a></li> <lirole="presentation"><ahref="#">普通話報(bào)名</a></li> <lirole="presentation"><ahref="#">專業(yè)四八級(jí)</a></li> </ul></nav>這里只是制作了前面的導(dǎo)航鏈接，而沒有制作“系統(tǒng)管理”的下拉式菜單，由于它的制作相對(duì)復(fù)雜，稍后再詳細(xì)討論。只需要把這些代碼加入到到清單3-2所示的模板頁中，即可以得到如圖3-2所示的導(dǎo)航菜單了！是不是超級(jí)簡單？只不過中<ul>中添加了class=”navnav-pills”屬性，在<li>中添加了role=”presentation”和class=”active”屬性而已，其他的與清單3-1所示的導(dǎo)航條是一模一樣的。我們所做的只不過是添加Bootstrap指定的一些屬性而已。剩下的只需要準(zhǔn)備自己的內(nèi)容而已！太偉大了。下面簡要介紹一下用到的幾個(gè)屬性：◆class="navnav-pills"——說明我們要制作膠囊式導(dǎo)航菜單?！魊ole="presentation"——說明li元素所起的作用，用于Bootstrapjs操作某些元素。◆class="active"——指明哪個(gè)元素處于活躍狀態(tài)。好了，只用了幾個(gè)屬性就把導(dǎo)航制作好了。是不是倍感輕松？下面我們制作下拉式菜單。因?yàn)椤跋到y(tǒng)管理”又細(xì)分為若干個(gè)功能，所以只能以二級(jí)菜單進(jìn)行顯示。制作二級(jí)菜單也很容易，但用到的Bootstrap屬性相對(duì)多一些。制作下拉菜單的HTML代碼如下：<lirole="presentation"class="dropdown"> <aclass="dropdown-toggle"data-toggle="dropdown"href="#"role="button"aria-haspopup="true"aria-expanded="false">

系統(tǒng)管理<spanclass="caret"></span> </a> <ulclass="dropdown-menu"> <lirole="presentation"><ahref="#">學(xué)院管理</a></li> <lirole="presentation"><ahref="#">系部管理</a></li><lirole="presentation"><ahref="#">專業(yè)管理</a></li> <lirole="presentation"><ahref="#">班級(jí)管理</a></li> <lirole="separator"class="divider"></li> <lirole="presentation"><ahref="#">信息導(dǎo)出</a></li> <lirole="presentation"><ahref="#">信息清理</a></li> </ul></li>這里用到的屬性比較簡單，從屬性值就可以看出它們的意義，下面簡單描述如下：◆class="dropdown"——表示制作下拉式菜單。◆class="dropdown-toggle"——菜單單擊時(shí)在拉開和隱藏兩狀態(tài)間切換。◆data-toggle="dropdown"——這是一個(gè)JS屬性，表示引用js給外層添加一個(gè)open類?！魊ole="button"——表示這里的<a>的角色顯示為按鈕?！鬭ria-haspopup="true"——aria表示無障礙網(wǎng)頁屬性（即給殘疾人“看”的網(wǎng)頁），這個(gè)屬性表示是否有彈出效果。◆aria-expanded="false"——表示<a>元素是不能展開的。◆<spanclass="caret"></span>——就是后面的下拉箭頭?！鬰lass="dropdown-menu"——指明<ul>是一個(gè)下拉式菜單。只需要了解這幾個(gè)屬性就可以制作這么“復(fù)雜”的下拉菜單了。其實(shí)，Bootstrap的主題——顏色、樣式、排序方式等——是可改變的，這就需要深入學(xué)習(xí)Bootstrap了，大家可以參考文獻(xiàn)[16]，如果英語看不懂的話，可以參考Boot