《Bootstrap前端开发从入门到实战(微视频版)》课件 第06章 表格基础.pptx

表格基础

CONTENT

目录

01

02

03

04

Bootstrap表格基础

表格样式进阶

实战案例：在线教育平台网页

思考与练习

01

Bootstrap表格基础

Bootstrap为HTML表格提供了默认样式，包括透明背景、无边框间隔和合并边框线。使用.table类可使表格适应不同背景和容器样式，但需配合其他布局工具设置宽度。

01

示例代码展示了标准Bootstrap表格结构，包括caption、thead、tbody和tfoot标签，增强了表格的结构化和可读性。

02

基本表格样式

01

02

Bootstrap提供了多种表格类，如.table-striped（斑马纹）、.table-bordered（边框）、.table-hover（鼠标悬停高亮）和.table-condensed（紧凑型），可组合使用实现丰富的视觉效果。

示例代码通过添加这些类，创建了一个具有多种样式的Bootstrap表格，并可通过自定义CSS进一步调整斑马纹颜色。

表格类应用

表格支持上下文类（如.active、.danger、.info等），用于突出显示特定行或单元格，传达不同状态或信息。.sr-only类可用于屏幕阅读器，隐藏视觉元素但保留语义信息。

上下文类与辅助类

02

表格样式进阶

01

将表格嵌入面板（Panel）中，可增强数据展示的清晰度和美观度。面板提供背景色、边框和阴影效果，标题部分可用于描述表格内容。

02

示例代码展示了如何在面板中创建无边框表格，并通过.panel-body类添加额外边框，提升表格在页面中的视觉效果。

面板中的表格

使用.table-responsive类可使表格在小屏幕上适应，通过包裹表格实现滚动显示，避免破坏页面布局。

示例代码和CSS样式展示了响应式表格的实现方法，确保表格在不同屏幕尺寸下均能良好显示，提升了表格的可用性。

01

02

响应式表格

03

实战案例：在线教育平台网页

01

通过制作在线教育平台网页，综合运用Bootstrap表格样式和设计技巧，实现页面布局和功能展示。案例包括导航条、banner、有哪些信誉好的足球投注网站栏、课程模块、大纲模块、学习路径模块、教学团队模块、问答模块和页脚等部分。

案例概述

顶部导航条使用Bootstrap的Navbar组件，结合FontAwesome图标，固定在页面顶部。Banner栏目通过标题、描述、按钮和图片吸引用户，有哪些信誉好的足球投注网站栏采用弹性布局实现响应式设计。

网页头部设计

课程模块采用栅格布局，结合图片和文本展示课程信息，使用卡片组件展示课程详情和表格数据。大纲模块同样使用栅格布局，突出课程大纲内容，通过列表和表格形式呈现。

课程与大纲模块

使用列表组组件展示学习路径，通过.list-group、.list-group-flush和.list-group-item类实现清晰的路径展示，提升用户体验。

学习路径模块

教学团队模块使用栅格布局和卡片组件，展示教师照片、姓名和简介，通过.card类实现美观的教师展示效果。

教学团队模块

01

问答模块使用手风琴组件，通过.accordion类实现常见问题的折叠展示，用户可点击标题查看详细答案，提升了页面的交互性。

问答模块

页脚部分使用footer元素，结合栅格系统和导航组件，展示更多链接、联系方式和版权声明，为用户提供便捷的页面导航和信息获取。

页脚设计

04

思考与练习

介绍了使用Bootstrap构建基本表格的步骤、表格类的作用以及如何在卡片组件中嵌入表格，帮助用户巩固表格样式相关知识。

简答题

01

要求用户使用Bootstrap表格类创建响应式表格，实践表格样式的应用，提升对表格布局和样式的理解与掌握。

操作题