bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)實(shí)例教程課件第5章

1、bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)實(shí)例教程課件第5章bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)實(shí)例教程課件第5章網(wǎng)頁(yè)中的表格1網(wǎng)頁(yè)中的表格1Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 表格是HTML中最常見(jiàn)的元素之一，在使用DIV+CSS進(jìn)行網(wǎng)頁(yè)的排版之前，表格布局法一直是網(wǎng)頁(yè)進(jìn)行整體結(jié)構(gòu)規(guī)劃的主要方法。而目前，表格布局法已經(jīng)逐步被HTML+CSS取代，所以現(xiàn)在網(wǎng)頁(yè)中的表格就僅以列表的形式出現(xiàn)，如圖5-1所示。Bootstrap表格-網(wǎng)頁(yè)中的表格表格的簡(jiǎn)介圖5-1網(wǎng)頁(yè)中表格的使用Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 表格是HTMBootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 簡(jiǎn)單的HTML表格由table元素以及一個(gè)或多個(gè)tr、th

2、或td元素組成，其中tr元素定義表格行，th元素定義表頭，td元素定義表格單元。除此之外，HTML表格也包括caption、thead、tbody以及tfoot等元素。掌握了這些元素的基本定義，就可以借助Bootstrap高效快速的在網(wǎng)頁(yè)中創(chuàng)建了一個(gè)清晰的表格。Bootstrap表格-網(wǎng)頁(yè)中的表格表格的基本元素表5-1 表格標(biāo)簽標(biāo)簽描述表格的基礎(chǔ)樣式，用于定義一個(gè)表格的開(kāi)始和結(jié)束表格標(biāo)題行的容器元素，用來(lái)標(biāo)識(shí)表格列表格主體中的表格行的容器元素用于定義表格的一行，一組行標(biāo)簽內(nèi)可以建立多組由或標(biāo)簽所定義單元格用于定義表格的表頭，一組標(biāo)簽將建立一個(gè)表頭，特殊的表格單元格，用來(lái)標(biāo)識(shí)列或行，必須在 或標(biāo)

3、簽內(nèi)使用。用于定義表格的最基礎(chǔ)元素-單元格，一組標(biāo)簽將建立一個(gè)單元格，標(biāo)簽必須放在標(biāo)簽內(nèi)關(guān)于表格存儲(chǔ)內(nèi)容的描述或總結(jié) 標(biāo)簽表示HTML表格的頁(yè)腳，該標(biāo)簽用于組合HTML表格中的表注內(nèi)容右側(cè)的表5-1列出了 Bootstrap 支持的表格元素：Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 簡(jiǎn)單的HBootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)使用HBuilder編輯器，在HBuilder中新建一個(gè)Web項(xiàng)目，編寫(xiě)表格代碼如左下。Bootstrap表格-網(wǎng)頁(yè)中的表格創(chuàng)建表格 班級(jí) 姓名 學(xué)號(hào) 310162 宋某某 31016227 預(yù)覽效果如圖5-2所示?？梢钥闯?，這種沒(méi)有邊框等屬性的基礎(chǔ)表格，不易識(shí)別，瀏覽效果差?，F(xiàn)將表

4、格邊框、填充、間距等屬性設(shè)置為1PX，代碼如下：修改后的預(yù)覽效果如圖5-3所示。圖5-2 默認(rèn)的表格效果圖5-3 設(shè)置參數(shù)后的表格效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)使用HBuilder編輯Bootstrap 中表格的簡(jiǎn)介2Bootstrap 中表格的簡(jiǎn)介2Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 在網(wǎng)頁(yè)中建立表格后，可以使用Bootstrap快速地對(duì)表格進(jìn)行優(yōu)化，這這樣的優(yōu)化不僅體現(xiàn)在表格的外觀，更直接反應(yīng)在表格的效果和功能上。 首先是基本型表格，在頁(yè)面關(guān)聯(lián)了Bootstrap的CSS文件后，可以直接在標(biāo)簽中添加類table樣式，即，就會(huì)得到一個(gè)只帶有內(nèi)邊距（padding）和水平分割的基本表。Bo

