第二次学习bootstrap了，这次主要以实际用例为主，做一下总结。
51CTO课程链接:BootStrap零基础学习实战视频课程
1. 登陆表单
在bootstrap中，大量使用div标签控制层级关系，使用class属性控制样式表现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">用户登录</h1>
<form action="#" method="post" class="form-horizontal">
<div class="form-group">
<div class="col-md-5">
<div class="input-group">
<div class="input-group-addon">邮箱</div>
<input type="text" class="form-control" placeholder="Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<div class="input-group">
<div class="input-group-addon">密码</div>
<input type="password" class="form-control" placeholder="PassWord"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<a class="btn btn-primary" href="#">登陆</a>
</div>
</div>
</form>
</div>
</body>
</html>
2. 基本导航栏
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">科技</a></li>
</ul>
<div class="navbar-form navbar-right">
<a href="#" class="btn btn-default">登陆</a>
<a href="#" class="btn btn-default">注册</a>
<input class="form-control" type="text" placeholder="请输入关键字"/>
<button class="btn btn-primary">搜索</button>
</div>
</div>
</nav>
3. 字形图标库
Bootstrap包含了非常多的图标供我们使用，可以查看：http://v3.bootcss.com/components/#glyphicons
要注意尽量在图标和文字之间插入一个空格。
<h1><span class="glyphicon glyphicon-home"></span> 用户登录</h1>
4. 可下拉菜单
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li class="divider"></li>
<li><a href="#">选项3</a></li>
</ul>
</li>
5. 利用网格系统展示相册
bootstrap的网格系统非常强大，可以自由组合多重元素并控制位置。
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
[站外图片上传中……(10)]
<div class="caption">
<h4>图片1</h4>
<p>美丽的风景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外图片上传中……(11)]
<div class="caption">
<h4>图片2</h4>
<p>美丽的风景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外图片上传中……(12)]
<div class="caption">
<h4>图片3</h4>
<p>美丽的风景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外图片上传中……(13)]
<div class="caption">
<h4>图片4</h4>
<p>美丽的风景</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
[站外图片上传中……(14)]
<div class="caption">
<h4>图片5</h4>
<p>美丽的风景</p>
</div>
</div>
</div>
</div>
</div>
6. 面包屑导航条
面包屑导航的作用就是告诉访问者他们目前在网站中的位置以及如何返回，在bootstrap中制作导航条非常简单。
<div class="col-md-12">
<ul class="breadcrumb">
<li><a href="#">网站首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#" class="text-muted">所有图片</a></li>
</ul>
</div>
7. Tab标签
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs">
<li class="active"><a href="#page1" data-toggle="tab">页面1</a></li>
<li><a href="#page2" data-toggle="tab">页面2</a></li>
<li><a href="#page3" data-toggle="tab">页面3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="page1">
<p></p>
<p>生活，没有什么大道理可言，过日子，就是一种心情. </p>
<p>或许，倾心已久的人就在你举目可见的地方，却不一定是在等你； </p>
<p>或许，付出努力和艰苦后，你的钞票并不会乖乖地躲进你的腰包里； </p>
<p>或许，积年累月地寻找着突破事业的窗口，现实却并不成全你； </p>
<p>或许，…… </p>
</div>
<div class="tab-pane fade" id="page2">
<p></p>
<p>生活，没有什么大道理可言，过日子，就是一种心情. </p>
<p>或许，倾心已久的人就在你举目可见的地方，却不一定是在等你； </p>
<p>或许，付出努力和艰苦后，你的钞票并不会乖乖地躲进你的腰包里； </p>
<p>或许，积年累月地寻找着突破事业的窗口，现实却并不成全你； </p>
</div>
<div class="tab-pane fade" id="page3">
<p></p>
<p>生活，没有什么大道理可言，过日子，就是一种心情. </p>
<p>或许，倾心已久的人就在你举目可见的地方，却不一定是在等你； </p>
<p>或许，付出努力和艰苦后，你的钞票并不会乖乖地躲进你的腰包里； </p>
</div>
</div>
</div>
</div>
8. 列表页的制作和分页
<div class="container-fluid">
<div class="col-md-9">
<div class="list-group">
<div class="list-group-item">
<a href="#"><h3>美军舰侵犯西沙，居心何在？</h3></a>
<p>2016年新年伊始，正当中国在南海积极向外界展示和平、克制、合作姿态的时候，美军挑衅的调门严重升级了，这次进的不是南沙，而是西沙。</p>
<p>1月27日，美军太平洋总部司令哈里斯在美国著名智库战略与国际问题研究中心发表演讲称，“南沙的争议岛礁不属于中国”，当然他也强调，这仅是他的个人观点 。</p>
<p class="text-muted">
<strong>关键字：<span class="badge">中美关系</span></strong>
<strong class="pull-right">发布时间：2016-1 </strong>
</p>
</div>
<div class="list-group-item">
<a href="#"><h3>美军舰侵犯西沙，居心何在？</h3></a>
<p>2016年新年伊始，正当中国在南海积极向外界展示和平、克制、合作姿态的时候，美军挑衅的调门严重升级了，这次进的不是南沙，而是西沙。</p>
<p>1月27日，美军太平洋总部司令哈里斯在美国著名智库战略与国际问题研究中心发表演讲称，“南沙的争议岛礁不属于中国”，当然他也强调，这仅是他的个人观点 。</p>
<p class="text-muted">
<strong>关键字：<span class="badge">中美关系</span></strong>
<strong class="pull-right">发布时间：2016-1 </strong>
</p>
</div>
<div class="list-group-item">
<a href="#"><h3>美军舰侵犯西沙，居心何在？</h3></a>
<p>2016年新年伊始，正当中国在南海积极向外界展示和平、克制、合作姿态的时候，美军挑衅的调门严重升级了，这次进的不是南沙，而是西沙。</p>
<p>1月27日，美军太平洋总部司令哈里斯在美国著名智库战略与国际问题研究中心发表演讲称，“南沙的争议岛礁不属于中国”，当然他也强调，这仅是他的个人观点 。</p>
<p class="text-muted">
<strong>关键字：<span class="badge">中美关系</span></strong>
<strong class="pull-right">发布时间：2016-1 </strong>
</p>
</div>
</div>
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</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="#">»</a></li>
</ul>
</div>
</div>
</div>
9. 侧边栏小工具
侧边栏可以使用网格系统定位，然后写一个panel的div即可。下面是两种形式的小工具：
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
推荐新闻
</div>
<div class="panel-body">
<strong class="panel-title"><a href="#">微软首届数据分析峰会将于3月22日开幕</a></strong>
<p>本次峰会中微软的Excel以及Power BI团队将针对行业趋势发表见解，并给出Excel以及Power BI的最佳实践建议。峰会中将会有众多嘉宾出席，包括一些微软的老功臣和领域中的专家。</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
热点新闻
<a href="#" class="text-muted pull-right">»</a>
</div>
<ul class="list-group">
<li class="list-group-item">
<a href="#" class="text-muted">58赶集回应驱逐赶集经销商：业务调整而已</a>
</li>
<li class="list-group-item">
<a href="#" class="text-muted">阿里巴巴公布“年货节”销量：5天卖21亿件商品</a>
</li>
<li class="list-group-item">
<a href="#" class="text-muted">华尔街日报：小米仍是去年中国智能手机市场霸主</a>
</li>
</ul>
</div>
</div>
网友评论