1、bootstrap響應式網站開發實例教程課件第5章bootstrap響應式網站開發實例教程課件第5章網頁中的表格1網頁中的表格1Bootstrap響應式網站開發 表格是HTML中最常見的元素之一，在使用DIV+CSS進行網頁的排版之前，表格布局法一直是網頁進行整體結構規劃的主要方法。而目前，表格布局法已經逐步被HTML+CSS取代，所以現在網頁中的表格就僅以列表的形式出現，如圖5-1所示。Bootstrap表格-網頁中的表格表格的簡介圖5-1網頁中表格的使用Bootstrap響應式網站開發 表格是HTMBootstrap響應式網站開發 簡單的HTML表格由table元素以及一個或多個tr、th

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

3、簽內使用。用于定義表格的最基礎元素-單元格，一組標簽將建立一個單元格，標簽必須放在標簽內關于表格存儲內容的描述或總結 標簽表示HTML表格的頁腳，該標簽用于組合HTML表格中的表注內容右側的表5-1列出了 Bootstrap 支持的表格元素：Bootstrap響應式網站開發 簡單的HBootstrap響應式網站開發使用HBuilder編輯器，在HBuilder中新建一個Web項目，編寫表格代碼如左下。Bootstrap表格-網頁中的表格創建表格 班級 姓名 學號 310162 宋某某 31016227 預覽效果如圖5-2所示。可以看出，這種沒有邊框等屬性的基礎表格，不易識別，瀏覽效果差。現將表

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

5、otstrap表格-Bootstrap 中表格的簡介基本型表格 課程名稱 授課老師 選課人數 網站設計與制作 劉老師 300 Photoshop 章老師 300 C語言程序設計 殷老師 300 【實例5-1】基本型表格，代碼如下運行【實例5-1】代碼，頁面效果如圖5-4所示圖5-4基本型表格Bootstrap響應式網站開發 在網頁中建Bootstrap響應式網站開發 條紋狀表格，其實也就是常見的具有類似于斑馬線的隔行換色樣式的表格。這樣的表格樣式不僅會讓表格會變得漂亮起來，而且更會使表格的結構更加清淅，增強表格的閱讀性。 在頁面關聯了Bootstrap的CSS文件后，除了在標簽中添加class

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

7、。帶邊框表格的制作是在基礎型表格的基礎上在標簽中再添加class . table-bordered，即，這樣就能夠為表格的每個單元格增加邊框。Bootstrap表格-Bootstrap 中表格的簡介帶邊框的表格 課程名稱 授課老師 選課人數 網站設計與制作 劉老師 300 Photoshop 章老師 300 C語言程序設計 殷老師 300 【實例5-3】帶邊框的表格，代碼如下運行【實例5-3】代碼，頁面效果如圖5-6所示圖5-6 帶邊框的表格Bootstrap響應式網站開發 帶有邊Bootstrap響應式網站開發 在網頁設計中，鼠標懸停效果常用于文字鏈接、產品圖片、按鈕等地方。同樣，如果在網頁

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

9、計中，有時會因為排版而不得不壓縮表格的尺寸，而Boostrap中的.table-condensed就可以使表格達到壓縮的效果。基于在基礎型表格，將.table-condensed添加標簽中，即，這樣表中的行內邊距（padding）被切為兩半，以便讓表格整體看起來更緊湊。Bootstrap表格-Bootstrap 中表格的簡介緊縮型表格 課程名稱 授課老師 選課人數 網站設計與制作 劉老師 300 Photoshop 章老師 300 C語言程序設計 殷老師 300 【實例5-5】緊縮型的表格，代碼如下運行【實例5-5】代碼，頁面效果如圖5-8所示圖5-8 緊縮型表格Bootstrap響應式網站開

10、發在網頁設計中，有時會因為Bootstrap響應式網站開發 狀態類表格常被用于凸顯表格中某些特定數據，簡單的說就是定義表格中的某一行或某一單元格的樣式，以使該單元的數據成為頗受訪問者關注的亮點。 不同于以上幾個類型的表格，狀態類表格所引用的樣式通常是應用到 、 或 中的。狀態類表格的四種樣式如表5-2所示。Bootstrap表格-Bootstrap 中表格的簡介狀態類表格【實例5-5】緊縮型的表格，代碼如下類名描述對應顏色.active對某一特定的行或單元格應用懸停顏色#f5f5f5.success表示一個成功的或積極的動作#dff0d8.warning表示一個需要注意的警告#fcf8e3.d

