首先引入
![](//images0.cnblogs.com/blog/736985/201505/102056523601541.png)
![](//images0.cnblogs.com/blog/736985/201505/102056529381197.png)
![](//images0.cnblogs.com/blog/736985/201505/102056535324083.png)
![](//images0.cnblogs.com/blog/736985/201505/102056547824368.jpg)
![](//images0.cnblogs.com/blog/736985/201505/102056567678793.png)
![](//images0.cnblogs.com/blog/736985/201505/102056572824937.png)
![](//images0.cnblogs.com/blog/736985/201505/102056582517008.png)
![](//images0.cnblogs.com/blog/736985/201505/102056588133436.png)
![](//images0.cnblogs.com/blog/736985/201505/102056595329049.png)
![](//images0.cnblogs.com/blog/736985/201505/102057005635634.png)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,intial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
col 共12列,
手机网站叫囊式下拉菜单
<div class="container">
<div class="row">
<!-- 手机网站胶囊式下拉菜单-->
<ul class="nav nav-pills" style="margin:20px auto;">
<li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
首页<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><a href="#">首页二</a></li>
</ul>
</li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">公司简介</a></li>
</ul>
</div>
</div>
分裂式下拉菜单
<div class="container">
<div class="row">
<!-- 手机网站分裂式下拉菜单-->
<div class="btn-group">
<button type="button" class="btn btn-danger">首页</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">首页一</a></li>
</ul>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,intial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
div ul{margin:0 auto;}
.left{margin-left:20px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- 手机网站分裂式下拉菜单-->
<div class="btn-group">
<button type="button" class="btn btn-danger">首页</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">首页一</a></li>
</ul>
</div>
<div class="btn-group left">
<button type="button" class="btn btn-danger">公司新闻</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">新闻一</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
手机网站折叠菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,intial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- 手机网站折叠菜单-->
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span><!-- 表示右边的线-->
<span class="icon-bar"></span>
</button>
<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="#">产品中心</a></li>
<!-- 鼠标点过有阴影效果-->
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">
联系我们</a></li>
<!-- 下拉菜单闻class="caret显示倒三角-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
公司新闻 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">5</a></li>
<li><a href="#">4</a></li>
<li class="divider"></li><!-- 显示一条线-->
<li><a href="#">3</a></li>
<li><a href="#">2</a></li>
<li class="divider"></li>
<li><a href="#">1</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</body>
</html>
<!-- 手机网站折叠菜单 navbar-fixed-top navbar-inverse反色导航栏固定在顶部-->
<!-- 有条斜杠的breadcrumb线-->
<ol class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">阿</a></li>
<li>fff</li>
</ol>
分页效果pagination-sm pagination-lg分页显示大小
<div class="container">
<div class="row">
<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="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
翻页效果上一页下一页
<div class="container">
<div class="row">
<!-- 左边previous 右边next 左箭头← 右箭头→-->
<ul class="pager">
<li class="previous disabled"><a href="#">←上一页</a></li>
<li class="next"><a href="#">下一页→</a></li>
</ul>
</div>
</div>
显示未读条数的徽章
<div class="container">
<div class="row">
<a href="#">未读的信息数 <span class="badge">55</span></a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">4</span>
Messages
</a>
</li>
</ul>
</div>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056523601541.png)
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>hello,word!</h1>
<p><a class="btn btn-primary btn-lg" role="button">learn more</a></p>
</div>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056529381197.png)
<div class="container">
<div class="row">
<div class="page-header">
<h1>标题<small>小标题</small></h1>
</div>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056535324083.png)
缩略图
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/pic1.jpg" alt="美丽的风景">
</a>
</div>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056547824368.jpg)
警告框
<div class="container">
<div class="row">
<!--不可以关闭的框-->
<div class="alert alert-info">Heads up! This alert needs your attention, but it's not super important.</div>
<div class="alert alert-success">ddddddddddddddd</div>
<div class="alert alert-warning">ddddddddddddddd</div>
<!--可以关闭的框-->
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">×</button>
<strong>警告!</strong>
ddddddddddddddd</div>
</div>
</div>
</div>
</div>
导航条
<div class="container">
<div class="row">
<!-- progress-striped 带有样式的进度条-->
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuemin="0" aria-valuemax="50" style="width:20%;"
>
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</div>
无序列表
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio</li>
</ul>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056567678793.png)
链接条目
<div class="container">
<div class="row">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056572824937.png)
<div class="container">
<div class="row">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-text">List group item heading</p>
</a>
</div>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056582517008.png)
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">titile titile titile</div>
<div class="panel-body">
Basic panel example
</div>
<div class="panel-footer">zhushi</div>
</div>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056588133436.png)
表格面板
<div class="container">
<div class="row">
<div class="panel panel-default">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102056595329049.png)
<div class="container">
<div class="row">
<div class="well">Look, I'm in a well!</div>
<div class="well well-lg">Look, I'm in a well!</div>
</div>
</div>
![](http://images0.cnblogs.com/blog/736985/201505/102057005635634.png)
圆角图片
<div class="container">
<div class="row">
<img src="images/pic1.jpg" class="img-rounded img-responsive">
<img src="images/pic1.jpg" class="img-circle img-responsive">
<img src="images/pic1.jpg" class="img-thumbnail img-responsive">
</div>