Bootstrap】学习笔记（四）——CSS组件

字体图标

使用字体图标：
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