字体图标
使用字体图标:
span:class=“glyphicon glyphicon-xxx”
下拉菜单
下拉菜单创建:
- div元素提那家dropdown类或dropup类
- 在div中嵌套一个button作为触发按钮,应用dropdown-toggle类及data-toggle="dropdown"的属性
- button下添加ul列表,使用dropdown-menu类,添加aria-labelledby的属性供屏幕识别设备使用。
对齐:
- 默认沿着父元素上沿和左侧被定为为100%宽度
- dropdown-menu-right右对齐
- dropdown-menu-left左对齐(默认)
标题和分割线:
- li应用dropdown-header可以添加标题,来标明一列选项
- divider可以添加分割线进行分组
菜单状态:disabled类可以禁用菜单
按钮组
基本按钮组:
- 用div包裹多个.btn的button
- div使用btn-group类
- 添加role="group"属性,如果是工具栏则是toolbar
按钮工具栏:
把一组btn-group合并进btn-toolbar中就可以生成按钮工具栏。
尺寸:
div按钮组元素使用btn-group-lg、btn-group-sm 或btn-group-xs 类可以定义按钮组尺寸
垂直按钮组:btn-group-vertical
两端对齐按钮组:btn-group-justified
按钮式弹出菜单
单按钮下拉菜单:
- div使用btn-group
- button放入div
- 添加适当下拉菜单标签
分列式按钮下拉菜单(左右两个部分,左边是按钮原始内容,右边触发下拉菜单的切换)
尺寸:btn-xs、btn-lg、btn-sm
导航
给ul添加nav类可以创建一个导航组件
样式类 | 说明 |
---|---|
nav-tabs | 选项卡导航 |
nav-pills | 胶囊式导航 |
nav-stacked | 垂直方向排列 |
nav-justfied | 两端对齐堆叠式排列 |
导航栏
默认样式导航栏创建:
- 内容包裹在nav元素中,给nav添加navbar、navbar-default类
- 如果添加带有navbar-header的div元素,添加navbar-brand类的a元素可以作为导航栏的品牌标志
表单:navbar-form
按钮:navbar-btn
文本:navbar-text
非导航链接:navbar-link
对齐方式:navbar-left、navbar-right
固定在顶部:
- navbar-fixed-top 可以让导航栏固定在顶部,页面向下滚动时导航栏一直固定显示
- container-fluid的div容器,在body两侧添加内边距时导航栏内容仍然居中
- body需要添加padding-top
固定在底部: navbar-fixed-bottom
静止在底部:navbar-static-top 随页面一起滚动
反色导航栏:navbar-inverse 黑色背景、白色文本
响应式导航栏:
- 将所有要被折叠的内容由一个div元素包裹,给div应用collapse、navbar-collapse,定义id为xxx
- 添加button按钮,使用data-target="xxx"的属性
分页
分页:
- 创建一个ul,添加pagination类
- 将页码放在列表中,用nav包裹列表
禁用和激活:disable、active
尺寸:pagination-lg、pagination-sm
翻页
翻页:
- 创建pager类的ul
- 放置翻页链接
- 用nav包裹列表
对齐链接:给“上一页”“下一页”分别应用previous和next类,可以让链接左右两端对齐
标签
标签:
- 创建label和label-default类的span元素
多样式标签:
样式类 | 说明 |
---|---|
label-default | 默认标签 |
label-primary | 主要标签 |
label-success | 成功标签 |
label-info | 信息标签 |
label-warning | 警告标签 |
label-danger | 危险标签 |
徽章
徽章:(边角圆滑,用于突出新的或未读的项)
- 创建带有badge类的span元素
巨幕
巨幕:能延伸至整个浏览器窗口来展示网站上的关键内容
- jumbotron类的div
缩略图
缩略图:
- 将img包裹在带有thumbnail类的a元素中
- 缩略图会添加4px的内边距和一个灰色边框
- 鼠标悬停时会动态显示出图像轮廓
自定义内容:(可以放置任何类型的html内容)
警告框
警告框:创建带有alert类的div
样式类 | 说明 |
---|---|
alert-success | 成功 |
alert-info | 信息 |
alert-warning | 警告 |
alert-danger | 危险 |
可关闭的警告框:添加alert-dismissible 和一个关闭按钮
警告框中链接:给a添加alert-link类,链接颜色会与警告框相符
进度条
进度条:
- 创建progress类的div1
- 内嵌progress-bar的div2
- 给div2添加style="xx%"的属性
情景进度条: progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger
条纹进度条:progress-bar-striped
动画进度条:条纹进度条+active类
媒体对象
媒体对象:
- 所有媒体对象被包裹在media类div
- media-right、media-left放置媒体元素
- media-body放置媒体描述信息
对齐方法:media-middle、media-bottom
媒体对象列表:media-list
面板
面板:
- 创建panel、panel-default的div
- panel-body的div用来放置主体元素
面板标题:
- 添加panel-heading的div
- 添加panel-title的h1-h6标签
面板脚注:
- 添加panel-footer的div