BootStrap-CSS选项列表大全

将以前学习的总结整理下:以下是BootStrap-CSS选项大全

手风琴效果

accordion

accordion-group

accordion-headin

accordion-inner

accordion-toggle

active 选中状态

add-on

弹出提示信息

Alert

Alert-heading

Alert-block

Alert-danger

Alert-error

Alert-success

Alert-info

Arrow 出现一个箭头

Bar

Brand 商标效果

Breadcrumd 面包屑,提示在网站那个位置

按钮效果

Btn

Btn-group 它的元素下可设置多个btn

Btn-dark

Btn-primary

Btn-inverse 黑色

Btn-info

Btn-danger

Btn-warning

Btn-success

Btn-mini

Btn-small

Btn-large

Btn-navbar

Btn-toolbar

Caption 标题效果

Caret 插入符号

图片循环展示

Carousel

Carousel-inner

Carousel-caption

carousel-control data-slide=\'前一张\'

Checkbox 复选框效果

Clearfix

Close 在alert中显示‘x’按钮

Collapse

显示框

Container

Container-fluid

Control-group

Control-label

Controls

Disabled 使得元素不能点击,点击没有效果

Divider 相当于<hr />

Divider-vertical

点击按钮出现,下面弹出另一个

Dropdown

Dropdown-toggle data-toggle=“dropdown”

Dropdown-menu

Fade 隐藏

In 显示

对表单处理

Form-actions

Form-inline 表单中的元素水平显示

Form-horizontal 垂直显示

Form-search 搜索框

Help-block 提示信息,在表单中用到,如’请输入至少5个字符‘

Help-inline

Hero-unit 相当于报纸头版效果

Hide 隐藏元素

Icon-* 小图标,*表示很多,用到的时候再找对应的

对input的处理

Input-append

Input-prepend

Input-mini

Input-small

Input-medium 中等大小

Input-large

Input-xlarge

Input-xxlarge

Uneditable-input

Uneditable-textarea

Invisible 隐藏

Item 一项

标签

Label

Label-important

Label-success

Label-info

Label-warning

Large 大

Lead

点击一个元素,弹出一个窗口即modal

Modal data-toggle=’modal‘

Modal-backdrop modal的背景

Modal-header modal的头部

Modal-body

Modal-footer

Modal-form

Modal-open

Muted 无声的,使文本柔和显示

导航效果

Nav

Nav-collapse

Nav-header

Nav-list

Nav-fills

Nav-tabs

Nav-stacked

Navbar 包含一个或多个nav

Navbar-fixed-top 固定到网页头部

Navbar-inner

Navbar-form 嵌入表单,如:注册输入框

Navbar-header

Navbar-text

Navbar-search

Next 下一个

Offset1-offset11 间隔

Open

分页处理

Page-header

Pager

Pagination 数值页码

Pagination-centered

Pagination-right

Previous 上一个

Prev

Pill-content pill 药丸,子弹

Pill-pane pane 窗格

Tab-content tab 标签,制表,账单

Tab-pane

Tabbable

Tabs-below

Tabs-left

Tabs-right

Tabs-stacked

Popover

Popover-content

Popover-title

Popover-inner

Pre-scrollable

Prettyprint

滚动条效果

Progress

Progress-info

Progress-success

Progress-danger

Progress-striped 带条纹

Pull-left 布局的,到左边

Pull-right

Radio

行效果,布局用的

Row

Row-fluid

Search-query

Show

Span1-span12 相当于td,数值表示大小,即’列‘效果

表格处理

Table

Table-bordered

Table-condensed condensed 浓缩的,扼要的

产生个圆边框效果

Thumbnail

Thumbnails

tooltip

Tooltip-arrow

Tooltip-inner

Typeahead <input type="text" data-provide="typeahead">

Unstyled

Well

上面是class的值,或rel的值,等等,还有待深入研究

元素的属性

Data-spy

Data-target 相当于href,指定跳转到的位置

Data-toggle 激活对应js中的方法

Data-offset 还不知道

Data-content

Data-dismiss

Data-loading-text

Data-*-text

Data-parent 该元素的父元素

Data-slide 跳转 data-slide="prev" data-slide="next"

Data-provide dataprovide="typeahead"

Data-items

Data-source 接受一个数组为值