资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2020/6/24,#,bootstrap,响应式网站开发,第,五,章,Bootstrap,表格,bootstrap响应式网站开发第五章 Bootstrap表,1,网页中的表格,1,网页中的表格1,2,Bootstrap,响应式网站开发,表格是,HTML,中最常见的元素之一，在使用,DIV+CSS,进行网页的排版之前，表格布局法一直是网页进行整体结构规划的主要方法。而目前，表格布局法已经逐步被,HTML+CSS,取代，所以现在网页中的表格就仅以列表的形式出现，如图,5-1,所示。,Bootstrap,表格,-,网页中的表格,表格的简介,图,5-1,网页中表格的使用,Bootstrap响应式网站开发 表格是HTM,3,Bootstrap,响应式网站开发,简单的,HTML,表格由,table,元素以及一个或多个,tr,、,th,或,td,元素组成，其中,tr,元素定义表格行，,th,元素定义表头，,td,元素定义表格单元。除此之外，,HTML,表格也包括,caption,、,thead,、,tbody,以及,tfoot,等元素。掌握了这些元素的基本定义，就可以借助,Bootstrap,高效快速的在网页中创建了一个清晰的表格。,Bootstrap,表格,-,网页中的表格,表格的基本元素,表,5-1,表格标签,标签,描述,表格的基础样式，用于定义一个表格的开始和结束,表格标题行的容器元素，用来标识表格列,表格主体中的表格行的容器元素,用于定义表格的一行，一组行标签内可以建立多组由,或,标签所定义单元格,用于定义表格的表头，一组,标签将建立一个表头，特殊的表格单元格，用来标识列或行，必须在,或,标签内使用。,用于定义表格的最基础元素,-,单元格，一组,标签将建立一个单元格，,标签必须放在,标签内,关于表格存储内容的描述或总结,标签表示,HTML,表格的页脚，该标签用于组合,HTML,表格中的表注内容,右侧的,表,5-1,列出了,Bootstrap,支持的表格元素：,Bootstrap响应式网站开发 简单的H,4,Bootstrap,响应式网站开发,使用,HBuilder,编辑器，在,HBuilder,中新建一个,Web,项目，编写表格代码如,左,下。,Bootstrap,表格,-,网页中的表格,创建表格,班级,姓名,学号,310162,宋某某,31016227,预览效果如图,5-2,所示。可以看出，这种没有边框等属性的基础表格，不易识别，浏览效果差。现将表格边框、填充、间距等属性设置为,1PX,，代码如下,：,修改后的,预览效果如图,5-3,所示。,图,5-2,默认的表格效果,图,5-3,设置参数后的表格效果,Bootstrap响应式网站开发使用HBuilder编辑,5,Bootstrap,中表格的简介,2,Bootstrap 中表格的简介2,6,Bootstrap,响应式网站开发,在网页中建立表格后，可以使用,Bootstrap,快速地对表格进行优化，这这样的优化不仅体现在表格的外观，更直接反应在表格的效果和功能上。,首先是基本型表格，在页面关联了,Bootstrap,的,CSS,文件后，可以直接在,标签中添加类,table,样式，即,，就会得到一个只带有内边距（,padding,）和水平分割的基本表。,Bootstrap,表格,-,Bootstrap,中表格的简介,基本型表格,课程名称,授课老师,选课人数,网站设计与制作,刘老师,300,Photoshop,章老师,300,C,语言程序设计,殷老师,300,【实例,5-1,】基本型表格，代码如下,运行【实例,5-1,】代码，页面效果如图,5-4,所示,图,5-4,基本型表格,Bootstrap响应式网站开发 在网页中建,7,Bootstrap,响应式网站开发,条纹状表格，其实也就是常见的具有类似于斑马线的隔行换色样式的表格。这样的表格样式不仅会让表格会变得漂亮起来，而且更会使表格的结构更加清淅，增强表格的阅读性。,在页面关联了,Bootstrap,的,CSS,文件后，除了在,标签中添加,class.table,之外继续添加,.table-striped,类后，即,，就会得到一个具有条纹效果的表格。,Bootstrap,表格,-,Bootstrap,中表格的简介,条纹状表格,课程名称,授课老师,选课人数,网站设计与制作,刘老师,300,Photoshop,章老师,300,C,语言程序设计,殷老师,300,【实例,5-2,】,条纹状,表格，代码如下,运行【实例,5-2,】代码，页面效果如图,5-5,所示,图,5-5,条纹状表格,Bootstrap响应式网站开发 条纹状表格，其实也,8,Bootstrap,响应式网站开发,带有边框表格，可以从视觉上让表格中的不同栏目、不同内容的单元格之间显得更加独立，可以给访问者带来一种更加规范与正式的感觉。带边框表格的制作是在基础型表格的基础上在,标签中再添加,class.table-bordered,，即,，这样就能够为表格的每个单元格增加边框。,Bootstrap,表格,-,Bootstrap,中表格的简介,带边框的表格,课程名称,授课老师,选课人数,网站设计与制作,刘老师,300,Photoshop,章老师,300,C,语言程序设计,殷老师,300,【实例,5-3,】,带边框的,表格，代码如下,运行【实例,5-3,】代码，页面效果如图,5-6,所示,图,5-6,带边框的表格,Bootstrap响应式网站开发 带有边,9,Bootstrap,响应式网站开发,在网页设计中，鼠标悬停效果常用于文字链接、产品图片、按钮等地方。同样，如果在网页中插入一个条目非常繁多的表格，那么鼠标悬停效果将能够清晰地告诉访问者当前正在阅读表格中哪一行的数据。,在基础型表格的基础上，将,标签中再添加,class.table-hover,，即,。这样表格就具备了鼠标悬停效果。,Bootstrap,表格,-,Bootstrap,中表格的简介,鼠标悬停表格,课程名称,授课老师,选课人数,网站设计与制作,刘老师,300,Photoshop,章老师,300,C,语言程序设计,殷老师,300,【实例,5-4,】,鼠标悬停,表格，代码如下,运行【实例,5-4,】代码，页面效果如图,5-7,所示,图,5-6,鼠标悬停表格,Bootstrap响应式网站开发 在网页设计,10,Bootstrap,响应式网站开发,在网页设计中，有时会因为排版而不得不压缩表格的尺寸，而,Boostrap,中的,.table-condensed,就可以使表格达到压缩的效果。,基于在基础型表格，将,.table-condensed,添加,标签中，即,，这样表中的行内边距（,padding,）被切为两半，以便让表格整体看起来更紧凑。,Bootstrap,表格,-,Bootstrap,中表格的简介,紧缩型表格,课程名称,授课老师,选课人数,网站设计与制作,刘老师,300,Photoshop,章老师,300,C,语言程序设计,殷老师,300,【实例,5-5,】,紧缩型的,表格，代码如下,运行【实例,5-5,】代码，页面效果如图,5-8,所示,图,5-8,紧缩型表格,Bootstrap响应式网站开发在网页设计中，有时会因为,11,Bootstrap,响应式网站开发,状态类表格常被用于凸显表格中某些特定数据，简单的说就是定义表格中的某一行或某一单元格的样式，以使该单元的数据成为颇受访问者关注的亮点。,不同于以上几个类型的表格，状态类表格所引用的样式通常是应用到,、,或,中的。状态类表格的四种样式如表,5-2,所示。,Bootstrap,表格,-,Bootstrap,中表格的简介,状态类表格,【实例,5-5,】,紧缩型的,表格，代码如下,类名,描述,对应颜色,.active,对某一特定的行或单元格应用悬停颜色,#f5f5f5,.success,表示一个成功的或积极的动作,#dff0d8,.warning,表示一个需要注意的警告,#fcf8e3,.danger,表示一个危险的或潜在的负面动作,#f2dede,表,5-2,状态类表格,Bootstrap响应式网站开发 状态类表格常,12,Bootstrap,响应式网站开发,Bootstrap,表格,-,Bootstrap,中表格的简介,状态类表格,课程名称,学生,期末成绩,网站设计与制作,张三,90,网站设计与制作,李四,不及格,网站设计与制作,王二,58,【实例,5-6,】,状态类,表格，代码如下,运行【实例,5-6,】代码，页面效果如图,5-9,所示,图,5-9,状态类表格,Bootstrap,为状态类表格提供了四种不同的样式，实例,5-6,中使用的是样式,.warning,，表示一个需要注意的警告。样式,.success,，就表示一个成功的积极的。样式,.danger,，就表示一个危险的，已经不及格了。,Bootstrap响应式网站开发Bootstrap表格-,13,Bootstrap,响应式网站开发,随着技术的快速发展，以智能手机为首的移动端设备迅速普及，为了能让制作的,Web,页面适合各种设备浏览，所以目前响应式设计的呼声越来越高。在,Bootstrap,中也为表格提供了响应式的效果，将其称为响应式表格。,不用于以上几种表格的设计思路，响应式表格的设计思路是：,Bootstrap,提供了一个,“.table-responsive”,类的容器，容器具有响应式效果，然后将制作的基本类表格,置于这个容器当中，那么这个表格也就同时具有响应式效果。,Bootstrap,中响应式表格效果表现为：当浏览器可视区域小于,768px,时，表格底部会出现水平滚动条。当浏览器可视区域大于,768px,时，表格底部水平滚动条就会消失。,Bootstrap,表格,-,Bootstrap,中表格的简介,响应式表格,运行【实例,5-5,】代码，页面效果如图,5-8,所示,图,5-8,紧缩型表格,Bootstrap响应式网站开发 随着技术,14,Bootstrap,响应式网站开发,Bootstrap,表格,-,Bootstrap,中表格的简介,响应式表格,课程名称,授课老师,选课人数,网站设计与制作,刘老师,300,Photoshop,章老师,300,C,语言程序设计,殷老师,300,【实例,5-7,】,响应式,表格，代码如下,【实例,5-7,】响应式表格，只需要,table,的代码修改如下即可。,图,5-10,不同尺寸下显示的样式,（,a,）视口宽度较低的状态,（,b,）视口宽度较宽的状态,Bootstrap响应式网站开发Bootstrap表格-,15,bootstrap,响应式网站开发,第,五,章,Bootstrap,表格,bootstrap响应式网站开发第五章 Bootstrap表,16,
展开阅读全文