1、bootstrap响应式网站开发实例教程课件第5章Bootstrap响应式网站开发 表格是HTML中最常见的元素之一，在使用DIV+CSS进行网页的排版之前，表格布局法一直是网页进行整体结构规划的主要方法。而目前，表格布局法已经逐步被HTML+CSS取代，所以现在网页中的表格就仅以列表的形式出现，如图5-1所示。Bootstrap表格-网页中的表格表格的简介图5-1网页中表格的使用Bootstrap响应式网站开发 简单的HTML表格由table元素以及一个或多个tr、th或td元素组成，其中tr元素定义表格行，th元素定义表头，td元素定义表格单元。除此之外，HTML表格也包括caption、
2、thead、tbody以及tfoot等元素。掌握了这些元素的基本定义，就可以借助Bootstrap高效快速的在网页中创建了一个清晰的表格。Bootstrap表格-网页中的表格表格的基本元素表5-1 表格标签标签描述表格的基础样式，用于定义一个表格的开始和结束表格标题行的容器元素，用来标识表格列表格主体中的表格行的容器元素用于定义表格的一行，一组行标签内可以建立多组由或标签所定义单元格用于定义表格的表头，一组标签将建立一个表头，特殊的表格单元格，用来标识列或行，必须在 或标签内使用。用于定义表格的最基础元素-单元格，一组标签将建立一个单元格，标签必须放在标签内关于表格存储内容的描述或总结 标签表
3、示HTML表格的页脚，该标签用于组合HTML表格中的表注内容右侧的表5-1列出了 Bootstrap 支持的表格元素：Bootstrap响应式网站开发使用HBuilder编辑器，在HBuilder中新建一个Web项目，编写表格代码如左下。Bootstrap表格-网页中的表格创建表格 班级 姓名 学号 310162 宋某某 31016227 预览效果如图5-2所示。可以看出，这种没有边框等属性的基础表格，不易识别，浏览效果差。现将表格边框、填充、间距等属性设置为1PX，代码如下：修改后的预览效果如图5-3所示。图5-2 默认的表格效果图5-3 设置参数后的表格效果Bootstrap响应式网站开发
4、 在网页中建立表格后，可以使用Bootstrap快速地对表格进行优化，这这样的优化不仅体现在表格的外观，更直接反应在表格的效果和功能上。首先是基本型表格，在页面关联了Bootstrap的CSS文件后，可以直接在标签中添加类table样式，即，就会得到一个只带有内边距（padding）和水平分割的基本表。Bootstrap表格-Bootstrap 中表格的简介基本型表格 课程名称 授课老师 选课人数 网站设计与制作 刘老师 300 Photoshop 章老师 300 C语言程序设计 殷老师 300 【实例5-1】基本型表格，代码如下运行【实例5-1】代码，页面效果如图5-4所示图5-4基本型表格
5、Bootstrap响应式网站开发 条纹状表格，其实也就是常见的具有类似于斑马线的隔行换色样式的表格。这样的表格样式不仅会让表格会变得漂亮起来，而且更会使表格的结构更加清淅，增强表格的阅读性。在页面关联了Bootstrap的CSS文件后，除了在标签中添加class.table之外继续添加.table-striped类后，即，就会得到一个具有条纹效果的表格。Bootstrap表格-Bootstrap 中表格的简介条纹状表格 课程名称 授课老师 选课人数 网站设计与制作 刘老师 300 Photoshop 章老师 300 C语言程序设计 殷老师 300 【实例5-2】条纹状表格，代码如下运行【实例5
6、-2】代码，页面效果如图5-5所示图5-5 条纹状表格Bootstrap响应式网站开发 带有边框表格，可以从视觉上让表格中的不同栏目、不同内容的单元格之间显得更加独立，可以给访问者带来一种更加规范与正式的感觉。带边框表格的制作是在基础型表格的基础上在标签中再添加class.table-bordered，即，这样就能够为表格的每个单元格增加边框。Bootstrap表格-Bootstrap 中表格的简介带边框的表格 课程名称 授课老师 选课人数 网站设计与制作 刘老师 300 Photoshop 章老师 300 C语言程序设计 殷老师 300 【实例5-3】带边框的表格，代码如下运行【实例5-3】
7、代码，页面效果如图5-6所示图5-6 带边框的表格Bootstrap响应式网站开发 在网页设计中，鼠标悬停效果常用于文字链接、产品图片、按钮等地方。同样，如果在网页中插入一个条目非常繁多的表格，那么鼠标悬停效果将能够清晰地告诉访问者当前正在阅读表格中哪一行的数据。在基础型表格的基础上，将标签中再添加class.table-hover，即。这样表格就具备了鼠标悬停效果。Bootstrap表格-Bootstrap 中表格的简介鼠标悬停表格 课程名称 授课老师 选课人数 网站设计与制作 刘老师 300 Photoshop 章老师 300 C语言程序设计 殷老师 300 【实例5-4】鼠标悬停表格，代
8、码如下运行【实例5-4】代码，页面效果如图5-7所示图5-6 鼠标悬停表格Bootstrap响应式网站开发在网页设计中，有时会因为排版而不得不压缩表格的尺寸，而Boostrap中的.table-condensed就可以使表格达到压缩的效果。基于在基础型表格，将.table-condensed添加标签中，即，这样表中的行内边距（padding）被切为两半，以便让表格整体看起来更紧凑。Bootstrap表格-Bootstrap 中表格的简介紧缩型表格 课程名称 授课老师 选课人数 网站设计与制作 刘老师 300 Photoshop 章老师 300 C语言程序设计 殷老师 300 【实例5-5】紧缩
9、型的表格，代码如下运行【实例5-5】代码，页面效果如图5-8所示图5-8 紧缩型表格Bootstrap响应式网站开发 状态类表格常被用于凸显表格中某些特定数据，简单的说就是定义表格中的某一行或某一单元格的样式，以使该单元的数据成为颇受访问者关注的亮点。不同于以上几个类型的表格，状态类表格所引用的样式通常是应用到、或 中的。状态类表格的四种样式如表5-2所示。Bootstrap表格-Bootstrap 中表格的简介状态类表格【实例5-5】紧缩型的表格，代码如下类名描述对应颜色.active对某一特定的行或单元格应用悬停颜色#f5f5f5.success表示一个成功的或积极的动作#dff0d8.w
10、arning表示一个需要注意的警告#fcf8e3.danger表示一个危险的或潜在的负面动作#f2dede表5-2 状态类表格Bootstrap响应式网站开发Bootstrap表格-Bootstrap 中表格的简介状态类表格 课程名称 学生 期末成绩 网站设计与制作 张三 90 网站设计与制作 李四 不及格 网站设计与制作 王二 58 【实例5-6】状态类表格，代码如下运行【实例5-6】代码，页面效果如图5-9所示图5-9 状态类表格Bootstrap为状态类表格提供了四种不同的样式，实例5-6中使用的是样式.warning，表示一个需要注意的警告。样式.success，就表示一个成功的积极的
11、。样式.danger，就表示一个危险的，已经不及格了。Bootstrap响应式网站开发 随着技术的快速发展，以智能手机为首的移动端设备迅速普及，为了能让制作的Web页面适合各种设备浏览，所以目前响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。不用于以上几种表格的设计思路，响应式表格的设计思路是：Bootstrap提供了一个“.table-responsive”类的容器，容器具有响应式效果，然后将制作的基本类表格置于这个容器当中，那么这个表格也就同时具有响应式效果。Bootstrap中响应式表格效果表现为：当浏览器可视区域小于768px时，表格底部
12、会出现水平滚动条。当浏览器可视区域大于768px时，表格底部水平滚动条就会消失。Bootstrap表格-Bootstrap 中表格的简介响应式表格Bootstrap响应式网站开发Bootstrap表格-Bootstrap 中表格的简介响应式表格 课程名称 授课老师 选课人数 网站设计与制作 刘老师 300 Photoshop 章老师 300 C语言程序设计 殷老师 300 【实例5-7】响应式表格，代码如下【实例5-7】响应式表格，只需要table的代码修改如下即可。图5-10 不同尺寸下显示的样式（a）视口宽度较低的状态（b）视口宽度较宽的状态Bootstrap响应式网站开发Bootstra
13、p表格-案例：商品列表数据展示案例展示本例主要展示商品列表的表格数据展示，效果如图5-11所示。图5-11 商品数据列表展示Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例分析根据如图5-11所示页面效果，完成项目要分为以下三步。第一步：编写商品列表的基本型表格的代码。第二步：链接bootstrap样式表，为基本型表格调用条纹状表格、带边框的表格以及鼠标悬停表格样式。第三步：为标题行元素调用状态类表格中的success样式，并将其默认的背景颜色修改为#0099FF（蓝色）。Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例实现使
14、用HBuilder编辑器，在HBuilder中新建一个Web项目，将下载的Bootstrap框架中的bootstrap.css文件复制到css目录中。1.为页面链接bootstrap样式表接着为页面链接bootstrap样式表，在中添加如下代码。bootstrap表格的运用 Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例实现2.编写商品列表的基本型表格的代码编写商品列表的基本型表格的代码，代码如下 10000 6000 中国 烤箱 8000 800 中国 豆浆机 7000 1000 中国 无人机 500 30000 商品产地 商品名称 当月销售数量 商品单价
15、 中国 吸尘器page1Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例实现3.为基本型表格调用表格样式为基本型表格调用条纹状表格、带边框的表格以及鼠标悬停表格样式，代码如下。运行效果如图5-12所示。图5-12 调用条纹状表格、带边框的表格以及鼠标悬停表格样式Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例实现4.为标题行元素调用状态类表格中的success样式。为标题行添加success类样式。图5-13 标题行设置为success样式 商品产地 商品名称 当月销售数量 商品单价 运行代码，界面如图5-13所示。Boots
16、trap响应式网站开发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 商品数据列表展
17、示Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例拓展为整个案例添加整体的页面效果。页面中主体区域的效果如图5-14所示。图5-14 整体的商品展示列表页效果Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例拓展1.主体区域的HTML代码的实现首 页跨境直购在线选货行业资讯会员服务 专业销售平台 齐全快速便捷 热门销售商品 主体区域的HTML代码page1Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例拓展2.主体区域的CSS样式核心代码的实现/*导航和logo*/navmin-height:8
18、0px;background:#106fc1;!important.navbar-fixed-topposition:static!important.navmin-height:80px;background:#106fc1;!important.navbarmargin-bottom:0px;!important.logowidth:240px;height:60px;margin-top:10px;float:left;/*banner区域*/.bannerwidth:100%;height:260px;background-repeat:no-repeat;background-pos
19、ition-x:50%;background-position-y:0px;background-image:url(./images/banner.jpg);padding:30px 0px;box-sizing:border-box主体区域的CSS样式核心代码/*内容和栏目标题部分*/.neirongwidth: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
20、;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:center;color:#C00;background:#FFF;/*最小宽度768px情况下导航和banner的样式*/media(min-width:768px).navbar-nav li a padding-top:10px;padding-bottom:10px;line-he
21、ight:60px;color:#FFF!important;.navbar-nav li a:hover color:#555;background-color:#e7e7e7!important;.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 .banner-
22、midwidth:90%;max-width:1100px;height:200px;margin:0px auto;padding:20px 0px;box-sizing:border-box;.banner-mid.wenziwidth:200px;height: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-m
23、id.wenzi h3width:250px;height:20px;line-height:20px;font-size:18px;font-weight:400;color:#FFF;letter-spacing:2px;text-align:center .banner-mid.picfloat:right;margin-top:-25px;主体区域的CSS样式核心代码/*最大宽度767px情况下导航和banner的样式 */media(max-width:767px).navbar-nav li a color:#FFF;!important .navbar-nav li a:hove
24、r 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);padding:
25、30px 0px;box-sizing:border-box .banner-midwidth:96%;height:200px;margin:0px auto;padding:20px 0px;box-sizing:border-box;.banner-mid.wenziwidth:200px;height:140px;float:left;.banner-mid.wenzi h1width:230px;height:50px;line-height:50px;font-size:36px;font-weight:600;color:#FFF;letter-spacing:1px;text-
26、align:center .banner-mid.wenzi h3width:230px;height:20px;line-height:20px;font-size:16px;font-weight:400;color:#FFF;letter-spacing:2px;text-align:center .banner-mid.picfloat:right;width:210px;height:auto;主体区域的CSS样式核心代码Bootstrap响应式网站开发Bootstrap表格-案例：商品列表数据展示案例拓展3.页脚区域的实现页脚区域html代码实现：版权所有：XXX有限公司 联系方式：12388888888 页脚区域的CSS样式表核心代码如下：footerwidth:100%;height:60px;margin:0px;background:#106fc1;line-height:60px;color:#FFF;text-align:center;margin-top:30px;bootstrapbootstrap响 应 式 网 站 开 发响 应 式 网 站 开 发第五章 Bootstrap表格
