bootstrap响应式网站开发实例教程课件第5章

bootstrap响应式网站开发第五章Bootstrap表格bootstrap响应式网站开发第五章Bootstrap表1网页中的表格1网页中的表格12《Bootstrap响应式网站开发》

表格是HTML中最常见的元素之一，在使用DIV+CSS进行网页的排版之前，表格布局法一直是网页进行整体结构规划的主要方法。而目前，表格布局法已经逐步被HTML+CSS取代，所以现在网页中的表格就仅以列表的形式出现，如图5-1所示。Bootstrap表格--网页中的表格表格的简介图5-1网页中表格的使用《Bootstrap响应式网站开发》表格是HTM3《Bootstrap响应式网站开发》

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成，其中tr元素定义表格行，th元素定义表头，td元素定义表格单元。除此之外，HTML表格也包括caption、thead、tbody以及tfoot等元素。掌握了这些元素的基本定义，就可以借助Bootstrap高效快速的在网页中创建了一个清晰的表格。Bootstrap表格--网页中的表格表格的基本元素表5-1表格标签标签描述<table>…</table>表格的基础样式，用于定义一个表格的开始和结束<thead>…</thead>表格标题行的容器元素，用来标识表格列<tbody>…</tbody>表格主体中的表格行的容器元素<tr>…</tr>用于定义表格的一行，一组行标签内可以建立多组由<td>或<th>标签所定义单元格<th>…</th>用于定义表格的表头，一组<th>标签将建立一个表头，特殊的表格单元格，用来标识列或行，必须在<thead>或<tr>标签内使用。<td>…</td>用于定义表格的最基础元素--单元格，一组<td>标签将建立一个单元格，<td>标签必须放在<tr>标签内<caption>…</caption>关于表格存储内容的描述或总结<tfoot>…</tfoot><tfoot>标签表示HTML表格的页脚，该标签用于组合HTML表格中的表注内容右侧的表5-1列出了Bootstrap支持的表格元素：《Bootstrap响应式网站开发》简单的H4《Bootstrap响应式网站开发》使用HBuilder编辑器，在HBuilder中新建一个Web项目，编写表格代码如左下。Bootstrap表格--网页中的表格创建表格<tablewidth="300"><tr><td>班级</td><td>姓名</td><td>学号</td></tr><tr><td>310162</td><td>宋某某</td><td>31016227</td></tr></table>预览效果如图5-2所示。可以看出，这种没有边框等属性的基础表格，不易识别，浏览效果差。现将表格边框、填充、间距等属性设置为1PX，代码如下：<tablewidth="300"border="1"cellpadding="1"cellspacing="1">修改后的预览效果如图5-3所示。图5-2默认的表格效果图5-3设置参数后的表格效果《Bootstrap响应式网站开发》使用HBuilder编辑5Bootstrap中表格的简介2Bootstrap中表格的简介26《Bootstrap响应式网站开发》

在网页中建立表格后，可以使用Bootstrap快速地对表格进行优化，这这样的优化不仅体现在表格的外观，更直接反应在表格的效果和功能上。

首先是基本型表格，在页面关联了Bootstrap的CSS文件后，可以直接在<table>标签中添加类table样式，即<tableclass="table">，就会得到一个只带有内边距（padding）和水平分割的基本表。Bootstrap表格--Bootstrap中表格的简介基本型表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="table"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-1】基本型表格，代码如下运行【实例5-1】代码，页面效果如图5-4所示图5-4基本型表格《Bootstrap响应式网站开发》在网页中建7《Bootstrap响应式网站开发》

条纹状表格，其实也就是常见的具有类似于斑马线的隔行换色样式的表格。这样的表格样式不仅会让表格会变得漂亮起来，而且更会使表格的结构更加清淅，增强表格的阅读性。

在页面关联了Bootstrap的CSS文件后，除了在<table>标签中添加class.table之外继续添加.table-striped类后，即<tableclass="tabletable-striped">，就会得到一个具有条纹效果的表格。Bootstrap表格--Bootstrap中表格的简介条纹状表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-striped"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-2】条纹状表格，代码如下运行【实例5-2】代码，页面效果如图5-5所示图5-5条纹状表格<tableclass="tabletable-striped">《Bootstrap响应式网站开发》条纹状表格，其实也8《Bootstrap响应式网站开发》

