四时宝库

程序员的知识宝库

Bootstrap项目实训干货:设计图书表格

# 一、实验目标

写一个表格。页面如下:

# 二、环境依赖

采用bootstrap框架来实现,依赖的版本为3.3.7。

我们可以直接引用cdn的资源,资源地址如下:

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

**环境准备**

平台已经提供了实验的html、css文件。

# 三、实验知识

bootstrap提供了多种表格样式:

- 基本表格 (class="table")

- 条纹装表格 (class="table table-striped")

- 带边框的表格 (class="table table-bordered")

- 鼠标悬停 (class="table table-hover")

- 紧缩表格 (class="table table-condensed")

- 响应式表格 (class="table table-responsive")

基本的表格给table标签增加.table样式,使其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。

<table>

</table>

# 四、实验步骤

打开src/main/webapp/index.html

1.编写容器,使table左右留出一些间距

2.编写table标签,

3.编写表头和表体

**运行项目**

点击项目运行按钮,一直等到项目成功启动,点击项目网站,将显示网站的首页。如果未显示首页,可点击网址右边的刷新按钮。

# 五、拓展练习

我们可以修改表格的样式,变为条纹表格,鼠标悬停等表格。

完整代码链接:https://www.itbegin.com/apps/mooc/8dd90bbd473542b7a1f3fb1fc26918ee

ITbegin是专注于在线编程应用和研发的互联网公司,官网:www.itbegin.com

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接