微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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      接受一个数组为值

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