5、otstrap表格-Bootstrap 中表格的簡(jiǎn)介基本型表格 課程名稱 授課老師 選課人數(shù) 網(wǎng)站設(shè)計(jì)與制作 劉老師 300 Photoshop 章老師 300 C語(yǔ)言程序設(shè)計(jì) 殷老師 300 【實(shí)例5-1】基本型表格，代碼如下運(yùn)行【實(shí)例5-1】代碼，頁(yè)面效果如圖5-4所示圖5-4基本型表格Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 在網(wǎng)頁(yè)中建Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 條紋狀表格，其實(shí)也就是常見(jiàn)的具有類似于斑馬線的隔行換色樣式的表格。這樣的表格樣式不僅會(huì)讓表格會(huì)變得漂亮起來(lái)，而且更會(huì)使表格的結(jié)構(gòu)更加清淅，增強(qiáng)表格的閱讀性。 在頁(yè)面關(guān)聯(lián)了Bootstrap的CSS文件后，除了在標(biāo)簽中添加class

6、 .table之外繼續(xù)添加.table-striped類后，即，就會(huì)得到一個(gè)具有條紋效果的表格。Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介條紋狀表格 課程名稱 授課老師 選課人數(shù) 網(wǎng)站設(shè)計(jì)與制作 劉老師 300 Photoshop 章老師 300 C語(yǔ)言程序設(shè)計(jì) 殷老師 300 【實(shí)例5-2】條紋狀表格，代碼如下運(yùn)行【實(shí)例5-2】代碼，頁(yè)面效果如圖5-5所示圖5-5 條紋狀表格Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 條紋狀表格，其實(shí)也Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 帶有邊框表格，可以從視覺(jué)上讓表格中的不同欄目、不同內(nèi)容的單元格之間顯得更加獨(dú)立，可以給訪問(wèn)者帶來(lái)一種更加規(guī)范與正式的感覺(jué)

7、。帶邊框表格的制作是在基礎(chǔ)型表格的基礎(chǔ)上在標(biāo)簽中再添加class . table-bordered，即，這樣就能夠?yàn)楸砀竦拿總€(gè)單元格增加邊框。Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介帶邊框的表格 課程名稱 授課老師 選課人數(shù) 網(wǎng)站設(shè)計(jì)與制作 劉老師 300 Photoshop 章老師 300 C語(yǔ)言程序設(shè)計(jì) 殷老師 300 【實(shí)例5-3】帶邊框的表格，代碼如下運(yùn)行【實(shí)例5-3】代碼，頁(yè)面效果如圖5-6所示圖5-6 帶邊框的表格Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 帶有邊Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 在網(wǎng)頁(yè)設(shè)計(jì)中，鼠標(biāo)懸停效果常用于文字鏈接、產(chǎn)品圖片、按鈕等地方。同樣，如果在網(wǎng)頁(yè)

8、中插入一個(gè)條目非常繁多的表格，那么鼠標(biāo)懸停效果將能夠清晰地告訴訪問(wèn)者當(dāng)前正在閱讀表格中哪一行的數(shù)據(jù)。 在基礎(chǔ)型表格的基礎(chǔ)上，將標(biāo)簽中再添加class . table-hover，即。這樣表格就具備了鼠標(biāo)懸停效果。Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介鼠標(biāo)懸停表格 課程名稱 授課老師 選課人數(shù) 網(wǎng)站設(shè)計(jì)與制作 劉老師 300 Photoshop 章老師 300 C語(yǔ)言程序設(shè)計(jì) 殷老師 300 【實(shí)例5-4】鼠標(biāo)懸停表格，代碼如下運(yùn)行【實(shí)例5-4】代碼，頁(yè)面效果如圖5-7所示圖5-6 鼠標(biāo)懸停表格Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 在網(wǎng)頁(yè)設(shè)計(jì)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)在網(wǎng)頁(yè)設(shè)

