Bootstrap项目升级干货:设计多列价格表

# 一、实验目标

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

# 二、环境依赖

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

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

**环境准备**

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

# 三、实验知识

使用bootstrap的well,Well 是一种会引起内容凹陷显示或插图效果的容器。

well按尺寸可以分类大、小:

- well-lg

- well-sm

**实验步骤:**

打开src/main/webapp/index.html

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

2.编写well容器

3.编写内容

4.编写第二个价表

代码如下:

**运行项目**

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

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180129A0W91Q00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券