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

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

2016-05-30 13:23 633 查看

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 布局 css

相关文章推荐

新的分享

章节导航