带有边框表格，可以从视觉上让表格中的不同栏目、不同内容的单元格之间显得更加独立，可以给访问者带来一种更加规范与正式的感觉。带边框表格的制作是在基础型表格的基础上在<table>标签中再添加class.table-bordered，即<tableclass="tabletable-bordered">，这样就能够为表格的每个单元格增加边框。Bootstrap表格--Bootstrap中表格的简介带边框的表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-bordered"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-3】带边框的表格，代码如下运行【实例5-3】代码，页面效果如图5-6所示图5-6带边框的表格<tableclass="tabletable-bordered">《Bootstrap响应式网站开发》带有边9《Bootstrap响应式网站开发》

在网页设计中，鼠标悬停效果常用于文字链接、产品图片、按钮等地方。同样，如果在网页中插入一个条目非常繁多的表格，那么鼠标悬停效果将能够清晰地告诉访问者当前正在阅读表格中哪一行的数据。

在基础型表格的基础上，将<table>标签中再添加class.table-hover，即<tableclass="tabletable-hover">。这样表格就具备了鼠标悬停效果。Bootstrap表格--Bootstrap中表格的简介鼠标悬停表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-hover"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-4】鼠标悬停表格，代码如下运行【实例5-4】代码，页面效果如图5-7所示图5-6鼠标悬停表格<tableclass="tabletable-hover">《Bootstrap响应式网站开发》在网页设计10《Bootstrap响应式网站开发》在网页设计中，有时会因为排版而不得不压缩表格的尺寸，而Boostrap中的.table-condensed就可以使表格达到压缩的效果。基于在基础型表格，将.table-condensed添加<table>标签中，即<tableclass="tabletable-condensed">，这样表中的行内边距（padding）被切为两半，以便让表格整体看起来更紧凑。Bootstrap表格--Bootstrap中表格的简介紧缩型表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-condensed"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-5】紧缩型的表格，代码如下运行【实例5-5】代码，页面效果如图5-8所示图5-8紧缩型表格<tableclass="tabletable-condensed">《Bootstrap响应式网站开发》在网页设计中，有时会因为11《Bootstrap响应式网站开发》

状态类表格常被用于凸显表格中某些特定数据，简单的说就是定义表格中的某一行或某一单元格的样式，以使该单元的数据成为颇受访问者关注的亮点。

不同于以上几个类型的表格，状态类表格所引用的样式通常是应用到<tr>、<td>或<th>中的。状态类表格的四种样式如表5-2所示。Bootstrap表格--Bootstrap中表格的简介状态类表格【实例5-5】紧缩型的表格，代码如下类名描述对应颜色.active对某一特定的行或单元格应用悬停颜色#f5f5f5.success表示一个成功的或积极的动作#dff0d8.warning表示一个需要注意的警告#fcf8e3.danger表示一个危险的或潜在的负面动作#f2dede表5-2状态类表格《Bootstrap响应式网站开发》状态类表格常12《Bootstrap响应式网站开发》Bootstrap表格--Bootstrap中表格的简介状态类表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="table"><thead><tr><th>课程名称</th><th>学生</th><th>期末成绩</th></tr></thead><tbody><trclass="active"><tdclass="success">网站设计与制作</td><td>张三</td><td>90</td></tr><trclass="warning"><td>网站设计与制作</td><td>李四</td><td>不及格</td></tr><tr><td>网站设计与制作</td><td>王二</td><tdclass="danger">58</td></tr></tbody></table> </div></div>【实例5-6】状态类表格，代码如下运行【实例5-6】代码，页面效果如图5-9所示图5-9状态类表格Bootstrap为状态类表格提供了四种不同的样式，实例5-6中使用的是样式.warning，表示一个需要注意的警告。样式.success，就表示一个成功的积极的。样式.danger，就表示一个危险的，已经不及格了。《Bootstrap响应式网站开发》Bootstrap表格-13《Bootstrap响应式网站开发》

随着技术的快速发展，以智能手机为首的移动端设备迅速普及，为了能让制作的Web页面适合各种设备浏览，所以目前响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。

