一、Glyphicons字体图标
1、使用
(1)图标和文本之间要加
空格
(2)不
要和其他组件混合使用,要创建一个嵌套的<span>标签,将图标类用到它上面
(3)只对
内容为空的元素起作用
(3)改变图标
字体文件的位置: . . /fonts/
如果修改位置,应在Less源码文件中修改@icon-font-path和/或@icon-font-name变量
利用Less编译器提供的相对URL地址选项
修改预编译CSS文件中的url()地址
2、例子
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
二、下拉菜单
1、例子:将下拉菜单触发器和下拉菜单都包在.dropdown里
2、对齐
右对齐:为.dropdown-menu添加.dropdown-menu-right。不建议用.pull-right类。
导航条中需要,用.pull-right的mixin版本。
3、标题:<li class="
dropdown-header"></li>标明一组动作
4、分割线:<li role="presentation" class="
divider"></li>
5、禁用的菜单项:<li role="presentation" class="
disabled"></li>
三、按钮组
为.btn-group中的元素
应用工具提示或弹出框时,须指定container:'body'选项
1、基本实例
<div class="
btn-group">
<button type="button" class="
btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
2、按钮工具栏
<div class="
btn-toolbar" role="toolbar">
<div class="
btn-group">...</div>
<div class="btn-group">...</div>
</div>
3、尺寸:<div class="btn-group
btn-group-lg/md/sm/xs">…</div>
4、嵌套:把.btn-group放入另一个.btn-group中
5、垂直排列:包在<div class="
btn-group-vertical"></div>中
6、两端对齐排列的按钮组
(1)<a>元素:将
.btn元素包在<div class="
btn-group
btn-group-justified"></div>中
(2)<button>元素:将每个按钮包进一个按钮组中
四、按钮式下拉菜单
将任意一个按钮放在.btn-group中,然后加入适当的菜单标签
1、单按钮下拉菜单
<div class=" btn-group">
<button type="button" class="btn btn-primary
dropdown-toggle"></button>
</div>
2、分裂式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-danger"></button>
<button type="button" class="btn btn-danger
dropdown-toggle"
data-toggle="dropdown"></button>
</div>
3、尺寸
<div class="btn-group">
<button class="btn btn-default
btn-lg dropdown-toggle" data-toggle="dropdown"></button>
</div>
4、向上弹出式菜单:给
父元素加
.dropup类
<div class="btn-group
dropup">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
</div>
五、输入框组
在
<input>前/后加文字或按钮实现扩展,为.input-group赋予
.input-group-addon类即可添加额外元素
工具提示和弹出卡U那个需要特别设置:container:'body' 参数
不要和其他组件混用
1、基本实例
<div class="input-group">
<span class="
input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username" />
<span class="
input-group-addon">.00</span>
</div>
2、尺寸:为 .input-group添加相应尺寸类,内部元素自动调整尺寸
<div class="input-group
input-group-lg"></div>
3、作为额外元素的多选框和单选框
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox/radio" />
</span>
<input type="text" class="form-control" />
</div>
4、作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套,不是
.input-group-addon,
而是添加
.input-group-btn,
包裹按钮元素
<div class="input-group">
<span class="
input-group-btn">
<button class="btn btn-default" type="button">按钮</button>
</span>
<input type="text" class="form-control" />
</div>
5、作为额外元素的按钮式下拉菜单
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">
"Action"
<span class="caret"></span>
</button>
<ul class="
dropdown-menu" role="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</div>
6、作为额外元素的分裂式按钮下拉菜单
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex='-1'></button>
<button type="button" class="btn btn-default
dropdown-toggle"
data-toggle="dropdown" tabindex='-1'>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="
dropdown-menu"
role="menu">
<li>…</li>
</ul>
</div>
</div>
六、导航 .nav
1、标签页
(1).nav-tabs依赖 .nav类
(2)<ul class="
nav nav-tabs"
role="tablist">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">profile</a></li>
<li role="presentation"><a href="#">profile</a></li>
</ul>
(3)需要用标签页的javaScript插件
2、胶囊式标签页
(1)其他同上,但是使用.nav-pills类
(2)也可以垂直方向:
添加 .nav-stacked类-------<div class="nav nav-pills
nav-stacked"></div>
3、两端对齐的标签页
<ul class="nav nav-tabs
nav-justified" role="tablist">
<li role="presentation" class="active">
<a href="#">Home</a>
</li>
</ul>
4、禁用的链接----链接功能不受影响----
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="
disabled"><a href="#">Disabled link</a></li>
</ul>
5、添加下拉菜单
用一点额外html代码并加入下拉菜单插件的JavaScript插件
带下拉菜单的胶囊式标签页:
<ul class="nav navpills" role="tablist">
<li role=presentation" class="dropdown">
<a class="
dropdown-toggle"
data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="
dropdown-menu"
role="menu">
</ul>
</li>
七、导航条
1、默认样式的导航条
内容折行怎么办?
(1)减少元素宽度、在某些尺寸的屏幕上隐藏一些元素
(2)JavaScript
(3)修改视口的阈值:@grid-float-breakpoint 比它大时水平排列,比它小时折叠排列
2、Brand image
<nav class="navbar
navbar-default" role="navigation">
<div class="container-fluid">
<div class="
navbar-header">
<a class="
navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
3、表单
将表单放置在
.nav-form中
<form class="
nav-form
nav-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>
4、按钮
在<form>外的<button>加上.navbar-btn,可让它在导航条垂直居中
<button type="button" class="btn btn-default
navbar-btn">按钮</button>
5、文本
把文本包裹在.navbar-text中时,常用<p>标签
<p class="
navbar-text"></p>
6、非导航的链接
使用
.navbar-link类:<p class="navbar-left navbar-right">段落内容<a href="#" class="
navbar-link">链接</a></p>
7、组件排列
通过添加.navbar-left和.navbar-right类让导航链接、表单、按钮或文本对齐。
导航条不支持多个.navbar-right类
8、固定在顶部
-------
.navbar-fixed-top
还可包含一个.container或.container-fluid容器,从而让导航条居中,并在两侧添加padding
<nav class="navbar navbar-default
navabar-fixed-top" role="navigator">
<div class="container">
</div>
</nav>
需要为body元素设置padding
9、固定在底部------ .navbar-fixed-bottom
<nav class="navbar navbar-default
navbar-fixed-bottom" role="navigation">
<div class="container">
</div>
</nav>
10、静止在顶部----- .navbar-static-top
添加.navbar-static-top类,即可创建一个与页面等宽的导航条,随页面向下滚动而消失。
<nav class="navbar navbar-default
navbar-static-top" role="navigation">
<div class="container">
</div>
</nav>
11、反色的导航条----- .navbar-inverse
<nav class="navbar
navbar-inverse" role="navigation"></nav>
八、路径导航
在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过css的:before和content属性添加了。
九、分页
1、默认分页
<nav>
<ul class="
pagination pagination-lg/sm">
<li><a href="#">«</a></li>
<li class="
disabled"><a href="#">1</a></li> //此处的a也可换成
<span>标签,可以保持需要的样式并移除点击功能
<li class="
active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
2、翻页
<nav>
<ul c;ass="
pager">
<li class="previous
disabled"><a href="#">previous</a></li>
<li class="next"><a href="#">next</a></li>
</ul>
</nav>
十、标签
<span class="label
label-default/primary/success/info/warning/danger" /></span>
如果标签数量多,就要为每个标签设置为display:
inline-block;
十一、徽章
给链接、导航等元素
嵌套<span class="badge">元素。如果没有未读信息,徽章组件自动隐藏(IE8除外)
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">
<a href="#">Home
<span class="badge">12</span></a>
</li>
<li role="presentation">
<a href="#">Home</a>
</li>
<li role="presentation">
<a href="#">Home
<span class="badge">3</span></a>
</li>
</ul>
十二、巨幕
<div class="
jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果要让巨幕组件和浏览器同宽且无圆角,请把此组件放在所有.container外,且在组件里添加一个.container元素。
<div class="jumbottron">
<div class="container"></div>
</div>
十三、页头----page-header
为h1标签增加适当空间,并支持h1标签内嵌small元素的默认效果和大部分其他组件
<div class="
page-header">
<h1>标题
<small>小标题</small></h1>
</div>
十四、缩略图
1、默认样式
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="…" />
</a>
</div>
…
</div>
2、自定义内容------添加额外标签,可加入任何类型的html内容
<div class="row">
<div class="col-sm-6 col-md-4">
<img data-src="holder.js/300x300" alt="…" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>
<a href="#" class="btn btn-primary" role="button">按钮</a>
<a href="#" class="btn btn-default" role="button">按钮2</a>
</p>
</div>
</div>
</div>
十五、警告框
1、例子
.alert类是必须设置的,另外还有
.alert-success/info/warnimg/danger四个类,没有默认类
<div class="alert alert-success"
role="alert">…</div>
2、可关闭的警告框------- .alert-dismissible
如果提供该功能,要用jQuery警告框插件
务必给
<button>添加
data-dismiss="alert"属性
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close"
data-dismiss="alert">
<span aria-hidden="true">内容</span>
<span class="sr-only">关闭</span>
</button>
<strong>Warning!</strong>
Better check yourself, you're not looking too good.
</div>
3、警告框中的链接------.alert-link
<div class="alert alert-success" role="alert">
<a href="#" class="
alert-link">. . . </a>
</div>
十六、进度条
IE9及以下不支持
1、基本实例
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}
<span class="sr-only">60% complete</span>
</div>
2、带提示标签的
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"}
</div>
3、进度值较低的情况----min-width:20px;
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="width:2%;">
2%
</div>
</div>
4、根据情景变化效果--
--
-progress-bar-success/info/warning/danger
<div class="progress">
<div class="progress-bar
progress-bar-success/info/warnimg/danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:20%;">
<span class="sr-only">20% complete</span>
</div>
</div>
5、条纹效果(IE8不支持)
---
--
progress-bar-striped
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40% complete</span>
</div>
</div>
6、动画效果---- .active
<div class="progress">
<div class="progress-bar progress-bar-striped
active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40%</span>
</div>
</div>
7、堆叠效果
<div class="progress">
<div class="progress-bar progress-bar-success" style="35%">
<span class="sr-only">35 complete</span>
</div>
<div class="progress-bar progress-bar-success" style="20%">
<span class="sr-only">20 complete</span>
</div>
<div class="progress-bar progress-bar-success" style="10%">
<span class="sr-only">10 complete</span>
</div>
</div>
十七、媒体对象
1、默认
允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)
<div class="
media">
<a class="
media-left" href="#">
<img src="..." alt="...">
</a>
<div class="
media-body">
<h4 class="
media-heading">Media heading</h4>
...
</div>
</div>
2、媒体对象列表
<ul class="
media-list">
<li class="
media">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
.media-right应在.media-body后面
用一点额外标记,就能在列表内使用媒体对象组件(对评论或文章列表很有用)。
十八、列表组
1、基本实例
<ul class="
list-group">
<li class="
list-group-item">内容</li>
</ul>
2、徽章
<ul class="list-group">
<li class="list-group-item">
<span class="
badge">14</span>
Cras justo odio
</li>
</ul>
3、链接
分别用div代替ul,用a代替li
<
div class="list-group">
<
a href="#" class="list-group-item
active">内容</a>
<a href="#" class="list-group-item">内容</a>
<a href="#" class="list-group-item">内容</a>
</div>
4、被禁用的条目
<div class="list-group">
<a href="#" class="
list-group-item disabled">内容</a>
</div>
5、情境类
<ul class="list-group">
<li class="list-group-item
list-group-item-success/info/warning/danger">内容</li>
</ul>
6、定制内容
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="
list-group-item-heading">List group item heading</h4>
<p class="
list-group-item-text">...</p>
</a>
</div>
十九、面板
1、基本实例
默认的.panel组件只是设置border和padding
<div class="panel panel-default">
<div class="panel-body">内容</div>
</div>
2、带标题的面板---
panel-heading
<div class="panel panel-default">
<div class="panel-heading">标题</div>
</div>
如果
为链接设置颜色,一定要把链接放在带.panel-title类的标题标签里
3、带脚注的面板----按钮或次要文本放入.
panel-footer容器内
3、情境效果
<div class="panel
panel-primary/success/info/warning/danger">...</div>
4、带表格的面板
不需要边框的表格添加
.table类,如果有.panel-body的面板,为上方添加边框会有分隔效果
5、带列表组的面板
<div class="
panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body"></div>
<ul class="
list-group">
<li class="
list-group-item"></li>
</ul>
</div>
二十、具有响应式特性的嵌入内容
<div class="embed-responsive embed-responsive-16by9">
<iframe class="
embed-responsive-item" src="..."></iframe>
</div>
embed-responsive-item类:让最终样式与其他属性相匹配。
二一、Well
<div class="well">...</div>-----能有嵌入的简单效果
如果添加well-sm/lg等,可以控制其padding和圆角设置
<div class="
well well-sm/lg">...</div>