BootStrap
bootstrap简介
1.1 bootstrap概述
1.1.1 什么是bootstrap
Bootstrap,基于 HTML、CSS、JavaScript的前端框架。
该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效)
开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现。
作用:
-
Bootstrap 使得 Web 开发更加快捷,高效。
-
BootStrap支持响应式开发,解决了移动互联网前端开发问题
该框架由Twitter 公司的设计师Mark Otto和Jacob Thornton合作开发。
Bootstrap基础入门使用的都是自带CSS样式,高级开发中需要使用HTML5、CSS3、动态CSS语言Less 进行自定义开发,JavaEE课程中学习是“基础入门”。
中文官网:
http://www.bootcss.com
1.1.2 什么是响应式布局、响应式布局能够解决的问题
-
响应式布局:一个网站的展示能够兼容多个终端(手机、iPad、PC等),而不需要为每个终端单独做一个展示版本。(根据不同的设备的屏幕大小,而显示不同样式的页面,但使用代码是同一份。)
-
此概念专为解决移动互联网浏览而诞生的。
-
响应式布局,使得网站仅适用一套样式,就可以在不同分辨率下展示出不同的舒适效果,大大降低了网站开发维护成本,并且能带给用户更好的体验性
1.2 环境下载
1.2.1 下载
- 中文官网地址:http://d.bootcss.com/bootstrap-3.3.5.zip
1.2.2 目录结构
1.2.3 内容结构
- 发布版,及开始使用到的Bootstrap内容结构
bootstrap/
├── css/
│ ├── bootstrap.css //预定义的CSS文件
│ ├── bootstrap.css.map //CSS与less源码对应文件
│ ├── bootstrap.min.css //压缩
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css //主题文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js //js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot //字体 (字体图标)
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
1.2.4 简洁模板
参考文档:起步/基本模板,http://v3.bootcss.com/getting-started/#template
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--页面编码-->
<meta charset="utf-8">
<!--IE浏览器,首选edge内核(Windows10)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--可视化窗口 宽度,设备宽度 缩放比 =1 不缩放-->
<!--user--scalable=yes 允许用户缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
1.3 布局容器
BootStrap必须需要至少一个布局容器,才能为页面内容进行封装和方便的样式控制。相当于一个画板。
帮助手册位置:全局CSS样式-------》概览-------》布局容器
任意元素使用了布局容器的样式,都会成为一个布局容器,建议使用div作为布局容器
样式 | 作用 |
---|---|
.container | 类用于固定宽度并支持响应式布局的容器。 【特点:居中,两端留白】 <div class="container"> ... </div> |
.container-fluid | 类用于 100% 宽度,占据全部视口(viewport)的容器。 <div class="container-fluid"> ... </div> |
为了展示效果明显,我们为div加入了边框样式:style="border:1px solid red;"
示例1:
<!-- 布局容器1:container 特点:居中,两端留白 -->
<div class="container" style="border:1px solid red;">
1111111111
</div>
示例2:
<!-- 布局容器2:container-fluid 特点:占据了视口100%宽度 -->
<div class="container-fluid" style="border:1px solid red;">
1111111111
</div>
bootstrap栅格系统
2.1 简述栅格系统
原始方式:table 缺点:加载慢 优点:简单
div+css 缺点:学习成本高 不易操作 优点:加载速度快,一个一个div加载,加载一个显示一个
bootstrap方式:
吸取了table和div+css各自的优点
为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。
栅格系统将一行分为12列,通过设定元素占用的列数来 布局元素在页面上的展示位置。
帮助手册位置:全局CSS样式-----栅格系统
**作用:**可以让开发人员更加轻松进行网页布局,并且轻松进行响应式开发。
2.2 栅格系统的特点
-
栅格特点
- “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中
- 行使用的样式
.row
,列使用样式col-*-*
元素内容应当放置于“列(column)”内
-
基本的书写方式必须是:容器–行—列---内容
- HTML表格:定义一个表格----行-----单元格
-
栅格参数:
col-屏幕尺寸-占用列数
- 列元素的书写顺序,决定布局顺序,先写的列元素会被先布局到行上。
- 列元素的占用列数,定义列元素的大小
2.3 入门案例
为了方便显示元素大小,我们为展示元素都赋予了相同样式:border:1px solid red;height:100px;
示例1:一个元素占一行
<div class="container">
<div class="col-lg-12" style="border:1px solid red;height:100px;"> 11111 </div>
</div>
示例2:两个元素占一行
<div class="container">
<div class="row">
<div class="col-lg-6" style="border:1px solid red;height:100px;"> 11111 </div>
<div class="col-lg-6" style="border:1px solid red;height:100px;"> 22222 </div>
</div>
</div>
示例3:四个元素占一行
<div class="container">
<div class="row">
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 11111 </div>
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 22222 </div>
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 33333 </div>
<div class="col-lg-4" style="border:1px solid red;height:100px;"> 44444 </div>
</div>
</div>
注意: 一个row下,如果设置的col列数总和小于等于12,那么该row下元素在一行排列;
注意: 一个row下,如果设置的col列数总和大于12,那么超出的元素会另起一行排列;
注意: 行和列可以进行无限嵌套,嵌套方式必须为 列—行---列----行。。。。
注意: 一个row元素下,有12列的
2.4 栅格屏幕尺寸设置
屏幕尺寸简述:
-
large : lg -------大屏幕,一般PC尺寸
-
medium : md --------中等屏幕,小PC尺寸
-
small: sm : sm -----小屏幕 ,iPad尺寸
-
x small : xs -----超小屏幕,智能手机尺寸
为了方便显示元素大小,我们为展示元素都赋予了相同样式:border:1px solid red;height:100px;
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!--
添加样式
-->
<style type="text/css">
/*设置每行中的div,添加边框*/
.row div{
border: solid 1px #999999;
}
</style>
</head>
<body>
<!--
class="container"样式:可以让div自动居中显示
container-fluid:自动居中并且 100% 宽度的布局
-->
<div class="container" style="margin-top: 30px;">
<!--
页面的样式:
col-md- 中等屏幕 桌面显示器 (≥992px)
col-sm- 小屏幕 平板 (≥768px)
col-xs- 超小屏幕 手机 (<768px)
-->
<div class="row">
<!--
中等屏幕md12列
小屏幕sm12列
超小屏幕xs12列
-->
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
<div class="col-md-1 col-sm-1 col-xs-1">col</div>
</div>
<div class="row">
<!--
中等屏幕md8*4列
小屏幕sm6*6列
超小屏幕xs9*3列
-->
<div class="col-md-8 col-sm-6 col-xs-9">col</div>
<div class="col-md-4 col-sm-6 col-xs-3">col</div>
</div>
<div class="row">
<!--
中等屏幕md4*4*4列
小屏幕sm3*4*5列
超小屏幕xs10*1*1列
-->
<div class="col-md-4 col-sm-3 col-xs-10">col</div>
<div class="col-md-4 col-sm-4 col-xs-1">col</div>
<div class="col-md-4 col-sm-5 col-xs-1">col</div>
</div>
<div class="row">
<!--
中等屏幕md6*6列
小屏幕sm10*2列
超小屏幕xs7*5列
-->
<div class="col-md-6 col-sm-10 col-xs-7">col</div>
<div class="col-md-6 col-sm-2 col-xs-5">col</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
注意:
若设置了某个屏幕尺寸的样式,那么比该尺寸大的屏幕,会沿用该设置;比该尺寸小的屏幕,会默认一个元素占12列的设置。
例如:设置了col-md-4,那么相当于也设置了col-lg-4。其他屏幕尺寸均默认为col-sm-12,col-xs-12
2.5 列偏移
通常情况下我们需要将元素居中显示,需要左边空出一定的空白区域,这里我们就可以使用列偏移来达到效果。
样式 | 作用 |
---|---|
.col-屏幕尺寸-offset-* | 在指定屏幕尺寸下,向右偏移*个列 |
2.6 响应式工具
为针对性地在移动页面上展示和隐藏不同的内容,bootStrap提供响应式工具。可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素
帮助手册位置:全局CSS样式—响应式工具
<div class="row">
<div class="col-md-8 col-sm-5 col-xs-2">.col-md-1</div>
<!--手机,超小屏幕隐藏-->
<div class="col-md-1 col-sm-5 hidden-xs">手机端不显示</div>
<div class="col-md-3 col-sm-2 col-xs-10">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-5 col-xs-7">col-md-1</div>
<!--小屏幕显示-->
<div class="visible-sm-inline-block col-sm-5">平板显示</div>
<div class="col-md-4 col-sm-2 col-xs-5">col-md-1</div>
</div>
bootstrap常用组件
3.1 列表
BootStrap同样提供了实用的列表样式供开发人员使用。
帮助手册位置:全局CSS样式----排版----列表
样式 | 作用 |
---|---|
.list-inline | 将列表所有元素放置于一行 |
示例:
<ul class="list-inline">
<li>传智播客</li>
<li>黑马程序员</li>
<li>博学谷</li>
</ul>
3.2 按钮
BootStrap提供了丰富的按钮样式供开发人员使用。任何HTML元素加上以下样式都会变成对应按钮
帮助手册位置:全局CSS样式----按钮
样式 | 作用 |
---|---|
.btn btn-default | 示例: <a class="btn btn-default">Link</a> |
.btn btn-primary | 示例: <a class="btn btn-primary">(首选项)Primary</a> |
.btn btn-success | 示例: <a class="btn btn-success">(成功)Success</a> |
.btn btn-info | 示例: <a class="btn btn-info">(一般信息)Info</a> |
.btn btn-warning | 示例: <a class="btn btn-warning">(警告)Warning</a> |
.btn btn-danger | 示例: <a class="btn btn-danger">(危险)Danger</a> |
.active | 表示按钮被点击的样式 示例: <a class=”btn btn-danger active”>(危险)Danger</a> |
.disabled | 表示按钮被禁用的样式 示例: <a class=”btn btn-danger disabled”>(危险)Danger</a> |
3.3 导航条
BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需进行简单修改即可使用。
帮助手册位置:组件-------导航条
反色的导航条
通过添加 .navbar-inverse
类可以改变导航条的外观。
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
<li ><a href="#">家电数码</a></li>
<li ><a href="#">电脑办公</a></li>
</ul>
</div>
</nav>
表单的导航条
将表单放置于 .navbar-form
之内可以呈现很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default hidden-xs">Submit</button>
</form>
<div/>
</nav>
解释:
视口(viewport):即浏览器上网页的可视区域
视口作用:用于移动设备将 大型页面进行比例缩放显示。
3.4 轮播图
BootStrap已经提供了完整的轮播图实例,通常情况下,我们仅需进行简单修改即可使用。
轮播图DIV的定时换图属性:data-interval="毫秒值"
**注意:**多个轮播图必须修改轮播图的ID。
帮助手册位置:JavaScript插件— Carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
3.5 排版 对齐方式
BootStrap提供统一的排版方式设置,方便开发人员对内容板式进行调整
帮助手册位置:全局CSS样式----排版----对齐
会将元素内所有的内容都进行排版设置
样式 | 作用 |
---|---|
.text-left | 使元素内容靠左显示 |
.text-center | 使元素内容居中显示 |
.text-right | 使元素内容靠右显示 |
<div class="text-center">
<img src="img/xxx.png" />
</div>
3.6 表单元素
BootStrap同样提供了丰富的表单控件供开发人员来选择。
帮助手册位置:全局CSS样式-----表单
3.7 分页条
BootStrap为我们还准备了分页条的样式组件。
帮助手册位置:组件-----------分页
示例1:分页条整体列表
<nav>
<!-- 分页条整体列表 -->
<ul class="pagination">
<!-- 上一页 -->
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 索引页 -->
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!-- 下一页 -->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
示例2:上一页 被禁用;索引页 第一页被选中
<nav>
<!-- 分页条整体列表 -->
<ul class="pagination">
<!-- 上一页 被禁用 -->
<li class="disabled">
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 索引页 第一页被选中 -->
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!-- 下一页 -->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
综合案例
将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合
4.1 首页之top
案例分析:
- 整个topbar划分比例:1:2:1
- 中间区域只在“大屏幕”和“中等屏幕”显示
- 整个区域在“超小屏幕”英寸
案例实现:
<!--
1.整个topbar划分比例:1:2:1
2.中间区域只在“大屏幕”和“中等屏幕”显示
3.整个区域在“超小屏幕”英寸
-->
<div class="container topbar hidden-xs">
<div class="row">
<div class="col-md-3 col-sm-6">
<img src="../img/logo2.png"/>
</div>
<div class="col-md-6 visible-lg visible-md">
<img src="../img/header.jpg"/>
</div>
<div class="col-md-3 col-sm-6">
<a href="" class="btn btn-danger btn-sm">免费注册</a>
<a href="" class="btn btn-link btn-sm">登录</a>
<a href="" class="btn btn-link btn-sm">购物车</a>
</div>
</div>
</div>
4.2 首页之导航
案例分析:
- Bootstrap 已经提供了导航的完整实例,通常情况下,只需要进行简单修改即可。
- 帮助文档:组件/导航条,http://v3.bootcss.com/components/#navbar
- 反色导航条:组件/导航条/反色的导航条,http://v3.bootcss.com/components/#navbar-inverted
案例实现:
<!--
1.大屏幕显示所有分类
2.中等屏幕隐藏部分分类,提供“更多”
3.超小屏幕隐藏所有分类,以“汉堡按钮”显示
-->
<div class="container">
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">电脑办公 <span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li class="hidden-sm"><a href="#">电脑办公</a></li>
<li class="dropdown visible-sm">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">电脑办公</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">电脑办公</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default hidden-xs">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
4.3 首页之轮播图
案例分析:
-
Bootstrap 已经提供轮播图的完整案例,此处我们也是进行修改即可
-
参考文档:JavaScript插件/ carousel,http://v3.bootcss.com/javascript/#carousel
案例实现:
<div class="container">
<div id="index_carousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 Indicators -->
<ol class="carousel-indicators">
<li data-target="#index_carousel" data-slide-to="0" class="active"></li>
<li data-target="#index_carousel" data-slide-to="1"></li>
<li data-target="#index_carousel" data-slide-to="2"></li>
</ol>
<!-- 轮播展示
* item 表示一个图片,与“指示器”li的个数保持一致
-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="第一张图">
</div>
<div class="item">
<img src="../img/2.jpg" alt="第2张图">
</div>
<div class="item">
<img src="../img/3.jpg" alt="第3张图">
</div>
</div>
<!-- 左右控制区 Controls
* href 用于确定点击触发的那个轮播图
-->
<a class="left carousel-control" href="#index_carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">前一张</span>
</a>
<a class="right carousel-control" href="#index_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>
</div>
4.4 首页之热卖商品
案例分析:
“热卖商品”模块是对栅格系统的再应用。我们将用已有的知识编写出响应式页面。
案例实现:
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>热卖商品 <img src="../img/title2.jpg"/></h2>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-4 hidden-xs">
<img src="../img/products/big01.jpg" style="width: 100%;"/>
</div>
<div class="col-md-10 col-sm-8">
<div class="col-md-6 col-sm-12" style="height:200px;">
<img src="../img/products/middle01.jpg" style="height: 100%;width:100%;"/>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small01.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small02.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small03.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small04.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small05.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small06.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small07.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small08.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small09.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
</div>
</div>
</div>
4.5 首页之footer
案例分析:
通过分析,该模块需要使用栅格划分上下两行,第二行的文字信息准备使用“列表”,内容的居中将提供两种方案:文字居中,栅格列偏移
-
参考文档-文本对齐:全局CSS样式/排版/对齐,http://v3.bootcss.com/css/#type-alignment
-
参考文档-列表:全局CSS样式/排版/列表,http://v3.bootcss.com/css/#type-lists
-
参考文档-栅格列偏移:全局CSS样式/栅格系统/列偏移,http://v3.bootcss.com/css/#grid-offsetting
案例实现:
<div class="container">
<div class="row">
<img src="../img/footer.jpg" style="width:100%;"/>
</div>
<div class="row">
<!--可以使用 text-center 文本居中-->
<div class="col-md-8 col-md-offset-3">
<ul class="list-inline">
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">法律声明</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">支付方式</a></li>
<li><a href="#">配送方式</a></li>
<li><a href="#">务声明服</a></li>
<li><a href="#">广告声明</a></li>
</ul>
</div>
</div>
</div>