不用于以上几种表格的设计思路，响应式表格的设计思路是：Bootstrap提供了一个“.table-responsive”类的容器，容器具有响应式效果，然后将制作的基本类表格<tableclass="table">置于这个容器当中，那么这个表格也就同时具有响应式效果。Bootstrap中响应式表格效果表现为：当浏览器可视区域小于768px时，表格底部会出现水平滚动条。当浏览器可视区域大于768px时，表格底部水平滚动条就会消失。Bootstrap表格--Bootstrap中表格的简介响应式表格运行【实例5-5】代码，页面效果如图5-8所示图5-8紧缩型表格《Bootstrap响应式网站开发》随着技术14《Bootstrap响应式网站开发》Bootstrap表格--Bootstrap中表格的简介响应式表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="

table-responsive"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-7】响应式表格，代码如下<tableclass="table-responsive">【实例5-7】响应式表格，只需要table的代码修改如下即可。<divclass="table-responsive">图5-10不同尺寸下显示的样式（a）视口宽度较低的状态（b）视口宽度较宽的状态《Bootstrap响应式网站开发》Bootstrap表格-15案例：商品列表数据展示3案例：商品列表数据展示316《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例展示本例主要展示商品列表的表格数据展示，效果如图5-11所示。图5-11商品数据列表展示《Bootstrap响应式网站开发》Bootstrap表格-17《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例分析根据如图5-11所示页面效果，完成项目要分为以下三步。第一步：编写商品列表的基本型表格的代码。第二步：链接bootstrap样式表，为基本型表格调用条纹状表格、带边框的表格以及鼠标悬停表格样式。第三步：为标题行元素调用状态类表格中的success样式，并将其默认的背景颜色修改为#0099FF（蓝色）。《Bootstrap响应式网站开发》Bootstrap表格-18《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例实现使用HBuilder编辑器，在HBuilder中新建一个Web项目，将下载的Bootstrap框架中的bootstrap.css文件复制到css目录中。1.为页面链接bootstrap样式表接着为页面链接bootstrap样式表，在<head>中添加如下代码。<metacharset="utf-8"><title>bootstrap表格的运用</title><linkhref="css/bootstrap.css"rel="stylesheet"><!—链接bootstrap.css样式表--><linkhref="css/index.css"rel="stylesheet"><!—链接index.css样式表-->《Bootstrap响应式网站开发》Bootstrap表格-19《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例实现2.编写商品列表的基本型表格的代码编写商品列表的基本型表格的代码，代码如下<td>10000</td><td>6000</td></tr><tr><td>中国</td><td>烤箱</td><td>8000</td><td>800</td></tr><tr><td>中国</td><td>豆浆机</td><td>7000</td><td>1000</td></tr>……<tr><td>中国</td><td>无人机</td><td>500</td><td>30000</td></tr></tbody></table></div></div><divclass="container"><divclass="rowtable-responsive"><tableclass="table"><thead><tr><th>商品产地</th><th>商品名称</th><th>当月销售数量</th><th>商品单价</th></tr></thead><tbody><tr><td>中国</td><td>吸尘器</td>page1page2《Bootstrap响应式网站开发》Bootstrap表格-20《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例实现3.为基本型表格调用表格样式为基本型表格调用条纹状表格、带边框的表格以及鼠标悬停表格样式，代码如下。<tableclass="tabletable-stripedtable-borderedtable-hover">运行效果如图5-12所示。图5-12调用条纹状表格、带边框的表格以及鼠标悬停表格样式《Bootstrap响应式网站开发》Bootstrap表格-21《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例实现4.为标题行元素调用状态类表格中的success样式。为标题行添加success类样式。图5-13标题行设置为success样式<thead><trclass="success"><!—将标题行元素设置为success样式--><th>商品产地</th><th>商品名称</th><th>当月销售数量</th><th>商品单价</th></tr></thead>运行代码，界面如图5-13所示。《Bootstrap响应式网站开发》Bootstrap表格-22《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所示。图5-11商品数据列表展示《Bootstrap响应式网站开发》Bootstrap表格-23《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例拓展为整个案例添加整体的页面效果。页面中主体区域的效果如图5-14所示。图5-14整体的商品展示列表页效果《Bootstrap响应式网站开发》Bootstrap表格-24《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例拓展1.主体区域的HTML代码的实现<li><ahref="#">首页</a></li><li><ahref="#">跨境直购</a></li><li><ahref="#">在线选货</a></li><li><ahref="#">行业资讯</a></li><li><ahref="#">会员服务</a></li></ul></div></div></nav><divclass="banner"><divclass="banner-mid"><divclass="wenzi"><h1>专业销售平台</h1><h3>齐全·快速·便捷</h3></div><imgsrc="images/computer.png"class="img-responsivepic"alt="CinqueTerre"></div></div><divclass="containerlmbg"><divclass="lmbt">热门销售商品</div></div><navclass="navbarnavbar-fixed-top"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-main-collapse"><iclass="fafa-bars"></i></button><imgsrc="images/logo.png"alt=""class="img-responsivelogo"></div><divclass="collapsenavbar-collapsenavbar-rightnavbar-main-collapse"><ulclass="navnavbar-nav">主体区域的HTML代码page1page2《Bootstrap响应式网站开发》Bootstrap表格-25《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例拓展2.主体区域的CSS样式核心代码的实现/*导航和logo*/nav{min-height:80px;background:#106fc1;!important}.navbar-fixed-top{position:static!important}.nav{min-height:80px;background:#106fc1;!important}.navbar{margin-bottom:0px;!important}.logo{width:240px;height:60px;margin-top:10px;float:left;}