9、計(jì)中，有時(shí)會(huì)因?yàn)榕虐娑坏貌粔嚎s表格的尺寸，而B(niǎo)oostrap中的.table-condensed就可以使表格達(dá)到壓縮的效果?；谠诨A(chǔ)型表格，將.table-condensed添加標(biāo)簽中，即，這樣表中的行內(nèi)邊距（padding）被切為兩半，以便讓表格整體看起來(lái)更緊湊。Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介緊縮型表格 課程名稱 授課老師 選課人數(shù) 網(wǎng)站設(shè)計(jì)與制作 劉老師 300 Photoshop 章老師 300 C語(yǔ)言程序設(shè)計(jì) 殷老師 300 【實(shí)例5-5】緊縮型的表格，代碼如下運(yùn)行【實(shí)例5-5】代碼，頁(yè)面效果如圖5-8所示圖5-8 緊縮型表格Bootstrap響應(yīng)式網(wǎng)站開(kāi)

10、發(fā)在網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)會(huì)因?yàn)锽ootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 狀態(tài)類表格常被用于凸顯表格中某些特定數(shù)據(jù)，簡(jiǎn)單的說(shuō)就是定義表格中的某一行或某一單元格的樣式，以使該單元的數(shù)據(jù)成為頗受訪問(wèn)者關(guān)注的亮點(diǎn)。 不同于以上幾個(gè)類型的表格，狀態(tài)類表格所引用的樣式通常是應(yīng)用到 、 或 中的。狀態(tài)類表格的四種樣式如表5-2所示。Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介狀態(tài)類表格【實(shí)例5-5】緊縮型的表格，代碼如下類名描述對(duì)應(yīng)顏色.active對(duì)某一特定的行或單元格應(yīng)用懸停顏色#f5f5f5.success表示一個(gè)成功的或積極的動(dòng)作#dff0d8.warning表示一個(gè)需要注意的警告#fcf8e3.d

11、anger表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作#f2dede表5-2 狀態(tài)類表格Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 狀態(tài)類表格常Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介狀態(tài)類表格 課程名稱 學(xué)生 期末成績(jī) 網(wǎng)站設(shè)計(jì)與制作 張三 90 網(wǎng)站設(shè)計(jì)與制作 李四 不及格 網(wǎng)站設(shè)計(jì)與制作 王二 58 【實(shí)例5-6】狀態(tài)類表格，代碼如下運(yùn)行【實(shí)例5-6】代碼，頁(yè)面效果如圖5-9所示圖5-9 狀態(tài)類表格Bootstrap為狀態(tài)類表格提供了四種不同的樣式 ，實(shí)例5-6中使用的是樣式.warning，表示一個(gè)需要注意的警告。樣式.success，就表示一個(gè)成功的積極的。樣

12、式.danger，就表示一個(gè)危險(xiǎn)的，已經(jīng)不及格了。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 隨著技術(shù)的快速發(fā)展，以智能手機(jī)為首的移動(dòng)端設(shè)備迅速普及，為了能讓制作的Web頁(yè)面適合各種設(shè)備瀏覽，所以目前響應(yīng)式設(shè)計(jì)的呼聲越來(lái)越高。在Bootstrap中也為表格提供了響應(yīng)式的效果，將其稱為響應(yīng)式表格。 不用于以上幾種表格的設(shè)計(jì)思路，響應(yīng)式表格的設(shè)計(jì)思路是：Bootstrap提供了一個(gè) “.table-responsive” 類的容器，容器具有響應(yīng)式效果，然后將制作的基本類表格置于這個(gè)容器當(dāng)中，那么這個(gè)表格也就同時(shí)具有響應(yīng)式效果。 Bootstrap中響應(yīng)

