CSS组件

一、下拉菜单

<!--下拉菜单-->
<div class="dropdown">
<button type="button" class="btn btn-default" data-toggle="dropdown">php课程<span class="caret"></span></button>  <!-- 下拉菜单的三角形<span class="caret"></span>-->
<ul class="dropdown-menu">
<li><a>html</a></li>
<li><a>mysql</a></li>
<li><a>linux</a></li>
<li class="divider"></li>  <!--分割线-->
<li><a>apache</a></li>
<li><a>redis</a></li>
<li><a>css</a></li>
</ul>
</div>

二、按钮组

<!--按钮组的应用-->
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default" data-toggle="dropdown">html</button>  
<button type="button" class="btn btn-default" data-toggle="dropdown">mysql</button> 
<button type="button" class="btn btn-default" data-toggle="dropdown">linux</button>
</div>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default" data-toggle="dropdown">apache</button>  
<button type="button" class="btn btn-default" data-toggle="dropdown">redis</button> 
<button type="button" class="btn btn-default" data-toggle="dropdown">css</button>
</div>

</div>

//按钮式的下拉菜单

<!--按钮式的下拉菜单-->
<div class="btn-group btn-group-lg">  <!--按钮组已经有dropdown类，不用在自己添加-->
<button type="button" class="btn btn-default ">html  <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button></button>  

<ul class="dropdown-menu">
<li><a>html</a></li>
<li><a>mysql</a></li>
<li><a>linux</a></li>
<li class="divider"></li>  <!--分割线-->
<li><a>apache</a></li>
<li><a>redis</a></li>
<li><a>css</a></li>
</ul>
</div>

//输入框组（只能用于input标签）

<!--输入框组-->
<h2 class="page-header">输入框组</h2>
<div class="input-group">
<span class="input-group-addon">用户名</span>
<input type="text" class="form-control" placeholder="请输入用户名" />

</div>

//标签页（选项卡效果）

<!--标签页（选项卡效果）-->
<ul class="nav nav-tabs">
<li class="active"><a>active</a></li>  <!--active是选中当前-->
<li><a>page</a></li>
<li><a>active</a></li>
<li><a>go stright</a></li>
</ul>

//缩略图

//分页

<!--分页效果-->
<div>
<ul class="pagination">
<li class="active"><a>&laquo;</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>&raquo;</a></li>
</ul>
</div>

//导航栏

<!--导航条,在container之外做-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"><a href="#" class="navbar-brand">BOOTSTRAP</a><p class="navbar-text">欢迎光临</p></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">news</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索的关键词" />
<button type="button" class="btn btn-default">搜索</button>
</div>
</form>
</div>
</div>
</nav>