1 什么是BootStrap
由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
2 BootStrap的版本
BootStrap2
BootStrap3
BootStrap4
3 BootStrap 下载
4 CDN服务
1
2
3
4
5
6
7
8
9
10
11
<link rel ="stylesheet" href ="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link rel ="stylesheet" href ="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" >
<script src ="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" > </script >
<script src ="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" > </script >
5 目录结构
生产环境版
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min .css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min .css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min .js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
6 基本模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html >
<html lang ="zh-CN" >
<head >
<title > Bootstrap 101 Template</title >
<link href ="css/bootstrap.min.css" rel ="stylesheet" >
</head >
<body >
<h1 > 你好,世界!</h1 >
<script src ="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js" > </script >
<script src ="js/bootstrap.min.js" > </script >
</body >
</html >
7 浏览器支持
手机浏览器
——- Chrome Firefox Safari
Android
Supported
Supported
N/A
iOS
Supported
Supported
Supported
桌面浏览器
——— Chrome Firefox Internet Explorer Opera Safari
Mac
Supported
Supported
N/A
Supported
Supported
Windows
Supported
Supported
Supported
Supported
Not supported
8 浏览器兼容
让 IE8 支持H5新标签
页面中引入respond.js
1
2
<script src ="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > </script >
IE兼容模式
页面中添加如下代码
1
2
<meta http-equiv ="X-UA-Compatible" content ="IE=edge" >
国产浏览器切换webkit内核
页面中添加如下代码
1
<meta name ="renderer" content ="webkit" >
1 Bootstrap布局
1.1 移动设备优先
为了确保适当的绘制和触屏缩放,需要在 <head>
之中添加 viewport 元数据标签 。
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no
可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!
1.2 Normalize.css
BootStrap内置了Normalize.css
1.3 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器。
1
2
3
<div class ="container" >
...
</div >
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
1
2
3
<div class ="container-fluid" >
...
</div >
2 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
2.1 栅格系统简介
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
“行(row)”必须包含在 .container
(固定宽度)或 .container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
通过“行(row)”在水平方向创建一组“列(column)”。
你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
类似 .row
和 .col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列(column)”设置 padding
属性,从而创建列与列之间的间隔(gutter)。通过为 .row
元素设置负值 margin
从而抵消掉为 .container
元素设置的 padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4
来创建。
如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*
不存在, 也影响大屏幕设备。
2.2 栅格参数
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
.container
最大宽度
None (自动)
750px
970px
1170px
类前缀
.col-xs-
.col-sm-
.col-md-
.col-lg-
最大列(column)宽
自动
~62px
~81px
~97px
2.3 栅格系统使用
使用单一的一组 .col-md-*
栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row
内。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class ="row" >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
<div class ="col-md-1" > .col-md-1</div >
</div >
<div class ="row" >
<div class ="col-md-8" > .col-md-8</div >
<div class ="col-md-4" > .col-md-4</div >
</div >
<div class ="row" >
<div class ="col-md-4" > .col-md-4</div >
<div class ="col-md-4" > .col-md-4</div >
<div class ="col-md-4" > .col-md-4</div >
</div >
<divclass="row">
<divclass="col-md-6">.col-md-6</div >
<divclass="col-md-6">.col-md-6</div >
</div >
2.4 不同屏幕设置不同宽度
1
2
3
4
5
6
7
8
9
10
11
<div class ="row" >
<div class ="col-xs-12 col-sm-6 col-md-8" > .col-xs-12 .col-sm-6 .col-md-8</div >
<div class ="col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div >
</div >
<div class ="row" >
<div class ="col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4</div >
<div class ="col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4</div >
<div class ="clearfix visible-xs-block" > </div >
<div class ="col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4</div >
</div >
2.5 列偏移
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。
1
2
3
4
5
6
7
8
9
10
11
<div class ="row" >
<div class ="col-md-4" > .col-md-4</div >
<div class ="col-md-4 col-md-offset-4" > .col-md-4 .col-md-offset-4</div >
</div >
<div class ="row" >
<div class ="col-md-3 col-md-offset-3" > .col-md-3 .col-md-offset-3</div >
<div class ="col-md-3 col-md-offset-3" > .col-md-3 .col-md-offset-3</div >
</div >
<div class ="row" >
<div class ="col-md-6 col-md-offset-3" > .col-md-6 .col-md-offset-3</div >
</div >
2.6 列位置移动
通过使用 .col-md-push-*
和 .col-md-pull-*
类就可以很容易的改变列(column)的顺序。
1
2
3
4
<div class ="row" >
<div class ="col-md-9 col-md-push-3" > .col-md-9 .col-md-push-3</div >
<div class ="col-md-3 col-md-pull-9" > .col-md-3 .col-md-pull-9</div >
</div >
3 排版
3.1 标题
HTML 中的所有标题标签,<h1>
到 <h6>
均可使用。另外,还提供了 .h1
到 .h6
类,为的是给内联(inline)属性的文本赋予标题的样式。
1
2
3
4
5
6
<h1 > h1. Bootstrap heading</h1 >
<h2 > h2. Bootstrap heading</h2 >
<h3 > h3. Bootstrap heading</h3 >
<h4 > h4. Bootstrap heading</h4 >
<h5 > h5. Bootstrap heading</h5 >
<h6 > h6. Bootstrap heading</h6 >
在标题内还可以包含 <small>
标签或赋予 .small
类的元素,可以用来标记副标题。
1
2
3
4
5
6
<h1 > h1. Bootstrap heading <small > Secondary text</small > </h1 >
<h2 > h2. Bootstrap heading <small > Secondary text</small > </h2 >
<h3 > h3. Bootstrap heading <small > Secondary text</small > </h3 >
<h4 > h4. Bootstrap heading <small > Secondary text</small > </h4 >
<h5 > h5. Bootstrap heading <small > Secondary text</small > </h5 >
<h6 > h6. Bootstrap heading <small > Secondary text</small > </h6 >
3.2 突出显示
通过添加 .lead
类可以让段落突出显示。
1
<p class ="lead" > ...</p >
3.3 对齐
1
2
3
4
5
<p class ="text-left" > Left aligned text.</p >
<p class ="text-center" > Center aligned text.</p >
<p class ="text-right" > Right aligned text.</p >
<p class ="text-justify" > Justified text.</p >
<p class ="text-nowrap" > No wrap text.</p >
3.4 改变大小写
1
2
3
<p class ="text-lowercase" > Lowercased text.</p >
<p class ="text-uppercase" > Uppercased text.</p >
<p class ="text-capitalize" > Capitalized text.</p >
3.5 引用
1
2
3
4
5
6
7
8
9
10
<blockquote >
<p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p >
</blockquote >
<blockquote >
<p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p >
<footer > Someone famous in <cite title ="Source Title" > Source Title</cite > </footer >
</blockquote >
<blockquote class ="blockquote-reverse" >
...
</blockquote >
3.6 列表
无样式列表
1
2
3
<ul class ="list-unstyled" >
<li > ...</li >
</ul >
内联列表
1
2
3
<ul class ="list-inline" >
<li > ...</li >
</ul >
水平排列的内联列表
1
2
3
4
<dl class ="dl-horizontal" >
<dt > ...</dt >
<dd > ...</dd >
</dl >
4 代码
4.1 内联代码
通过 <code>
标签包裹内联样式的代码片段。
1
For example, <code > < section> </code > should be wrapped as inline.
4.2 用户输入
通过 <kbd>
标签标记用户通过键盘输入的内容。
1
2
To switch directories, type <kbd > cd</kbd > followed by the name of the directory.<br >
To edit settings, press <kbd > <kbd > ctrl</kbd > + <kbd > ,</kbd > </kbd >
4.3 代码块
多行代码可以使用 <pre>
标签。为了正确的展示代码,注意将尖括号做转义处理。
1
<pre > < p> Sample text here...< /p> </pre >
还可以使用 .pre-scrollable
类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。
4.3 变量
通过 <var>
标签标记变量。
1
<var >y</var> = <var>m</ var ><var > x</var > + <var > b</var >
4.4 程序输出
通过 <samp>
标签来标记程序输出的内容。
1
<samp >This text is meant to be treated as sample output from a computer program.</samp >
5 表格
5.1 基本
为任意 <table>
标签添加 .table
类可以为其赋予基本的样式
1
2
3
<table class ="table" >
...
</table >
5.2 条纹状表格
1
2
3
<table class ="table table-striped" >
...
</table >
5.3 带边框的表格
1
2
3
<table class ="table table-bordered" >
...
</table >
5.4 鼠标悬停
1
2
3
<table class ="table table-hover" >
...
</table >
5.5 紧缩表格
1
2
3
<table class ="table table-condensed" >
...
</table >
5.6 状态类
通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active
鼠标悬停在行或单元格上时所设置的颜色
.success
标识成功或积极的动作
.info
标识普通的提示信息或动作
.warning
标识警告或需要用户注意
.danger
标识危险或潜在的带来负面影响的动作
5.7 响应式表格
将任何 .table
元素包裹在 .table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
6 表单
6.1 基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form >
<div class ="form-group" >
<label for ="exampleInputEmail1" > Email address</label >
<input type ="email" class ="form-control" id ="exampleInputEmail1" placeholder ="Email" >
</div >
<div class ="form-group" >
<label for ="exampleInputPassword1" > Password</label >
<input type ="password" class ="form-control" id ="exampleInputPassword1" placeholder ="Password" >
</div >
<div class ="form-group" >
<label for ="exampleInputFile" > File input</label >
<input type ="file" id ="exampleInputFile" >
<p class ="help-block" > Example block-level help text here.</p >
</div >
<div class ="checkbox" >
<label >
<input type ="checkbox" > Check me out
</label >
</div >
<button type ="submit" class ="btn btn-default" > Submit</button >
</form >
6.2 内联表单
为 <form>
元素添加 .form-inline
类可使其内容左对齐并且表现为 inline-block
级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)
6.3 水平排列的表单
通过为表单添加 .form-horizontal
类,并联合使用 Bootstrap 预置的栅格类,可以将 label
标签和控件组水平并排布局。这样做将改变 .form-group
的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row
了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form class ="form-horizontal" >
<div class ="form-group" >
<label for ="inputEmail3" class ="col-sm-2 control-label" > Email</label >
<div class ="col-sm-10" >
<input type ="email" class ="form-control" id ="inputEmail3" placeholder ="Email" >
</div >
</div >
<div class ="form-group" >
<label for ="inputPassword3" class ="col-sm-2 control-label" > Password</label >
<div class ="col-sm-10" >
<input type ="password" class ="form-control" id ="inputPassword3" placeholder ="Password" >
</div >
</div >
<div class ="form-group" >
<div class ="col-sm-offset-2 col-sm-10" >
<div class ="checkbox" >
<label >
<input type ="checkbox" > Remember me
</label >
</div >
</div >
</div >
<div class ="form-group" >
<div class ="col-sm-offset-2 col-sm-10" >
<button type ="submit" class ="btn btn-default" > Sign in</button >
</div >
</div >
</form >
6.4 表单控件
输入框
包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和 color
。
只有正确设置了 type
属性的输入控件才能被赋予正确的样式。
文本域
支持多行文本的表单控件。可根据需要改变 rows
属性。
多选和单选框
默认样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class ="checkbox" >
<label >
<input type ="checkbox" value ="" >
Option one is this and that— be sure to include why it's great
</label >
</div >
<div class ="checkbox disabled" >
<label >
<input type ="checkbox" value ="" disabled >
Option two is disabled
</label >
</div >
<div class ="radio" >
<label >
<input type ="radio" name ="optionsRadios" id ="optionsRadios1" value ="option1" checked >
Option one is this and that— be sure to include why it's great
</label >
</div >
<div class ="radio" >
<label >
<input type ="radio" name ="optionsRadios" id ="optionsRadios2" value ="option2" >
Option two can be something else and selecting it will deselect option one
</label >
</div >
<div class ="radio disabled" >
<label >
<input type ="radio" name ="optionsRadios" id ="optionsRadios3" value ="option3" disabled >
Option three is disabled
</label >
</div >
内联单选和多选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<label class ="checkbox-inline" >
<input type ="checkbox" id ="inlineCheckbox1" value ="option1" > 1
</label >
<label class ="checkbox-inline" >
<input type ="checkbox" id ="inlineCheckbox2" value ="option2" > 2
</label >
<label class ="checkbox-inline" >
<input type ="checkbox" id ="inlineCheckbox3" value ="option3" > 3
</label >
<label class ="radio-inline" >
<input type ="radio" name ="inlineRadioOptions" id ="inlineRadio1" value ="option1" > 1
</label >
<label class ="radio-inline" >
<input type ="radio" name ="inlineRadioOptions" id ="inlineRadio2" value ="option2" > 2
</label >
<label class ="radio-inline" >
<input type ="radio" name ="inlineRadioOptions" id ="inlineRadio3" value ="option3" > 3
</label >
不带文本的Checkbox 和 radio
1
2
3
4
5
6
7
8
9
<label >
<input type ="checkbox" id ="blankCheckbox" value ="option1" aria-label ="..." >
</label >
</div >
<div class ="radio" >
<label >
<input type ="radio" name ="blankRadio" id ="blankRadio1" value ="option1" aria-label ="..." >
</label >
</div >
下拉列表
1
2
3
4
5
6
7
<select class ="form-control" >
<option > 1</option >
<option > 2</option >
<option > 3</option >
<option > 4</option >
<option > 5</option >
</select >
静态内容
如果需要在表单中将一行纯文本和 label
元素放置于同一行,为 <p>
元素添加 .form-control-static
类即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form class ="form-horizontal" >
<div class ="form-group" >
<label class ="col-sm-2 control-label" > Email</label >
<div class ="col-sm-10" >
<p class ="form-control-static" > email@example.com</p >
</div >
</div >
<div class ="form-group" >
<label for ="inputPassword" class ="col-sm-2 control-label" > Password</label >
<div class ="col-sm-10" >
<input type ="password" class ="form-control" id ="inputPassword" placeholder ="Password" >
</div >
</div >
</form >
帮助文字
1
2
3
4
<label class ="sr-only" for ="inputHelpBlock" > Input with help text</label >
<input type ="text" id ="inputHelpBlock" class ="form-control" aria-describedby ="helpBlock" >
...
<span id ="helpBlock" class ="help-block" > A block of help text that breaks onto a new line and may extend beyond one line.</span >
校验状态
Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning
、.has-error
或 .has-success
类到这些控件的父元素即可。任何包含在此元素之内的 .control-label
、.form-control
和 .help-block
元素都将接受这些校验状态的样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class ="form-group has-success" >
<label class ="control-label" for ="inputSuccess1" > Input with success</label >
<input type ="text" class ="form-control" id ="inputSuccess1" aria-describedby ="helpBlock2" >
<span id ="helpBlock2" class ="help-block" > A block of help text that breaks onto a new line and may extend beyond one line.</span >
</div >
<div class ="form-group has-warning" >
<label class ="control-label" for ="inputWarning1" > Input with warning</label >
<input type ="text" class ="form-control" id ="inputWarning1" >
</div >
<div class ="form-group has-error" >
<label class ="control-label" for ="inputError1" > Input with error</label >
<input type ="text" class ="form-control" id ="inputError1" >
</div >
<div class ="has-success" >
<div class ="checkbox" >
<label >
<input type ="checkbox" id ="checkboxSuccess" value ="option1" >
Checkbox with success
</label >
</div >
</div >
<div class ="has-warning" >
<div class ="checkbox" >
<label >
<input type ="checkbox" id ="checkboxWarning" value ="option1" >
Checkbox with warning
</label >
</div >
</div >
<div class ="has-error" >
<div class ="checkbox" >
<label >
<input type ="checkbox" id ="checkboxError" value ="option1" >
Checkbox with error
</label >
</div >
</div >
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback
类并添加正确的图标即可
1
2
3
4
5
6
<div class ="form-group has-success has-feedback" >
<label class ="control-label" for ="inputSuccess2" > Input with success</label >
<input type ="text" class ="form-control" id ="inputSuccess2" aria-describedby ="inputSuccess2Status" >
<span class ="glyphicon glyphicon-ok form-control-feedback" aria-hidden ="true" > </span >
<span id ="inputSuccess2Status" class ="sr-only" > (success)</span >
</div >
控件尺寸
通过 .input-lg
类似的类可以为控件设置高度,通过 .col-lg-*
类似的类可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸
1
2
3
4
5
6
7
<input class ="form-control input-lg" type ="text" placeholder =".input-lg" >
<input class ="form-control" type ="text" placeholder ="Default input" >
<input class ="form-control input-sm" type ="text" placeholder =".input-sm" >
<select class ="form-control input-lg" > ...</select >
<select class ="form-control" > ...</select >
<select class ="form-control input-sm" > ...</select >
水平排列的表单组的尺寸
通过添加 .form-group-lg
或 .form-group-sm
类,为 .form-horizontal
包裹的 label
元素和表单控件快速设置尺寸。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form class ="form-horizontal" >
<div class ="form-group form-group-lg" >
<label class ="col-sm-2 control-label" for ="formGroupInputLarge" > Large label</label >
<div class ="col-sm-10" >
<input class ="form-control" type ="text" id ="formGroupInputLarge" placeholder ="Large input" >
</div >
</div >
<div class ="form-group form-group-sm" >
<label class ="col-sm-2 control-label" for ="formGroupInputSmall" > Small label</label >
<div class ="col-sm-10" >
<input class ="form-control" type ="text" id ="formGroupInputSmall" placeholder ="Small input" >
</div >
</div >
</form >
7 按钮
7.1 可作为按钮使用的标签或元素
为 <a>
、<button>
或 <input>
元素添加按钮类(button class)即可使用 Bootstrap 提供的样式
1
2
3
4
<a class ="btn btn-default" href ="#" role ="button" > Link</a >
<button class ="btn btn-default" type ="submit" > Button</button >
<input class ="btn btn-default" type ="button" value ="Input" >
<input class ="btn btn-default" type ="submit" value ="Submit" >
7.2 预定义样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button type ="button" class ="btn btn-default" > (默认样式)Default</button >
<button type ="button" class ="btn btn-primary" > (首选项)Primary</button >
<button type ="button" class ="btn btn-success" > (成功)Success</button >
<button type ="button" class ="btn btn-info" > (一般信息)Info</button >
<button type ="button" class ="btn btn-warning" > (警告)Warning</button >
<button type ="button" class ="btn btn-danger" > (危险)Danger</button >
<button type ="button" class ="btn btn-link" > (链接)Link</button >
7.3 尺寸
需要让按钮具有不同尺寸吗?使用 .btn-lg
、.btn-sm
或 .btn-xs
就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
7.4 激活状态
添加 .active
类
7.5 禁用状态
为 <button>
元素添加 disabled
属性,使其表现出禁用状态。
为基于 <a>
元素创建的按钮添加 .disabled
类。
8 图片
8.1 响应式图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive
类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;
、 height: auto;
和 display: block;
属性,从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive
类的图片水平居中,请使用 .center-block
类,不要用 .text-center
1
<img src ="..." class ="img-responsive" alt ="Responsive image" >
8.2 图片形状
1
2
3
<img src ="..." alt ="..." class ="img-rounded" >
<img src ="..." alt ="..." class ="img-circle" >
<img src ="..." alt ="..." class ="img-thumbnail" >
9 辅助类
9.1 文本颜色
1
2
3
4
5
6
<p class ="text-muted" > ...</p >
<p class ="text-primary" > ...</p >
<p class ="text-success" > ...</p >
<p class ="text-info" > ...</p >
<p class ="text-warning" > ...</p >
<p class ="text-danger" > ...</p >
9.2 背景色
1
2
3
4
5
<p class ="bg-primary" > ...</p >
<p class ="bg-success" > ...</p >
<p class ="bg-info" > ...</p >
<p class ="bg-warning" > ...</p >
<p class ="bg-danger" > ...</p >
9.3 三角符号
1
<span class ="caret" > </span >
9.4 浮动
1
2
<div class ="pull-left" > ...</div >
<div class ="pull-right" > ...</div >
9.5 让内容块居中
1
<div class ="center-block" > ...</div >
9.6 清除浮动
通过为父元素 添加 .clearfix
类可以很容易地清除浮动(float
)
1
2
<div class ="clearfix" > ...</div >
9.7 显示或隐藏内容
1
2
<div class ="show" > ...</div >
<div class ="hidden" > ...</div >
9.10 图片替换
使用 .text-hide
类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
1
<h1 class ="text-hide" > Custom heading</h1 >
10 响应式工具
10.1 不同视口下隐藏显示
1
2
3
4
5
6
7
8
9
10
11
.visible-xs- *
.visible-sm- *
.visible-md- *
.visible-lg- *
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible- *-block
.visible- *-inline
.visible- *-inline-block
10.2 打印类
1
2
3
4
5
.visible-print -block
.visible-print -inline
.visible-print -inline-block
.hidden-print 打印机下隐藏
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构