/*banner区域*/.banner{width:100%;height:260px;background-repeat:no-repeat;background-position-x:50%;background-position-y:0px;background-image:url(../images/banner.jpg);padding:30px0px;box-sizing:border-box}主体区域的CSS样式核心代码《Bootstrap响应式网站开发》Bootstrap表格-26/*内容和栏目标题部分*/.neirong{width:90%;max-width:1170px;margin:20pxauto;min-height:300px;box-sizing:border-box;}.lmbg{width:90%;max-width:1170px;height:50px;margin:30pxauto0px;background:url(../images/lmbg.png)}.lmbt{width:40%;max-width:200px;height:50px;margin:0pxauto;line-height:50px;font-size:18px;letter-spacing:2px;text-align:center;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;}.banner{width:100%;height:260px;background-repeat:no-repeat;background-position-x:50%;background-position-y:0px;background-image:url(../images/banner.jpg);padding:30px0px;box-sizing:border-box}.banner-mid{width:90%;max-width:1100px;height:200px;margin:0pxauto;padding:20px0px;box-sizing:border-box;}.banner-mid.wenzi{width:200px;height:140px;float:left;}.banner-mid.wenzih1{width:250px;height:60px;line-height:60px;font-size:40px;font-weight:600;color:#FFF;letter-spacing:1px;text-align:center}.banner-mid.wenzih3{width:250px;height:20px;line-height:20px;font-size:18px;font-weight:400;color:#FFF;letter-spacing:2px;text-align:center}.banner-mid.pic{float:right;margin-top:-25px;}}主体区域的CSS样式核心代码/*内容和栏目标题部分*/主体区域的CSS样式核心代码27/*最大宽度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;}.banner{width:100%;height:220px;background-repeat:no-repeat;background-position-x:50%;background-position-y:0px;background-image:url(../images/banner.jpg);padding:30px0px;box-sizing:border-box}.banner-mid{width:96%;height:200px;margin:0pxauto;padding:20px0px;box-sizing:border-box;}.banner-mid.wenzi{width:200px;height:140px;float:left;}.banner-mid.wenzih1{width:230px;height:50px;line-height:50px;font-size:36px;font-weight:600;color:#FFF;letter-spacing:1px;text-align:center}.banner-mid.wenzih3{width:230px;height:20px;line-height:20px;font-size:16px;font-weight:400;color:#FFF;letter-spacing:2px;text-align:center}.banner-mid.pic{float:right;width:210px;height:auto;}}主体区域的CSS样式核心代码/*最大宽度767px情况下导航和banner的样式*28《Bootstrap响应式网站开发》Bootstrap表格--案例：商品列表数据展示案例拓展3.页脚区域的实现页脚区域html代码实现：<footer>版权所有：XXX有限公司

联系方式：12388888888</footer>页脚区域的CSS样式表核心代码如下：footer{width:100%;height:60px;margin:0px;background:#106fc1;line-height:60px;color:#FFF;text-align:center;margin-top:30px;}《Bootstrap响应式网站开发》Bootstrap表格-29bootstrap响应式网站开发第五章Bootstrap表格bootstrap响应式网站开发第五章Bootstrap表30bootstrap响应式网站开发第五章Bootstrap表格bootstrap响应式网站开发第五章Bootstrap表31网页中的表格1网页中的表格132《Bootstrap响应式网站开发》

表格是HTML中最常见的元素之一，在使用DIV+CSS进行网页的排版之前，表格布局法一直是网页进行整体结构规划的主要方法。而目前，表格布局法已经逐步被HTML+CSS取代，所以现在网页中的表格就仅以列表的形式出现，如图5-1所示。Bootstrap表格--网页中的表格表格的简介图5-1网页中表格的使用《Bootstrap响应式网站开发》表格是HTM33《Bootstrap响应式网站开发》

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成，其中tr元素定义表格行，th元素定义表头，td元素定义表格单元。除此之外，HTML表格也包括caption、thead、tbody以及tfoot等元素。掌握了这些元素的基本定义，就可以借助Bootstrap高效快速的在网页中创建了一个清晰的表格。Bootstrap表格--网页中的表格表格的基本元素表5-1表格标签标签描述<table>…</table>表格的基础样式，用于定义一个表格的开始和结束<thead>…</thead>表格标题行的容器元素，用来标识表格列<tbody>…</tbody>表格主体中的表格行的容器元素<tr>…</tr>用于定义表格的一行，一组行标签内可以建立多组由<td>或<th>标签所定义单元格<th>…</th>用于定义表格的表头，一组<th>标签将建立一个表头，特殊的表格单元格，用来标识列或行，必须在<thead>或<tr>标签内使用。<td>…</td>用于定义表格的最基础元素--单元格，一组<td>标签将建立一个单元格，<td>标签必须放在<tr>标签内<caption>…</caption>关于表格存储内容的描述或总结<tfoot>…</tfoot><tfoot>标签表示HTML表格的页脚，该标签用于组合HTML表格中的表注内容右侧的表5-1列出了Bootstrap支持的表格元素：《Bootstrap响应式网站开发》简单的H34《Bootstrap响应式网站开发》使用HBuilder编辑器，在HBuilder中新建一个Web项目，编写表格代码如左下。Bootstrap表格--网页中的表格创建表格<tablewidth="300"><tr><td>班级</td><td>姓名</td><td>学号</td></tr><tr><td>310162</td><td>宋某某</td><td>31016227</td></tr></table>预览效果如图5-2所示。可以看出，这种没有边框等属性的基础表格，不易识别，浏览效果差。现将表格边框、填充、间距等属性设置为1PX，代码如下：<tablewidth="300"border="1"cellpadding="1"cellspacing="1">修改后的预览效果如图5-3所示。图5-2默认的表格效果图5-3设置参数后的表格效果《Bootstrap响应式网站开发》使用HBuilder编辑35Bootstrap中表格的简介2Bootstrap中表格的简介236《Bootstrap响应式网站开发》

在网页中建立表格后，可以使用Bootstrap快速地对表格进行优化，这这样的优化不仅体现在表格的外观，更直接反应在表格的效果和功能上。

首先是基本型表格，在页面关联了Bootstrap的CSS文件后，可以直接在<table>标签中添加类table样式，即<tableclass="table">，就会得到一个只带有内边距（padding）和水平分割的基本表。Bootstrap表格--Bootstrap中表格的简介基本型表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="table"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-1】基本型表格，代码如下运行【实例5-1】代码，页面效果如图5-4所示图5-4基本型表格《Bootstrap响应式网站开发》在网页中建37《Bootstrap响应式网站开发》

条纹状表格，其实也就是常见的具有类似于斑马线的隔行换色样式的表格。这样的表格样式不仅会让表格会变得漂亮起来，而且更会使表格的结构更加清淅，增强表格的阅读性。

在页面关联了Bootstrap的CSS文件后，除了在<table>标签中添加class.table之外继续添加.table-striped类后，即<tableclass="tabletable-striped">，就会得到一个具有条纹效果的表格。Bootstrap表格--Bootstrap中表格的简介条纹状表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-striped"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-2】条纹状表格，代码如下运行【实例5-2】代码，页面效果如图5-5所示图5-5条纹状表格<tableclass="tabletable-striped">《Bootstrap响应式网站开发》条纹状表格，其实也38《Bootstrap响应式网站开发》

带有边框表格，可以从视觉上让表格中的不同栏目、不同内容的单元格之间显得更加独立，可以给访问者带来一种更加规范与正式的感觉。带边框表格的制作是在基础型表格的基础上在<table>标签中再添加class.table-bordered，即<tableclass="tabletable-bordered">，这样就能够为表格的每个单元格增加边框。Bootstrap表格--Bootstrap中表格的简介带边框的表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-bordered"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-3】带边框的表格，代码如下运行【实例5-3】代码，页面效果如图5-6所示图5-6带边框的表格<tableclass="tabletable-bordered">《Bootstrap响应式网站开发》带有边39《Bootstrap响应式网站开发》

在网页设计中，鼠标悬停效果常用于文字链接、产品图片、按钮等地方。同样，如果在网页中插入一个条目非常繁多的表格，那么鼠标悬停效果将能够清晰地告诉访问者当前正在阅读表格中哪一行的数据。

在基础型表格的基础上，将<table>标签中再添加class.table-hover，即<tableclass="tabletable-hover">。这样表格就具备了鼠标悬停效果。Bootstrap表格--Bootstrap中表格的简介鼠标悬停表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-hover"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-4】鼠标悬停表格，代码如下运行【实例5-4】代码，页面效果如图5-7所示图5-6鼠标悬停表格<tableclass="tabletable-hover">《Bootstrap响应式网站开发》在网页设计40《Bootstrap响应式网站开发》在网页设计中，有时会因为排版而不得不压缩表格的尺寸，而Boostrap中的.table-condensed就可以使表格达到压缩的效果。基于在基础型表格，将.table-condensed添加<table>标签中，即<tableclass="tabletable-condensed">，这样表中的行内边距（padding）被切为两半，以便让表格整体看起来更紧凑。Bootstrap表格--Bootstrap中表格的简介紧缩型表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="tabletable-condensed"><thead><tr><th>课程名称</th><th>授课老师</th><th>选课人数</th></tr></thead><tbody><tr><td>网站设计与制作</td><td>刘老师</td><td>300</td></tr><tr><td>Photoshop</td><td>章老师</td><td>300</td></tr><tr><td>C语言程序设计</td><td>殷老师</td><td>300</td></tr></tbody></table> </div></div>【实例5-5】紧缩型的表格，代码如下运行【实例5-5】代码，页面效果如图5-8所示图5-8紧缩型表格<tableclass="tabletable-condensed">《Bootstrap响应式网站开发》在网页设计中，有时会因为41《Bootstrap响应式网站开发》

状态类表格常被用于凸显表格中某些特定数据，简单的说就是定义表格中的某一行或某一单元格的样式，以使该单元的数据成为颇受访问者关注的亮点。

不同于以上几个类型的表格，状态类表格所引用的样式通常是应用到<tr>、<td>或<th>中的。状态类表格的四种样式如表5-2所示。Bootstrap表格--Bootstrap中表格的简介状态类表格【实例5-5】紧缩型的表格，代码如下类名描述对应颜色.active对某一特定的行或单元格应用悬停颜色#f5f5f5.success表示一个成功的或积极的动作#dff0d8.warning表示一个需要注意的警告#fcf8e3.danger表示一个危险的或潜在的负面动作#f2dede表5-2状态类表格《Bootstrap响应式网站开发》状态类表格常42《Bootstrap响应式网站开发》Bootstrap表格--Bootstrap中表格的简介状态类表格<divclass="container"><divclass="row"style="width:80%;margin:5pxauto;"><tableclass="table"><thead><tr><th>课程名称</th><th>学生</th><th>期末成绩</th></tr></thead><tbody><trclass="active"><tdclass="success">网站设计与制作</td><td>张三</td><td>90</td></tr><trclass="warning"><td>网站设计与制作</td><td>李四</td><td>不及格</td></tr><tr><td>网站设计与制作</td><td>王二</td><tdclass="danger">58</td></tr></tbody></table> </div></div>【实例5-6】状态类表格，代码如下运行【实例5-6】代码，页面效果如图5-9所示图5-9状态类表格Bootstrap为状态类表格提供了四种不同的样式，实例5-6中使用的是样式.warning，表示一个需要注意的警告。样式.success