13、式表格效果表現(xiàn)為：當(dāng)瀏覽器可視區(qū)域小于768px時(shí)，表格底部會(huì)出現(xiàn)水平滾動(dòng)條。當(dāng)瀏覽器可視區(qū)域大于768px時(shí)，表格底部水平滾動(dòng)條就會(huì)消失。Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介響應(yīng)式表格運(yùn)行【實(shí)例5-5】代碼，頁(yè)面效果如圖5-8所示圖5-8 緊縮型表格Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā) 隨著技術(shù)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap 中表格的簡(jiǎn)介響應(yīng)式表格 課程名稱 授課老師 選課人數(shù) 網(wǎng)站設(shè)計(jì)與制作 劉老師 300 Photoshop 章老師 300 C語(yǔ)言程序設(shè)計(jì) 殷老師 300 【實(shí)例5-7】響應(yīng)式表格，代碼如下【實(shí)例5-7】響應(yīng)式表

14、格，只需要table的代碼修改如下即可。圖5-10 不同尺寸下顯示的樣式（a）視口寬度較低的狀態(tài)（b）視口寬度較寬的狀態(tài)Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示3案例：商品列表數(shù)據(jù)展示3Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例展示本例主要展示商品列表的表格數(shù)據(jù)展示，效果如圖5-11所示。圖5-11 商品數(shù)據(jù)列表展示Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例分析根據(jù)如圖5-11所示頁(yè)面效果，完成項(xiàng)目要分為以下三步。第一步：

15、編寫(xiě)商品列表的基本型表格的代碼。第二步：鏈接bootstrap樣式表，為基本型表格調(diào)用條紋狀表格、帶邊框的表格以及鼠標(biāo)懸停表格樣式。第三步：為標(biāo)題行元素調(diào)用狀態(tài)類表格中的success樣式，并將其默認(rèn)的背景顏色修改為#0099FF（藍(lán)色）。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例實(shí)現(xiàn)使用HBuilder編輯器，在HBuilder中新建一個(gè)Web項(xiàng)目，將下載的Bootstrap框架中的bootstrap. css文件復(fù)制到css目錄中。1.為頁(yè)面鏈接bootstrap樣式表接著為頁(yè)面鏈接bootst

