您的位置：首页 > Web前端 > BootStrap

转：Bootstrap的常用类(CSS和布局组件)的总结

2016-07-25 22:59 639 查看

原文地址：点击打开链接

Bootstrap

通过给标签赋予一个类名

(class
name)

,来生成对应类名的效果标签

网格选项

row

:行

col-*-*

: 列 (第一个

可以为

xs[超小]

sm[小型]

md[中型]

lg[大型]

第二个

必须为12以内的[列数])

col-*-offset-*

:列偏移(第一个

和上面一样,第二个

范围是1到11,表示把该列的左外边距(margin)增加

列)

col-*-*-*

:列排序(第一个

和上面一样,第二个

可以为

push[向右]

pull[向左]

,第三个

范围是1到11[列数])

排版

small

:内联子标题

lead

:引导主体副本

text-*

:文本样式(

号可以为

left[左对齐]

center[居中对齐]

right[右对齐]

muted[减弱文本]

primary

success

info

warning

danger

justify[自动换行]

nowrap[不换行]

lowercase[小写]

uppercase[大写]

capitalize[首字母大写])

list-inline

:列表置于同一行

表格

table

:基本样式(只有横向分隔线)

table-*

:表格样式(

可以为

striped[添加条纹]

bordered[添加边框]

hover[启用悬停]

condensed[更加紧凑]

)

tr/th/td

有

active/success/info/warning/danger

来改变背景颜色

将任意的

table

放在

table-responsive

内,实现响应式表格

bootstrap

里

active/success/info/warning/danger

对应的背景颜色

表单

创建基本表单(垂直表单)的步骤

1.向父

<form>

元素添加

role="form"

。

2. 把标签和控件放在一个带有

class .form-group

的

<div>

中。这是获取最佳间距所必需的。

3. 向所有的文本元素

<input>

、

<textarea>

和

<select>

添加

class
.form-control

。

创建水平表单的步骤

1.向父

<form>

元素添加

class
.form-horizontal

。

2.把标签和控件放在一个带有

class .form-group

的

<div>

中。

3.向标签添加

class .control-label

。

常见的表单控件主要是

input

、

textarea

、

checkbox

、

radio

和

select

。

input

: 声明

type

有

text

、

password

、

datetime

、

datetime-local

、

date

、

month

、

time

、

week

、

number

、

email

、

url

、

search

、

tel

和

color

。

textarea

row

决定高度

checkbox

: 复选框

radio

:单选框

checkbox-inline

:内联的复选框和单选框

select

:选择框

对父元素添加验证状态

has-*

:验证样式(

可以为

warning/error/success

)

按钮

btn

:基本样式

btn-*

:其他样式(

可以为

default/primary/success/info/warning/danger

/link[让按钮看起来像个链接]

/lg/sm/xs/

block[块级按钮,拉伸至父元素100%的宽度]/active/disabled

)

图片

img-*

:图片样式(

可以为

rounded[圆角6px]

/circle[圆形]

/thumbnail[添加内边距和一个灰色的边框]/responsive

)

辅助类

Bootstrap

里的一些辅助类,除了上面的

active/success/info/warning/danger

还有

pull-left/right

元素浮动到左边/右边

center-block

设置元素为

display:block

并居中显示

clearfix

清除浮动

show/hidden

强制显示/隐藏

close

显示关闭按钮

caret

显示下拉式功能

divider

分隔线

字体图标

在

fonts

文件夹内可以找到字体图标，它包含了下列这些文件：
glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

下拉菜单

dropdown

:下拉菜单

dropdown-menu

: 下拉菜单

dropdown-header

:下拉菜单区域标题

按钮组

btn-group

:里面放置一系列

btn

btn-toolbar

:里面放置几组

btn-group

btn-group-*

:调整按钮组的样式(

可以为

xs/sm/lg/vertical

)

.btn-group

容器添加

.dropup

实现按钮上拉菜单

输入框组

向

.form-control

添加前缀或后缀元素的步骤如下：

