Bootstrap项目实训干货：设计价格表

# 一、实验目标

写一个价格表。页面如下:

# 二、环境依赖

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

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

**环境准备**

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

# 三、实验知识

使用bootstrap的面板(panel)，可以将一组元素放在面板容器里。

面板可分为标题、内容和脚注：

- panel-heading

- panel-body

- panel-footer

面板也可以分带不同语境(色彩)的面板:

- panel-primary

- panel-success

- panel-info

- panel-warning

- panel-danger

# 四、实验步骤：

打开src/main/webapp/index.html

1.编写容器，使面板左右留出一些间距

2.编写面板

此面板是带红色的面板。

3.编写面板布局

4.编写标题

代码如下:

text-center让标题居中。

5.编写内容

代码如下:

lead让内容显示更显著。

6.编写列表

代码如下:

list-group是列表组。

7.编写脚注的按钮

代码如下:

**运行项目**