16、rap樣式表，在中添加如下代碼。bootstrap表格的運(yùn)用 Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例實(shí)現(xiàn)2.編寫(xiě)商品列表的基本型表格的代碼編寫(xiě)商品列表的基本型表格的代碼，代碼如下 10000 6000 中國(guó) 烤箱 8000 800 中國(guó) 豆?jié){機(jī) 7000 1000 中國(guó) 無(wú)人機(jī) 500 30000 商品產(chǎn)地 商品名稱 當(dāng)月銷售數(shù)量 商品單價(jià) 中國(guó) 吸塵器page1page2Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列

17、表數(shù)據(jù)展示案例實(shí)現(xiàn)3.為基本型表格調(diào)用表格樣式為基本型表格調(diào)用條紋狀表格、帶邊框的表格以及鼠標(biāo)懸停表格樣式，代碼如下。運(yùn)行效果如圖5-12所示。圖5-12 調(diào)用條紋狀表格、帶邊框的表格以及鼠標(biāo)懸停表格樣式Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例實(shí)現(xiàn)4.為標(biāo)題行元素調(diào)用狀態(tài)類表格中的success樣式。為標(biāo)題行添加success類樣式。圖5-13 標(biāo)題行設(shè)置為success樣式 商品產(chǎn)地 商品名稱 當(dāng)月銷售數(shù)量 商品單價(jià) 運(yùn)行代碼，界面如圖5-13所示。Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstr

18、ap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例實(shí)現(xiàn)4.為標(biāo)題行元素調(diào)用狀態(tài)類表格中的success樣式。在自己定義的index.css樣式表中將綠色的success樣式的默認(rèn)背景顏色修改為#0099FF（藍(lán)色），代碼如左下：.table thead tr.success th,.table tbody tr.success th,.table tfoot tr.success th color:#FFF;background:#09F; !important /* 設(shè)置!important，則具有最高優(yōu)先權(quán) */運(yùn)行代碼，最終效果如圖5-11所示。

19、圖5-11 商品數(shù)據(jù)列表展示Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例拓展為整個(gè)案例添加整體的頁(yè)面效果。頁(yè)面中主體區(qū)域的效果如圖5-14所示。圖5-14 整體的商品展示列表頁(yè)效果Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例拓展1.主體區(qū)域的HTML代碼的實(shí)現(xiàn)首 頁(yè)跨境直購(gòu)在線選貨行業(yè)資訊會(huì)員服務(wù) 專業(yè)銷售平臺(tái) 齊全快速便捷 熱門(mén)銷售商品 主體區(qū)域的HTML代碼page1page2Bootstrap響應(yīng)式網(wǎng)站

20、開(kāi)發(fā)Bootstrap表格-Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-案例：商品列表數(shù)據(jù)展示案例拓展2.主體區(qū)域的CSS樣式核心代碼的實(shí)現(xiàn)/* 導(dǎo)航和logo */navmin-height:80px;background:#106fc1; !important.navbar-fixed-topposition:static !important.navmin-height:80px;background:#106fc1; !important.navbarmargin-bottom:0px;!important.logowidth:240px;height:60px;margi

21、n-top:10px;float:left;/* banner區(qū)域 */.bannerwidth:100%;height:260px;background-repeat: no-repeat;background-position-x: 50%; background-position-y: 0px; background-image:url(./images/banner.jpg);padding:30px 0px;box-sizing:border-box主體區(qū)域的CSS樣式核心代碼Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap表格-/* 內(nèi)容和欄目標(biāo)題部分 */.neirongwid

22、th:90%;max-width:1170px;margin:20px auto;min-height:300px;box-sizing:border-box;.lmbgwidth:90%;max-width:1170px;height:50px;margin:30px auto 0px;background:url(./images/lmbg.png).lmbtwidth:40%;max-width:200px;height:50px;margin:0px auto;line-height:50px;font-size:18px;letter-spacing:2px;text-align:c

23、enter;color:#C00;background:#FFF;/* 最小寬度768px情況下導(dǎo)航和banner的樣式 */media (min-width: 768px) .navbar-nav li a padding-top: 10px; padding-bottom: 10px; line-height: 60px;color:#FFF !important; .navbar-nav li a:hover color: #555;background-color: #e7e7e7 !important; .bannerwidth:100%;height:260px;backgroun

24、d-repeat: no-repeat;background-position-x: 50%; background-position-y: 0px; background-image:url(./images/banner.jpg);padding:30px 0px;box-sizing:border-box .banner-midwidth:90%;max-width:1100px;height:200px;margin:0px auto;padding:20px 0px;box-sizing:border-box; .banner-mid .wenziwidth:200px;height

25、:140px;float:left; .banner-mid .wenzi h1width:250px;height:60px;line-height:60px;font-size:40px;font-weight:600;color:#FFF; letter-spacing:1px; text-align:center .banner-mid .wenzi h3width:250px;height:20px;line-height:20px;font-size:18px;font-weight:400;color:#FFF;letter-spacing:2px;text-align:cent

26、er .banner-mid .picfloat:right;margin-top:-25px; 主體區(qū)域的CSS樣式核心代碼/* 內(nèi)容和欄目標(biāo)題部分 */主體區(qū)域的CSS樣式核心代碼/* 最大寬度767px情況下導(dǎo)航和banner的樣式 */media (max-width: 767px) .navbar-nav li a color:#FFF;!important .navbar-nav li a:hover color: #555; background-color: #e7e7e7;!important .navbar-toggle margin-top: 15px;background:rgba(255,255,0,0.9); margin-right: 20px !important; .bannerwidth:100%;height:220px;background-repeat: no-repeat;background-position-x: 50%; background-position-y: 0px; background-image:url(./images/banner.jpg);padd