bootstrap 学习之路7

bootstrap学了学，突然想到bootstrap其实真的很强大，网页制作不就是两部分： 1. 布局。 2. CSS 

好了。 而我们要快速开发网页，首先是网页布局，使用bootstrap的 span 。 其次使用bootstrap 的 各个组件。 再用css装饰。这样就是一个网页。 所以下面介绍一下bootstrap的组件。 当然这些官网上有，我只是实现一下。首先自己练手，其次对组件有个了解。

按照一个网站的写法，bootstrap组件包括：

1. 导航 栏和导航条。 导航栏是要宽一些，可以多加些自定的元素。导航条就是一条导航的导航栏。分别是 .nav 和 .navbar

2. 下拉菜单，导航条要包括下拉菜单的 .dropdown

3. 面包屑，其实说白了就是类似导航栏的东西，很多网站都有，一会看例子理解

4. 排版（网页正文），包括hero-unit 和 滚动图片等，前面介绍过，这里不做介绍。

        5. 按钮组、分页

6. 警告框

7. 进度条

8. 标签和徽章

二话不说，上代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap/css/bootstrap-responsive.min.css" />


<!--这里加上想用的css-->
<style type="text/css">



.navbar{
margin-bottom: 0px;
}


</style>
</head>


<body>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">

<ul class="nav" >
<li class="active"><a href="#">home</a></li>
<li><a href="#">content</a></li>
<li><a href="#">about</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a href="#">二级菜单</a>
<ul class="dropdown-menu" >
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</li>

</ul>



</div>

</div>
</div>


<ul class="breadcrumb">
 <li><a href="#">首页</a> <span class="divider">/</span></li>
 <li><a href="#">组件</a> <span class="divider">/</span></li>
 <li class="active">按钮</li>
</ul>
<div class="container">




<div class="row-fluid">
<div class="span4">
<h3>按钮组</h3>
<!--按钮组-->
<div class="btn-group">
<button class="btn">left</button>
<button class="btn">middle</button>
<button class="btn">right</button>
</div>


</div>
<div class="span4">
<h3>多维按钮组</h3>
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
</div>
<div class="btn-group">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
</div>
</div>
</div>


<div class="span4">
<h3>分裂按钮</h3>
<!--按钮组-->
<div class="btn-group">
<button class="btn">dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</div>


</div>
</div>


<!--分页-->
<div class="pagination">
 <ul>
<li class="disabled" ><a href="#">Prev</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="#">Next</a></li>

 </ul>
</div>


<div class="row-fluid">
<div class="span4">
<span class="label label-success">success</span>
</div>
<div class="span4"><span class="badge badge-success">B</span></div>


<div class="span4">
<div class="alert  alert-block">
<button  type="button"  class="close"  data-dismiss="alert">×</button>
<strong>warning</strong>严重警告！
</div>
</div>
</div>

<div class="row-fluid">

<div class="span12">
<div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
</div>
</div>


<hr />
<div class="footer">
© 2013 Company, Inc. · 
</div>
</div>
<script type="text/javascript" src="./bootstrap/thirdpart/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>  
       
</body>
</html>

注释：

1.  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a href="#">二级菜单</a>
<ul class="dropdown-menu" >
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</li>

整个下拉菜单的描述，其中 第一级的  class="dropdown-toggle" data-toggle="dropdown 很重要 第二层级就是<ul class="dropdown-menu">

2. <ul class="breadcrumb"> 面包屑，看看效果一下就理解了。说再多都是废话。

3. 进度条和提示框都需要js控制，效果才好，下一章就进入到js的学习过程。

效果图：