1.把前缀或后缀元素放在一个带有

class .input-group

的

<div>

中。

2.接着，在相同的

<div>

内，在

class

为

.input-group-addon

的

<span>

内放置额外的内容。

3.把该

<span>

放置在

<input>

元素的前面或者后面。

为了保持跨浏览器的兼容性，请避免使用

<select>

元素，因为它们在

WebKit

浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的

class

，输入框组是一个孤立的组件。

导航元素

nav nav-tabs

:标签式的导航菜单

nav nav-pills

: 胶囊式的导航菜单

//同时使用

nav-stacked

让胶囊垂直堆叠

//同时使用

nav-justified

让标签式或胶囊式导航菜单与父元素等宽

导航栏

创建一个默认的导航栏的步骤如下：

1.向

<nav>

标签添加

class
.navbar

、

.navbar-default

。

2.向上面的元素添加

role="navigation"

，有助于增加可访问性。

3.向

<div>

元素添加一个标题

class
.navbar-header

，内部包含了带有

class navbar-brand

的

<a>

元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有

class .nav

、

.navbar-nav

的无序列表即可。

navbar-btn

: 导航栏中的按钮

navbar-text

:导航栏中的文本

navbar-link

:非标准导航链接

navbar-left/right

:向左/向右对齐

navbar-fixed-top/bottom

:固定在顶部/底部(为了防止导航栏与页面主体中的其他内容的顶部相交错，请向

<body>

标签添加至少
50 像素的内边距（

padding

），内边距的值可以根据您的需要进行设置)

navbar-static-top

:能随着页面一起滚动的导航栏

nav-inverse

:带有黑色背景白色文本的导航栏

面包屑导航

breadcrumb

分页

`pagination`:分页
`disabled/active` :不可点击/当前页面
`pager`:翻页
`previous/next`:把链接向左/向右对齐

徽章

badge

超大屏幕

jumbotron

页面标题

page-header

缩略图

thumbnail

添加自定义的内容

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：

1.把带有

class .thumbnail

的

<a>

标签改为

<div>

。

2.在该

<div>

内，您可以添加任何您想要添加的东西。由于这是一个

<div>

，我们可以使用默认的基于

span

的命名规则来调整大小。

3.如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

警告

alert alert-*

:警告框(

可以为

success/info/warning/danger

)

创建一个可取消的警告（

Dismissal Alert

）步骤如下：

1.通过创建一个

<div>

，并向其添加一个

.alert
class

和四个上下文

class

（即

.alert-success、.alert-info、.alert-warning、.alert-danger

）之一，来添加一个基本的警告框。

2.同时向上面的

<div>

class

添加可选的

.alert-dismissable

。

3.添加一个关闭按钮。

进度条

创建一个基本的进度条的步骤如下：

1.添加一个带有

class .progress

的

<div>

。

//同时添加

.progress-striped

来实现条纹样式的进度条

//然后添加

active

会使条纹具有从右向左的运动感

2.接着，在上面的

<div>

内，添加一个带有

class
.progress-bar

的空的

<div>

。

//同时添加

class progress-bar-*

来实现交替样式的进度条,其中，

可以是

success、info、warning、danger

。

3.添加一个带有百分比表示的宽度的

style

属性，例如

style="60%"

;
表示进度条在

60%

的位置。

多媒体对象

media

:允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list

：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该

class

。可用于评论列表与文章列表

列表组

创建一个基本的列表组的步骤如下：

向元素

<ul>

添加

class
.list-group

。

向

<li>

添加

class
.list-group-item

。

list-group-item-heading

:每个

item

的顶部,类似于

ios里cell的text

list-group-item-text

:每个

item

的文字,类似于

ios里cell的subtitle
text

面板

panel panel-default

:面板

panel-heading

:面板头部

panel-title

:面板标题

panel-body

:面板内容

panel-footer

:面板脚注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap 布局 class 网格标签

相关文章推荐

新的分享

章节导航