Bootstrap 组件
Bootstrap 组件
1.字体图标
Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片,用于显示图标,这些font图片称为Glyphicons--象形文字图标。
可以使用<i>或<span>标签来配合使用,具体如下:
//使用小图标
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>
//也可以结合按钮
<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
注:可以对字体图标设置字体尺寸font-size、颜色color和应用文本阴影text-shadow。
2.按钮组
按钮组就是多个按钮集成在一个容器里形成独有的效果。
//基本格式
<div class="btn-group">
<button type="button"class="btn btn-default">左</button>
<button type="button"class="btn btn-default">中</button>
<button type="button"class="btn btn-default">右</button>
</div>
//将多个按钮组整合起来便于管理
<div class="btn-toolbar">
<div class="btn-group">
<button type="button"class="btn btn-default">左</button>
<button type="button"class="btn btn-default">中</button>
<button type="button"class="btn btn-default">右</button>
</div>
<div class="btn-group">
<button type="button"class="btn btn-default">1</button>
<button type="button"class="btn btn-default">2</button>
<button type="button"class="btn btn-default">3</button>
</div>
</div>
//设置按钮组大小
<div class="btn-group btn-group-lg">
<div class="btn-group>
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">
3.下拉菜单
.dropdown { position:relatie; }
.dropdown-menu { position:absolute; top:100%; ... }
.dropdown-toggle 出现点击效果
data-toggle="dropdown" JS选择器用
使用:保证下拉菜单与触发(button或nav)在同一父元素下。
3.1按钮的下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"data-toggle="dropdown">
下拉菜单<span class="caret"></span>
</button>
<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>
</div>
//设置向上触发
<div class="dropup">
//菜单项居右对齐,默认值是dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">
//设置菜单的标题,不要加超链接
<li class="dropdown-header">网站导航</li>
//设置菜单的分割线
<li class="divider"></li>
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li>
//让菜单默认显示
<div class="dropdown open">
3.2按钮组的下拉菜单
<div class="btn-group">
<button type="button"class="btn btn-default">左</button>
<button type="button"class="btn btn-default">中</button>
<button type="button"class="btn btn-default">右</button>
<button class="btn btn-default dropdown-toggle"data-toggle="dropdown">
下拉菜单<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
</ul>
</div>
注:没有class="dropdown",因为.btn-group有定位{ position:relatie; }
//分裂式按钮下拉菜单
<div class="btn-group">
<button type="button"class="btn btn-default">下拉菜单</button>
<button class="btn btn-default dropdown-toggle"data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
</ul>
</div>
3.3导航栏的下拉菜单
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">iOS</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
4.输入框
·向 <form> 元素添加 role="form"。
·把标签和控件放在一个带有 class .form-group 的<div> 中。这是获取最佳间距所必需的。
·向所有的文本元素 <input>、<textarea>和 <select>添加 class ="form-control" (焦点事件)
·<div class="input-group-addon">¥</div>或<span class="input-group-addon">¥</span>放置额外内容,二者是完全等效的。
4.1向input输入框添加文本或单复选框
//添加文本
<div class="input-group"> //为input添加边距
<span class="input-group-addon">¥</span>
<input type="text" class="form-control">
</div>
//添加复选框
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
4.2向input输入框添加按钮与下拉菜单
用 .input-group-btn代替 .input-group-addon
//添加按钮
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
//添加下拉菜单
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li> <a href="#">功能</a> </li>
<li> <a href="#">另一个功能</a> </li>
</ul>
</span>
</div>
4.3输入框组的大小
您可以通过向 .input-group 添加相对表单大小的class(比如 .input-group-lg、input-group-sm)来改变输入框组的大小。输入框中的内容会自动调整大小。
5.导航元素
5.1基本
对ul添加.nav .nav-tabs或.nav-pills
//标签式的导航菜单
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
//基本的胶囊式导航菜单
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
5.2两端对齐
对ul追加.nav-justified
//两端对齐的导航元素
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
5.3垂直的导航菜单
对ul追加 .nav-stacked
//垂直的胶囊式导航菜单
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
5.4禁用链接.disable与显示.active
对每个li添加了 .disabled,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态。
对每个li添加了 .active,则会创建一个蓝色的链接,。
class 只会改变 <a>的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript来禁用链接。
<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li class="disabled"><a href="#">iOS(禁用链接)</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
5.5动态标签
①对li追加data-toggle="tab/pill"(看ul是nav-tabs还是nav-pills)和href="#???"
②要切换的标签最外层用.tab-content的div包围(只tab-content,没有pill-content)
③对各个具体标签加上id和.tab-pane(只tab-pane,没有pill-pane)
④对第一个li加.active选中状态,对对应div加.in。默认div隐藏,加in显示。
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">首页</a></li>
<li><a data-toggle="pill" href="#menu1">菜单1</a></li>
<li><a data-toggle="pill" href="#menu2">菜单2</a></li>
<li><a data-toggle="pill" href="#menu3">菜单3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in">
<h3>首页</h3>
<p>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>这是菜单 1显示的内容。这是菜单 1显示的内容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 2</h3>
<p>这是菜单 2显示的内容。这是菜单 2显示的内容。</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>菜单 3</h3>
<p>这是菜单 3显示的内容。这是菜单 3显示的内容。</p>
</div>
</div>
6.导航栏,导航栏包含5的导航菜单
6.1创建一个默认的导航栏的步骤如下:
1向 <nav>标签添加.navbar、.navbar-default。添加 role="navigation",有助于增加可访问性。
2向 <div>元素添加一个标题div .navbar-header,内部包含了带有.navbar-brand 的<a> 元素。这会让文本看起来更大一号。
3为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
注:3中我们添加到是.navbar-nav,而不是.nav-tabs和.nav-pills因为这两个与导航栏.navbar间距不匹配,只能是.navbar-nav
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li class="divider"></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
6.2响应式导航栏
当宽度够宽时,button不显示,<div class="" id="">显示
当宽度不够宽,button显示,<div class="" id="">隐藏
<a class="navbar-brand" href="#">菜鸟教程</a>未被<div class="" id="">包含,总显示
代码:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
6.3导航栏中的表单
注:不在form里的button添加.navbar-btn,添加左浮是因为form或div是块,占整行。
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交按钮</button>
</form>
<button type="button" class="btn btn-default navbar-btn">
导航栏按钮
</button>
</div>
</div>
</nav>
6.4导航栏中的文本
如果需要在导航中包含文本,请使用 class .navbar-text。这通常与<p> 标签一起使用,确保适当的前导和颜色。
实例
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<p class="navbar-text">Runoob用户登录</p>
</div>
</div>
</nav>
6.5带图标的导航链接
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>
</ul>
</div>
</nav>
6.6固定到顶部
向 .navbar class 添加class .navbar-fixed-top
因为position:fixed脱离正常流,为了防止导航栏与页面主体中的其他内容的顶部相交错,请向<body> 标签添加至少50 像素的padding-top,内边距的值根据您的需要设置。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
······
6.7固定到底部
向 .navbar class 添加class .navbar-fixed-bottom。
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
······
6.8静态的顶部
即随着页面一起滚动的导航栏,可以什么也不加,默认就是静态的顶部。
或者添加 .navbar-static-top class。该class 不要求向<body> 添加内边距(padding)。
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
······
6.9反色的导航栏
为了创建一个带有黑色背景白色文本的反色的导航栏,只需要简单地向 .navbar class添加 .navbar-inverseclass 即可。
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
······
7.面包屑导航
为ul添加.breadcrumb class即可。
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
8.分页
//默认分页
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
//分页大小
<ul class="pagination pagination-lg"> //大
<ul class="pagination "> //中
<ul class="pagination pagination-sm"> //小
//分页状态 .active .disabled
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li> //深色显示
<li class="disabled"><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="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
//翻页,带左(.previous)右(.next)对齐
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
//翻页,带状态.disable
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
9.标签
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
10.徽章(Badges)
徽章与标签相似,主要的区别在于徽章的边角更加圆滑。一般用于数字。
<a href="#">Mailbox <span class="badge">50</span></a>
<a href="#">Mailbox <span class="badge">0</span></a>
<a href="#">Mailbox <span class="badge"></span></a>
<li class="active">
<a href="#"> 首页<span class="badge pull-right">42</span></a>
</li>
<li>
<a href="#">简介 <span class="badge">42</span></a>
</li>
11.超大屏幕,套一个.jumbotron的div
代码1:原始
<div class="container">
<h1>欢迎登陆页面!</h1>
<p>这是一个超大屏幕(Jumbotron)的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
代码2:套在container里,圆角
<div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面!</h1>
<p>这是一个超大屏幕(Jumbotron)的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>
代码3:套在container外,方角
<div class="jumbotron">
<div class="container">
<h1>欢迎登陆页面!</h1>
<p>这是一个超大屏幕(Jumbotron)的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>
结果比较:
12.页面标题
设置了边距,并在标题最后增加了分割线
<div class="page-header">
<h1>页面标题实例
<small>子标题</small>
</h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>
13.缩略图
功能:
1为图片添加四个像素的内边距(padding)和一个灰色的边框。
2当鼠标悬停在图像上时,会动画显示出图像的轮廓。
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图">
</a>
14.警告
//基本警告
<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>
//可关闭的警告
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×
</button>
成功!很好地完成了提交。
</div>
//带链接的警告
<div class="alert alert-success">
<a href="#" class="alert-link">成功!很好地完成了提交。</a>
</div>
15.进度条
使用 CSS3 过渡和动画来获得该效果。
Internet Explorer 9 及之前的版本和旧版的 Firefox不支持该特性,Opera 12不支持动画。
注:role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"没什么用
//基本的进度条
外层.progress 的<div>,
内层.progress-bar style="width:60%;"的<div>。
<div class="progress">
<div class="progress-bar" style="width: 40%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
<span class="sr-only">40% 完成</span>
</div>
</div>
//不同样式的进度条
外层<div>:.progress
内层<div>:.progress-bar .progress-bar-* style="width:60%;"
* 可以是 success、info、warning、danger。
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:90%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:30%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:20%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:10%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>
</div>
//条纹的进度条
外层<div>:.progress .progress-striped
内层<div>:.progress-bar .progress-bar-* style="width:60%;"
* 可以是 success、info、warning、danger。
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:90%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>
</div>
//动画的进度条
外层<div>:.progress .progress-striped .active
内层<div>:.progress-bar .progress-bar-* style="width:60%;"
* 可以是 success、info、warning、danger。
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:90%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>
</div>
//堆叠的进度条
多个进度条放在相同的 .progress 中即可实现堆叠
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar progress-bar-info" style="width: 30%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
16.多媒体对象(Media Object)。
这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
//media
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="媒体对象">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
//media-list
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#"><img class="media-object" src="" alt=""></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。</p>
<!-- 嵌套的媒体对象 -->
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="" alt=""></a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。</p>
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-left" href="#"><img class="media-object" src="" alt=""></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。</p>
</div>
</li>
</ul>
17.列表组
为列表添加样式
向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
//向列表组添加徽章
我们可以向任意的列表项添加徽章组件,它会自动定位到右边。
只需要在 <li> 元素中添加 <span class="badge"> 即可。
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item"> <span class="badge">新</span> 24*7支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
//可以用<div>代替<ul>,<a>代替<li>
<div>
<a href="#" class="list-group-item active">免费域名注册</a>
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">24*7 支持</h4>
<p class="list-group-item-text">我们提供 24*7支持。</p>
</a>
</div>
18.面板(Panels)。
面板组件用于把 DOM 组件插入到一个盒子中。
创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和class .panel-default 即可
<div class="panel panel-default">这是一个基本的面板 </div>
//添加标题
添加内层<div> :.panel-heading ,其内可带有 .panel-title 的 <h1>-<h6>
//添加主体
添加内层<div> :.panel-body
//添加注脚
添加内层<div>: .panel-footer
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">带有 title 的面板标题 </h3>
</div>
<div class="panel-body">这是一个基本的面板</div>
<div class="panel-footer">面板脚注</div>
</div>
//带语境色彩的面板
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">面板标题</h3></div>
<div class="panel-body">这是一个基本的面板</div>
</div>
//带表格的面板
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">面板标题</h3></div>
<div class="panel-body">这是一个基本的面板</div>
<table class="table">
<th>产品</th><th>价格</th>
<tr><td>产品A</td><td>200</td></tr>
<tr><td>产品B</td><td>400</td></tr>
</table>
</div>
19.Well
Well是一种会引起内容凹陷显示或插图效果的容器 <div>。
为了创建 Well,只需要简单地把内容放在带有class .well 的<div> 中即可。、
<div class="well">您好,我在 Well中!</div>
//使用可选类 well-lg 或 well-sm 来改变Well 的尺寸大小。这两个类会影响内边距(padding)
<div class="well well-lg">您好,我在大的 Well中!</div>
<div class="well well-sm">您好,我在小的 Well中!</div>