介绍
字体图标组件
字体徒步奥组件无处不在，经常出现在App的底部，网站导航条，登录页面或者注册页面。
示例
<html>
<head>
<style type="text/css">
</style>
<meta charset="UTF-8">
<title>图标</title>
<!--引入Jquery文件-->
<script src="js/jquery-1.12.4.js"></script>
<!--映入bootstap样式文件-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--引入bootstrapjs文件-->
<script src="js/bootstrap.min.js"></script>
<!--可选. 支持响应式设计: 移动端-->
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
</head>
<body>
<div class="container" style="border: 1px solid #3333;">
<div class="row text-center mylist">
<div class="col-xs-3">
<span class="glyphicon glyphicon-comment"></span><br/>
<span class="text">微信</span>
</div>
<div class="col-xs-3">
<span class="glyphicon glyphicon-list-alt"></span><br/>
<span class="text">通讯录</span>
</div>
<div class="col-xs-3">
<span class="glyphicon glyphicon-search"></span><br/>
<span class="text">发现</span>
</div>
<div class="col-xs-3">
<span class="glyphicon glyphicon-user"></span><br/>
<span class="text">我</span>
</div>
</div>
</div>
</body>
</html>
运行结果
注意事项
下拉菜单组件
网页中经常会出现各种各样的下拉菜单，用于显示链接列表或者有上下文的菜单。Bootstrap默认提供了两种下拉菜单组件。
基本下拉菜单
示例
<!--基本下拉菜单-->
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">
请选择
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">咖啡</a></li>
<li><a href="#">红茶</a></li>
<li><a href="#">奶茶</a></li>
<li class="divider"><a href="#"></a></li>
<li><a href="#">北冰洋</a></li>
<li><a href="#">可乐</a></li>
<li><a href="#">雪碧</a></li>
</ul><br />
</div>
运行结果
按钮式下拉菜单
示例
<!--按钮下拉菜单-->
<div class="btn-group">
<button class="btn btn-success">个人中心</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">账户设置</a></li>
<li><a href="#">地址管理</a></li>
<li><a href="#">意见反馈</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
</div>
运行结果
输入框组件
在网页中经常遇到输入框与文字挥着icon图标组合在一起（称为addon）的情况。
示例
<div class="input-group" style="width: 500px;">
<input class="form-control" placeholder="请输入要搜索的内容" type="text" />
<span class="input-group-addon">百度一下</span>
</div><br />
运行结果
百度一下并非是可点击的按钮，可以替换input-group-addon样式来让他变成可点击的按钮。
示例
<div class="input-group" style="width: 500px;">
<input class="form-control" placeholder="请输入要搜索的内容" type="text" />
<span class="input-group-btn">
<button class="btn btn-primary">百度一下</button>
</span>
</div>
运行结果
注意事项
输入框大小
示例
<!--大小-->
<div class="input-group input-group-lg" style="width: 500px;">
<input class="form-control" placeholder="请输入要搜索的内容" type="text" />
<span class="input-group-addon">百度一下</span>
</div><br />
<div class="input-group" style="width: 500px;">
<input class="form-control" placeholder="请输入要搜索的内容" type="text" />
<span class="input-group-addon">百度一下</span>
</div><br />
<div class="input-group input-group-sm" style="width: 500px;">
<input class="form-control" placeholder="请输入要搜索的内容" type="text" />
<span class="input-group-addon">百度一下</span>
</div><br />
运行结果
导航组件
导航是一个网上的重要组成部分，常见的导航包含选项卡导航，胶囊式导航，自适应导航及下拉菜单导航，这些导航都依赖nav类，状态页是公共的。
选项卡导航
示例
<!--选项卡导航-->
<div class="container">
<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>
</div><br />
运行结果
胶囊式导航
示例
<!--胶囊式导航-->
<div class="container">
<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>
</div><br />
运行结果
自适应式导航
示例
<!--自适应式导航-->
<div class="container">
<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>
</div><br /><br />
<div class="container">
<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>
</div><br />
运行结果大屏幕
小屏幕
注意：
使用自适应导航时，需要基于nav-tabs或nav-pills样式。
下拉菜单式导航
示例
<!--下拉菜单式导航-->
<div class="container">
<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>
</div>
运行结果
导航条组件
默认样式
示例
<!--默认样式-->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="img/baidu.png" alt="" style="width: 50px;"/></a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">秒杀</a></li>
<li><a href="#">优惠卷</a></li>
<li><a href="#">PLUS会员</a></li>
<li><a href="#">品牌闪购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">百度时尚</a></li>
<li><a href="#">百度地图</a></li>
</ul>
</nav>
运行结果
表单
示例
<!--表单-->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="img/baidu.png" alt="" style="width: 50px;"/></a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">秒杀</a></li>
<li><a href="#">优惠卷</a></li>
<li><a href="#">PLUS会员</a></li>
<li><a href="#">品牌闪购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">百度时尚</a></li>
<li><a href="#">百度地图</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索内容" />
</div>
<button class="btn btn-primary">搜索</button>
</form>
</nav>
运行结果
按钮，文本和链接
示例
<!--按钮 图片 链接-->
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="img/baidu.png" alt="" style="width: 50px;"/></a>
</div>
<div class="nav navbar-nav">
<button class="btn btn-default navbar-btn">按钮</button>
<span class="navbar-text">文本</span>
<a href="#" class="navbar-link">链接</a>
</div>
</nav>
运行结果
固定在顶部，底部
示例
<!--固定在顶部-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="img/baidu.png" alt="" style="width: 50px;"/></a>
</div>
<div class="nav navbar-nav">
<button class="btn btn-default navbar-btn">按钮</button>
<span class="navbar-text">文本</span>
<a href="#" class="navbar-link">链接</a>
</div>
</nav>
<!--固定在底部-->
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="img/baidu.png" alt="" style="width: 50px;"/></a>
</div>
<div class="nav navbar-nav">
<button class="btn btn-default navbar-btn">按钮</button>
<span class="navbar-text">文本</span>
<a href="#" class="navbar-link">链接</a>
</div>
</nav>
运行结果
响应式导航条
示例
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap基础模板</title>
<!--引入Jquery文件-->
<script src="js/jquery-1.12.4.js"></script>
<!--映入bootstap样式文件-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--引入bootstrapjs文件-->
<script src="js/bootstrap.min.js"></script>
<!--可选. 支持响应式设计: 移动端-->
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
</head>
<body>
<nav class=" nav navbar-default">
<div class="navbar-header">
<!--navbar-toggle样式用于toggle收缩的内容，即navbar-collapse collapse所在的元素-->
<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>
<!--确保无论在宽屏还是窄屏navbar-brand都会显示-->
<a href="#" class="navbar-brand"><img src="img/baidu.png" alt="" style="width: 50px;"/></a>
</div>
<!--屏幕款第小于768px时，该div内的内容默认都会隐藏（通过单继icon-bar所在的图票，可以展开）大于768px时默认显示-->
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav">
<li><a href="#">网页</a></li>
<li><a href="#">视频</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 action="" class="navbar-form navbar-right" >
<div class="form-group">
<input type="text" class="form-control" />
</div>
<button class="btn btn-primary">百度一下</button>
</form>
</nav>
</body>
</html>
运行结果大屏幕
小屏幕
分页组件
默认分页
示例
<!--默认分页-->
<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="#">下一页</a></li>
</ul><br />
运行结果
分页大小
示例
<!--分页大小-->
<ul class="pagination pagination-lg">
<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="#">下一页</a></li>
</ul><br />
<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="#">下一页</a></li>
</ul><br />
<ul class="pagination pagination-sm">
<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="#">下一页</a></li>
</ul>
运行结果
翻页
示例
<!--翻页-->
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul><br /><br />
运行结果
两端对齐
示例
<!--两端对齐-->
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
运行结果
缩略图组件
示例
<!--基本-->
<div class="row">
<div class="col-md-3 col-xs-6">
<a class="thumbnail" href="#">
<img src="img/img1.jpg" alt="" />
</a>
</div>
<div class="col-md-3 col-xs-6">
<a class="thumbnail" href="#">
<img src="img/img2.jpg" alt="" />
</a>
</div>
<div class="col-md-3 col-xs-6">
<a class="thumbnail" href="#">
<img src="img/img3.jpg" alt="" />
</a>
</div>
<div class="col-md-3 col-xs-6">
<a class="thumbnail" href="#">
<img src="img/img4.jpg" alt="" />
</a>
</div>
</div>
运行结果大屏幕
小屏幕
添加文件和按钮
示例
<!--伴随一些图片和按钮-->
<div class="row text-center">
<div class="col-md-3 col-xs-6">
<div class="thumbnail" style="width: 200px;">
<img src="img/img1.jpg" alt="" />
<div class="caption">
<h3>春天来了</h3>
<p>是但是犯得上犯得上犯得上反对鬼地方更多大师傅大师傅对否。</p>
<p><a href="#" role="button" class="btn btn-primary">查看详情</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail" style="width: 200px;">
<img src="img/img2.jpg" alt="" />
<div class="caption">
<h3>春天来了</h3>
<p>是但是犯得上犯得上犯得上反对鬼地方更多大师傅大师傅对否。</p>
<p><a href="#" role="button" class="btn btn-primary">查看详情</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail" style="width: 200px;">
<img src="img/img3.jpg" alt="" />
<div class="caption">
<h3>春天来了</h3>
<p>是但是犯得上犯得上犯得上反对鬼地方更多大师傅大师傅对否。</p>
<p><a href="#" role="button" class="btn btn-primary">查看详情</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail" style="width: 200px;">
<img src="img/img4.jpg" alt="" />
<div class="caption">
<h3>春天来了</h3>
<p>是但是犯得上犯得上犯得上反对鬼地方更多大师傅大师傅对否。</p>
<p><a href="#" role="button" class="btn btn-primary">查看详情</a></p>
</div>
</div>
</div>
</div>
运行结果大屏幕
小屏幕
媒体对象组件
示例
<div class="media">
<div class="media-left">
<img src="img/img6.jpg" alt="" />
</div>
<div class="media-body">
<h4 class="media-heading">《敢死队》</h4>
<p>大师傅打发范德萨发梵蒂冈反对梵蒂冈梵蒂冈的梵蒂冈地方官豆腐干豆腐干梵蒂冈梵蒂冈豆腐干豆腐干豆腐干豆腐干地方梵蒂冈地方
dsfdsfdsfdsfdsfsdfdsfsdfdsfdsfdsfdsfsdfdsfdsfdsfdsfdsfdsfdsfsdfdsfdsfdsfdsfdsfdsfdsfsdfffffffffffff
撒旦范德萨范德萨发大水发射点犯得上反对地方官梵蒂冈地方犯得上反对犯得上犯得上房贷首付但是犯得上犯得上发生</p>
<small>演员:施瓦辛格</small>
</div>
</div>
运行结果
示例
<div class="media">
<div class="media-body text-right">
<h4 class="media-heading">《敢死队》</h4>
<p>大师傅打发范德萨发梵蒂冈反对梵蒂冈梵蒂冈的梵蒂冈地方官豆腐干豆腐干梵蒂冈梵蒂冈豆腐干豆腐干豆腐干豆腐干地方梵蒂冈地方dsfdsfdsfdsfdsfsdfdsfsdfdsfdsfdsfdsfsdfdsfdsfdsfdsfdsfdsfdsfsdfdsfdsfdsfdsfdsfdsfdsfsdfffffffffffff撒旦范德萨范德萨发大水发射点犯得上反对地方官梵蒂冈地方犯得上反对犯得上犯得上房贷首付但是犯得上犯得上发生</p>
<small>演员:施瓦辛格</small>
</div>
<div class="media-right">
<img src="img/img6.jpg" alt="" />
</div>
</div>
运行结果
列表组组件
示例
<div class="container" style="width: 450px; border: 1px red solid;">
<h3>新书热卖榜</h3>
<ul class="list-group">
<li class="list-group-item">哈哈哈</li>
<li class="list-group-item">对方的</li>
<li class="list-group-item">对否</li>
<li class="list-group-item">反对反对</li>
<li class="list-group-item">地方的地方</li>
</ul>
</div>
运行结果
示例
<div class="container" style="width: 450px; border: 1px red solid;">
<h3>新书热卖榜</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-success">哈哈哈</li>
<li class="list-group-item list-group-item-danger">对方的</li>
<li class="list-group-item list">对否</li>
<li class="list-group-item list-group-item-info">反对反对</li>
<li class="list-group-item list-group-item-warning">地方的地方</li>
</ul>
</div>
运行结果
示例
<div class="container" style="width: 450px; border: 1px red solid;">
<h3>新书热卖榜</h3>
<ul class="list-group">
<li class="list-group-item">
哈哈哈
<span class="badge">月售1000</span>
</li>
<li class="list-group-item">
对方的
<span class="badge">月售100</span>
</li>
<li class="list-group-item">
对否
<span class="badge">月售1050</span>
</li>
<li class="list-group-item">
反对反对
<span class="badge">new!</span>
</li>
<li class="list-group-item">
地方的地方
<span class="badge">月售1000</span>
</li>
</ul>
</div>
运行结果
