Bootstrap_第三章 Bootstrap组件

3.1.1小图标的用法

<span class="glyphicon glyphicon-home"></span>

3.1.2小图标的应用场景

icon样式乐意用在各种元素容器内.

3.2.1基本下拉菜单

<div class="dropdown open">
<button class="btn btn-default" data-toggle="dropdown">
Dropdown
<span class="caret"></span><!--向下小三角-->
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li><!--分界线-->
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

3.2.2分离式下拉菜单

<!--分离式下拉菜单-->
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Action action</a>
</li>
</ul>
</div>
</div>

3.4.1输入框基本用法

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"/>
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="请输入要搜索的内容"/>
<sapn class="input-group-addon">百度一下</sapn>
</div>

3.4.2 尺寸大小

<div class="input-group input-group-lg"></div>
<div class="input-group input-group-sm"></div>

3.4.3按钮作为addon

<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button">百度一下</button>
</span>
</div>

3.5.1 导航

导航Nav是一个网站最重要的组成部分,可以便于用户查找网站所有提供的各项功能服务.
1.选项卡导航

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>

2…胶囊式选项卡导航

<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>

3.自适应导航

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>

4.二级菜单

<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">个人</a></li>
<li class="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>
</ul>

3.5.2 导航条

1.基础导航条

<nav class="navbar navbar-default" role="navigation">
<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>
</nav>

2.导航条中的表单

<nav class="navbar navbar-default" role="navigation">
<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>
<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-primary">搜索</button>
</form>
</nav>

3.导航条中的按钮(文本.链接)

<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="nav navbar-nav">
<button class="btn btn-default navbar-btn">button</button>
<button class="btn btn-primary navbar-btn">button</button>
<button class="btn btn-success navbar-btn">button</button>
</div>
</nav>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="nav navbar-nav">
<p class="navbar-text">text</p>
<p class="navbar-text">text</p>
</div>
</nav>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="nav navbar-nav">
<a href="#" class="navbar-link">link</a>
<a href="#" class="navbar-link">link</a>
</div>
</nav>

4.顶部固定或底部固定

<nav class="navbar navbar-default navbar-fixed-top">...</nav>
<nav class="navbar navbar-default navbar-fixed-bottom">...</nav>

5.响应式导航条

<nav class="nav navbar-inverse">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-header">LOGO</a>
</div>
<div class="collapse navbar-collapse navbar">
<ul class="nav navbar-nav">
<li><a href="#" class="active">首页</a></li>
<li><a href="#">收藏</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系卖家</a></li>
<li><a href="#">退换货</a></li>
</ul>
</div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"/>
</div>
<button class="btn btn-default" type="submit">搜索</button>
</form>
</nav>

3.7 伸缩图

<div class="row">
<div class="col-md-2 col-xs-6">
<a class="thumbnail" href="#">
<img src="image/adbg.png" alt=""/>
</a>
</div>
</div>
-------------------------------------------------------
<div class="row">
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="image/liucheng.png" alt=""/>
<div class="caption"><!--可以在.caption样式元素容器内添加任意风格元素-->
<h2>左耳</h2>
<p>放肆青春掀全民追忆</p>
<p>
<a href="#" class="btn btn-primary" role="button">播放</a>
<a href="#" class="btn btn-primary" role="button">下载</a>
</p>
</div>
</div>
</div>
</div>

3.8媒体对象

<div class="media">
<div class="media-left"><!--.media-left或media-right调整位置-->
<a href="#">
<img src="image/1.jpg" class="media-object"/>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">AAAAAAAA</h4>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<small>XXXX/XX</small>
<small>XX|XX</small>
</div>
</div>

3.9 列表组

<ul class="list-group">
<li class="list-group-item">XXXX</li>
<li class="list-group-item">XXXX</li>
<li class="list-group-item">XXXX</li>
<li class="list-group-item">XXXX</li><!--该列表组是可伸缩的,会随着浏览器宽度的变化而变化-->
</ul>

<ul class="list-group">
<li class="list-group-item active">XXXX
<!--徽章图标-->
<span class="badge">12</span>
</li>
<!--list-group-item-success带有样式的列表-->
<li class="list-group-item list-group-item-success">XXXX
<span class="badge">5</span>
</li>
<li class="list-group-item">XXXX
<span class="badge">8</span>
</li>
<li class="list-group-item">XXXX</li>
</ul>

3.10.1默认分页

<ul class="pagination">
<!--disabled禁用状态,此外分页导航还支持大小尺寸,使用.pagination-lg和.pagination-sm分表表示大尺寸的分页导航和小尺寸的分页导航-->
<li class="disabled"><a href="#">&laquo;</a></li>
<!--active当前页-->
<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="#">&raquo;</a></li>
</ul>

3.10.2翻页

<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
<ul class="pager">
<li class="previous disabled"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>