11、anger表示一個危險的或潛在的負面動作#f2dede表5-2 狀態類表格Bootstrap響應式網站開發 狀態類表格常Bootstrap響應式網站開發Bootstrap表格-Bootstrap 中表格的簡介狀態類表格 課程名稱 學生 期末成績 網站設計與制作 張三 90 網站設計與制作 李四 不及格 網站設計與制作 王二 58 【實例5-6】狀態類表格，代碼如下運行【實例5-6】代碼，頁面效果如圖5-9所示圖5-9 狀態類表格Bootstrap為狀態類表格提供了四種不同的樣式 ，實例5-6中使用的是樣式.warning，表示一個需要注意的警告。樣式.success，就表示一個成功的積極的。樣

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

13、式表格效果表現為：當瀏覽器可視區域小于768px時，表格底部會出現水平滾動條。當瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失。Bootstrap表格-Bootstrap 中表格的簡介響應式表格運行【實例5-5】代碼，頁面效果如圖5-8所示圖5-8 緊縮型表格Bootstrap響應式網站開發 隨著技術Bootstrap響應式網站開發Bootstrap表格-Bootstrap 中表格的簡介響應式表格 課程名稱 授課老師 選課人數 網站設計與制作 劉老師 300 Photoshop 章老師 300 C語言程序設計 殷老師 300 【實例5-7】響應式表格，代碼如下【實例5-7】響應式表

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

15、編寫商品列表的基本型表格的代碼。第二步：鏈接bootstrap樣式表，為基本型表格調用條紋狀表格、帶邊框的表格以及鼠標懸停表格樣式。第三步：為標題行元素調用狀態類表格中的success樣式，并將其默認的背景顏色修改為#0099FF（藍色）。Bootstrap響應式網站開發Bootstrap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列表數據展示案例實現使用HBuilder編輯器，在HBuilder中新建一個Web項目，將下載的Bootstrap框架中的bootstrap. css文件復制到css目錄中。1.為頁面鏈接bootstrap樣式表接著為頁面鏈接bootst

16、rap樣式表，在中添加如下代碼。bootstrap表格的運用 Bootstrap響應式網站開發Bootstrap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列表數據展示案例實現2.編寫商品列表的基本型表格的代碼編寫商品列表的基本型表格的代碼，代碼如下 10000 6000 中國 烤箱 8000 800 中國 豆漿機 7000 1000 中國 無人機 500 30000 商品產地 商品名稱 當月銷售數量 商品單價 中國 吸塵器page1page2Bootstrap響應式網站開發Bootstrap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列

17、表數據展示案例實現3.為基本型表格調用表格樣式為基本型表格調用條紋狀表格、帶邊框的表格以及鼠標懸停表格樣式，代碼如下。運行效果如圖5-12所示。圖5-12 調用條紋狀表格、帶邊框的表格以及鼠標懸停表格樣式Bootstrap響應式網站開發Bootstrap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列表數據展示案例實現4.為標題行元素調用狀態類表格中的success樣式。為標題行添加success類樣式。圖5-13 標題行設置為success樣式 商品產地 商品名稱 當月銷售數量 商品單價 運行代碼，界面如圖5-13所示。Bootstrap響應式網站開發Bootstr

18、ap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列表數據展示案例實現4.為標題行元素調用狀態類表格中的success樣式。在自己定義的index.css樣式表中將綠色的success樣式的默認背景顏色修改為#0099FF（藍色），代碼如左下：.table thead tr.success th,.table tbody tr.success th,.table tfoot tr.success th color:#FFF;background:#09F; !important /* 設置!important，則具有最高優先權 */運行代碼，最終效果如圖5-11所示。

19、圖5-11 商品數據列表展示Bootstrap響應式網站開發Bootstrap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列表數據展示案例拓展為整個案例添加整體的頁面效果。頁面中主體區域的效果如圖5-14所示。圖5-14 整體的商品展示列表頁效果Bootstrap響應式網站開發Bootstrap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列表數據展示案例拓展1.主體區域的HTML代碼的實現首 頁跨境直購在線選貨行業資訊會員服務 專業銷售平臺 齊全快速便捷 熱門銷售商品 主體區域的HTML代碼page1page2Bootstrap響應式網站

20、開發Bootstrap表格-Bootstrap響應式網站開發Bootstrap表格-案例：商品列表數據展示案例拓展2.主體區域的CSS樣式核心代碼的實現/* 導航和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區域 */.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主體區域的CSS樣式核心代碼Bootstrap響應式網站開發Bootstrap表格-/* 內容和欄目標題部分 */.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情況下導航和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; 主體區域的CSS樣式核心代碼/* 內容和欄目標題部分 */主體區域的CSS樣式核心代碼/* 最大寬度767px情況下導航和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