排版
标题
- 可以使用
<h1>...<h6>
,也可以使用类名h1~h6 - 使用
<small>
制作副标题
段落
默认字号:14p,line-height:1,42857143,颜色为深灰色,字体为sans-serif(可根据需要进行修改)
强调内容
- 添加类名
lead
<small>
<strong>
<em>
<cite>
粗体
<b>
<strong>
斜体
<em>
<i>
强调相关的类
- .text-muted:提示,使用浅灰色(#999)
- .text-primary:主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险,使用褐色(#a94442)
文本对齐风格
- .text-left:左对齐
- .text-center:居中对齐
- .text-right:右对齐
- .text-justify:两端对齐(各浏览器解析不一致,慎用)
列表
.list-unstyled
去点列表.list-inline
内联列表,把垂直列表变为水平列表,去掉项目编号<dl><dt><dd>
定义列表.dl-horizontal
水平定义列表
代码
<code>
单行内联代码<kbd>
用户输入代码<pre>
多行块代码- 为
<pre>
元素添加.pre-scrollable
类,可以控制代码块区域最大高度为340px。
注意:不管是用哪种代码风格,代码中遇到小于号用’<’代替,大于号用’>’代替
表格
表格类型
.table
基础表格.table-striped
斑马线表格.table-bordered
带边框的表格.table-hover
鼠标悬停高亮的表格.table-condensed
紧凑型表格.table-responsive
响应型表格
表格行的类
<tr>
.active
表示当前活动的信息.success
表示成功或正确的行为.info
表示中立的信息或行为.warning
表示警告,需要特别注意.danger
表示危险或可能是错误的行为
表单
<input><select><textarea>
.gorm-group
内联表单<lable>
标签里加.sr-only
标签将隐藏
<form>
.form-horizontal
水平表单(标签居左,表单控件居右).form-inline
内联表单
表单控件
input
.form-control
定制效果
下拉选项框select
multiple
统一样式风格
文本域textarea
.form-control
无需设置cols属性
复选框checkbox和单选radio
.checkbox
.radio
复选框和单选按钮水平排列
label
分别添加
.checkbox-inline
.radio-inline
按钮类型
<button>
- input[type=’submit’]
- input[type=’button’]
- input[type=’reset’]
表单控件大小
<input><textarea><select>
.input-sm
让控件比正常大小更小.input-lg
让控件比正常大小更大
表单控件状态(焦点状态)
.form-control
//焦点状态是通过伪类:focus 实现的。
表单控件状态(禁用状态)
- disabled 不过如果fieldset设置了disabled,但legend中如果有输入框的话,这个输入框无法被禁用。
表单控件状态(验证状态)
.has-warning
警告(黄色).has-error
错误(红色).has-success
成功(绿色)
若想显示相应的icon,只需在上面的属性基础上添加
.has-feedback
同时必须在表单中添加一个
元素
表单提示信息
.help-block
块状提示信息
按钮
.btn
基本按钮.btn-default
默认按钮 在.btn
基础上添加
//强烈建议使用button或a标签来制作按钮
定制风格
.btn-primary
主要按钮.btn-success
成功按钮.btn-info
信息按钮.btn-waring
警告按钮.btn-danger
危险按钮.btn-link
链接按钮
按钮大小
.btn-lg
大型按钮.btn-sm
小型按钮.btn-xs
超小型按钮
块状按钮
.btn-block
可以让按钮充满整个容器
按钮状态-活动状态
对于<button>
元素添加伪类实现
:hover
悬浮状态:active
点击状态:focus
焦点状态
对于<a>
元素通过添加相应的类实现
按钮状态-禁用状态
- 在标签中添加
disabled
属性,可以禁止元素的默认行为 - 或添加类名
.disabled
,不会禁止按钮的默认行为
图像
.img-responsive
响应式图片.img-rounded
圆角图片.img-circle
圆形图片.img-thumbnail
缩略图片
图标
.glyphicon
所有icon都是以glyphicon-
前缀的类名开始,然后后缀表示图标的名称。
网格系统
工作原理
基本用法
列偏移
- col-md-offset-* 向右偏移,星号代表要便宜的列组合数
列排序
.col-md-push-*
.col-md-pull-*
菜单、按钮及导航
下拉菜单
<div>
添加.dropdown
<button>
添加.dropdown-toggle
data-toggle="dropdown"
<ul>
添加.dropdown-menu
下拉分割线
添加空的<li>
并给这个<li>
添加.divider
菜单标题
.dropdown-header
对齐方式
- 在
<ul>
添加.pull-left
或.dropdown-menu-left
默认是左对齐 - 在
<ul>
添加.pull-right
或.dropdown-menu-right
右对齐
下拉菜单(菜单项状态)
- :hover 悬浮状态
- :focus 焦点状态
- .active 当前状态
- .disabled 禁用状态
按钮
按钮组
.btn-group
不管是用什么标签,.btn-group
容器里的标签元素需要带有类名.btn
按钮工具栏
将按钮组.btn-group
按组放在一个大的容器.btn-toobar
中
.btn-group-lg
大按钮组.btn-group-sm
小按钮组.btn-group-xs
超小按钮组
嵌套分组
下拉菜单和普通按钮排列在一起,实现类似于导航菜单的效果,只需将.dropdown
的容器换成btn-group
。
垂直分组
只要把水平分组的.btn-group
换成.btn-group-vertical
即可
等分按钮
只需在按钮组.btn-group
追加.btn-group-justified
按钮下拉菜单
把div.dropdown
换成div.btn-group
按钮的向上向下三角形
- 在
<button>
标签中添加<span calss="caret"></span>
向下三角形 - 在
.btn-group
类上追加.dropup
向上三角形
向上弹起的下拉菜单
- 在
.btn-group
类上添加.dropup
- 如果是普通向上糖醋下拉菜单,只需在
.dropdown
添加.dropup
导航
导航类型
.nav-tabs
在原导航.nav
上追加此类名.nav-pills
胶囊形导航.nav-stacked
垂直堆叠导航注意:在胶囊形导航基础上添加nav-justified
自适应导航。需要配合.nav-pills
或.nav-stacked
一起使用
导航加下拉菜单(二级导航)
- 只需将li当作父容器,实用类名
.dropdown
,同时在li
中嵌套另一个列表ul
。 - 为ol添加
.breadcrumb
类 面包屑式导航
导航条,分页导航
导航条
基础导航条
- 首先中执着导航的列表
(<ul class="nav")
基础上添加类名navbar-nav
- 在列表外部添加一个容器
(div)
,并且使用类名navbar
和navbar-default
为导航条添加标题、二级菜单及状态
|
|
带表单的导航条
.navbar-form
导航条中的按钮、文本和链接
除了navbar-brand中的a元素和navbar-nav的ul和navbar-form 之外,还可以使用其他元素
.navbar-btn
导航条中的按钮.navbar-text
导航条中的文本.navbar-link
导航条中的普通链接
需要配合navbar-brand,navbar-nav使用,且数量不能超过2个
固定导航条
.navbar-fixed-top
导航条固定住浏览器窗口顶部.navbar-fixed-bottom
导航条固定住浏览器窗口底部
由于导航条默认高度是50px,页面主内容顶部和底部都被固定导航条给遮住了,解决办法:
响应式导航条
- 保证主窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入
.collapse``.navbar-collapse
两个类名。最后再为这个div 添加一个类名或id名。 保证在窄屏时要显示的图标样式(固定写法)
12345<button class="navbar-toggle" type="button" data-toggle="collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>并为button添加data-target=”.类名/#id名”(由需要折叠的div决定)
反色导航条
在默认导航条基础上,将navbar-deafult
换成navbar-inverse
分页导航(带页码的分页导航)
- 带页码的分页导航
- 带翻页的分页导航
在ul
标签上加入.pagination
即可
大小设置:
- pagination-lg 让分页导航变大
- pagination-sm 让分页导航变小
分页导航(翻页分页导航)
在ul
标签上加入.pager
即可
对齐样式设置:
在<li>
标签内添加:
- previous:让上一步按钮居左
- next: 让下一步按钮居右
标签
为需要加标签的标签后,加
颜色样式设置:
.label-deafult
默认标签,深灰色.label-primary
主要标签,深蓝色.label-success
成功标签,绿色.label-info
信息标签,浅蓝色.label-warning
警告标签,橙色.label-danger
错误标签,红色
徽章
使用badge
样式来实现
其他内置组件
缩略图
- 通过
.thumbnail
样式配合网格系统来实现 - 在缩略图的基础上添加一个div名为
.caption
的容器,放置标题,文本描述,按钮等。
警示框
警示框样式
在.alert
样式基础上追加:
.alert-success
成功警示框.alert-info
信息警示框.alert-warning
警告警示框.alert-danger
错误警示框
可关闭的警示框
- 在
.alert
样式基础上添加.alert-dismissable
- 在
button
标签中加入class="close"
- 要确保关闭按钮元素上设置了自定义属性:
"data-dismiss="alert""
警示框的链接
通过给警示框的链接添加一个名为.alert-link
的类名
进度条
基本样式
- 外容器用
.progress
- 子容器用
.progress-bar
,style=”width:40%”
进阶版:
role="progressbar"
:告诉搜索引擎这个div的作用时进度条aria-valuenow="40"
: 当前进度条的进度为40%aria-valuemin="0"
: 进度条的最小值为0%aria-valuemax="100"
: 进度条的最大值为100%
彩色进度条
.progress-bar-info
:信息进度条,蓝色progress-bar-success
:成功进度条,绿色progress-bar-warning
:警告进度条,黄色progress-bar-danger
:错误进度条,红色
条纹进度条
在外容器.progress
基础上添加.progress-striped
动态条纹进度条
在条纹进度条
基础上加上.active
层叠进度条
总宽度不超过100%即可
带label的进度条
只需在进度条中添加需要的值即可
媒体对象
默认媒体对象
.media
媒体对象的容器.media-object
媒体对象的对象,通常是图片.media-body
主体内容,常常是图片侧边内容.media-heading
媒体对象的标题,可选
还常常使用.pull-left
或.pull-right
来控制媒体对象的浮动方式
媒体对象的嵌套
只需将另一个媒体对象结构放置在媒体对象的主题内容.media-body
里即可
媒体对象列表
|
|
列表组
基础列表组
- list-group 列表组容器,常用的是ul,也可以是ol,div
- list-group-item 列表项,常用的是li,也可以是div
带徽章的列表组
只需在.list-group-item
中添加徽章组件.badge
带链接的列表组
- 将
ul.list-group
使用div.list-group
来替换 - 用
a.list-group-item
替换li.list-group-item
自定义列表组
- list-group-item-heading
- list-group-item-text
列表项的状态设置
- active 表示当前状态
- disabled 表示禁用状态
多彩列表组
在list-group-item基础上添加即可
- list-group-item-success
- list-group-item-info
- list-group-item-warning
- list-group-item-danger
面板
基础面板
|
|
带有头和尾的面板
- panel-heading 头部
- panel-footer 尾部
色彩面板
- panel-primary: 重点蓝
- panel-success: 成功绿
- panel-info: 信息蓝
- panel-warning: 警告黄
- panel-danger: 危险红
面板中嵌套表格
在panel-body所在的div外面添加
面板中的嵌套列表组
直接添加
即可
导入JavaScript插件
- transition.js 动画过度
- modal.js 模态弹窗
- dropdown.js 下拉菜单
- scrollspy.js 滚动侦测
- tab.js 选项卡
- tooltop.js 提示框
- popover.js 弹出框
- alert.js 警告框
- button.js 按钮
- collapse.js 折叠/手风琴
- carousel.js 图片轮播
- affix.js 自动定位浮标
动画过渡
- 模态弹出窗的滑动和渐变效果
- 选项卡的渐变效果
- 警告框的渐变效果
- 图片轮播的滑动效果
模态弹出框
弹出窗三样式:
- modal
- modal-dialog
- modal-content 弹出窗的真正内容都放置在此
modal-content包含三部分:
- modal-header 主要包含标题和关闭按钮
- modal-body 弹出框的主要内容
- modal-footer 主要放置操作按钮
大小样式
- modal-lg 大尺寸样式
- modal-sm 小尺寸样式
触发模态弹出窗的两种方法
- 声明式触发法
- 声明两个必要的属性:data-toggle=”modal”(必须)和data-target=”#mymodal”
- data-target可以设置为css的选择符,也可以设置为模态弹窗的id值。
- 链接
<a>
元素,可以使用链接元素自带的href
属性替代data-target属性1<a data-toggle="modal" href="#mymodal">
建议使用第一种方式
为弹出框增加过渡动画效果
可通过为”.modal”增加类名”.fade”为模态弹出框增加过渡效果
模态弹出框的使用(data-参数说明)
模拟弹出框的使用(JavaScript触发)
|
|
JavaScript触发时的参数设置
参数设置:
事件设置:
下拉菜单
|
|