对Bootstrap的css基础样式进行总结归纳
概览
这篇博文是对bootstrap官方文档的总结，为什么我要对它进行总结呢？哈哈，有两个原因，第一，我想复习一下bootstrap框架的知识，第二，我有点不适应官方文档说的繁琐，冗余。我想自己做一份简单明了的文档。毕竟自己以前学过，但是，如果有小白，对这篇文章看的不太懂，请去官方文档查看，这是链接：Bootstrap全局css样式官方文档。
深入了解 Bootstrap 底层结构的关键部分，会让我们让web 开发变得更好、更快、更强壮。
HTML5 文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title Page</title><!-- jQuery 必须在Bootstrap JavaScript导入之前，因为bootstrap依赖jquery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!-- Bootstrap JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- Bootstrap CSS --><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>...
</html>
屏幕自适应
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
默认全局样式
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
- 为
body元素设置background-color: #fff; - 使用
@font-family-base、@font-size-base和@line-height-base变量作为排版的基本参数。 - 为所有链接设置了基本颜色
@link-color，并且当链接处于:hover状态时才添加下划线。 - Bootstrap 将全局
font-size设置为 14px，line-height设置为 1.428。这些属性直接赋予<body>元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">...
</div>
布局规范
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- **你的内容应当放置于“列（column）”内，**并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格参数
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度
|
None （自动） | 750px | 970px | 1170px |
| 类前缀 |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
关系实例
所有“列（column）必须放在 ” .row 内，你写的内容放在column里面。
<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>
<div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</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>
响应式列重置
在不同的屏幕上，可能会导致某些列可能会出现比别的列高的情况（文本内容多）。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。
<div class="row"><div class="col-xs-6 col-sm-3">我在小屏幕中的列变高了</div> <div class="col-xs-6 col-sm-3">我的列低</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<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>
嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
<div class="row"><div class="col-sm-9">第一层内容<div class="row"><div class="col-xs-8 col-sm-6">第二层内容</div><div class="col-xs-4 col-sm-6">第二层内容</div></div></div>
</div>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
<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>
文本样式
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
| h1. Bootstrap heading | Semibold 36px |
|---|---|
| h2. Bootstrap heading | Semibold 30px |
| h3. Bootstrap heading | Semibold 24px |
| h4. Bootstrap heading | Semibold 18px |
| h5. Bootstrap heading | Semibold 14px |
| h6. Bootstrap heading | Semibold 12px |
<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 类的元素，可以用来标记副标题。
| h1. Bootstrap heading Secondary text |
|---|
| h2. Bootstrap heading Secondary text |
| h3. Bootstrap heading Secondary text |
<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>
内联文本元素
添加高亮
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
被删除的文本
对于被删除的文本使用 <del> 标签。
This line of text is meant to be treated as deleted text.
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
对于没用的文本使用 <s> 标签。
This line of text is meant to be treated as deleted text.
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
额外插入的文本使用 <ins> 标签。
This line of text is meant to be treated as an addition to the document.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本
为文本添加下划线，使用 <u> 标签。
This line of text will render as underlined
<u>This line of text will render as underlined</u>
小号文本
对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。
你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。
<small>This line of text is meant to be treated as fine print.</small>
着重
通过<strong>强调一段文本。
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
斜体
用<em>斜体强调一段文本。
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
文本对齐
可以使用类.text-left .text-center .text-right使文本对齐，也可以使用css样式text-align使文本对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
改变大小写
通过这几个类可以改变文本的大小写。
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，鼠标移至上面时会变成带有“问号”的指针，等一会就会出现title表示的完整内容。所以必须要包含 title 属性。
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
<address><strong>Twitter, Inc.</strong><br>1355 Market Street, Suite 900<br>San Francisco, CA 94103<br><abbr title="Phone">P:</abbr> (123) 456-7890
</address>
引用
在你的文档中引用其他来源的内容。
直接引用
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
命名来源
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<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>
列表
无序列表
排列顺序无关紧要的一列元素。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
<ul><li>...</li>
</ul>
有序列表
顺序至关重要的一组元素。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
<ol><li>...</li>
</ol>
无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
<ul class="list-unstyled"><li>...</li>
</ul>
水平排列的列表
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
内容一 内容二 内容三
<ul class="list-inline"><li>...</li>
</ul>
描述性列表
带有描述的短语列表。
Description lists：
A description list is perfect for defining terms.
Euismod：
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta：
Etiam porta sem malesuada magna mollis euismod.
<dl><dt>标题1</dt><dd>描述内容</dd><dt>标题2</dt><dd>描述内容</dd>
</dl>
水平排列的描述
添加类.dl-horizontal 可以让 <dl> 内的标题及其描述排在一行。 <dl> 的默认样式是垂直排列在一起的。
标题1 描述内容1
标题2 描述内容2
<dl class="dl-horizontal"><dt>标题1</dt><dd>描述内容</dd><dt>标题2</dt><dd>描述内容</dd>
</dl>
自动截断
通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的标题。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。
代码
内联代码
通过 <code> 标签包裹内联样式的代码片段。
For example, <section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
用户输入
通过 <kbd> 标签标记用户通过键盘输入的内容。
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>
代码块
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>
还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
变量
通过 <var> 标签标记变量。
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
程序输出
通过 <samp> 标签来标记程序输出的内容。
This text is meant to be treated as sample output from a computer program.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
表格
基本实例
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table"><caption>Optional table caption.</caption><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped"><caption>表格标题</caption><thead><tr><th>表头</th></tr></thead><tbody><tr><td>表体</td></tr></tbody>
</table>
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-bordered">...
</table>
鼠标悬停响应
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-hover">...
</table>
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
<table class="table table-condensed">...
</table>
表格颜色
通过这些状态类可以为某一行或某个单元格设置颜色。
| Class | 描述 |
|---|---|
.active
|
鼠标悬停在行或单元格上时所设置的颜色 |
.success
|
标识成功或积极的动作 |
.info
|
标识普通的提示信息或动作 |
.warning
|
标识警告或需要用户注意 |
.danger
|
标识危险或潜在的带来负面影响的动作 |
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr><tr><td class="active">...</td><td class="success">...</td><td class="warning">...</td><td class="danger">...</td><td class="info">...</td>
</tr>
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，会在小屏幕设备上水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive"><table class="table">...</table>
</div>
表单
规范实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素包裹在 .form-group 中可以获得最好的排列。
<form><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="Pwd" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="Pwd" placeholder="Password"></div></div><div class="form-group"><label class="col-md-2 control-label" for="sex">性别</label><div class="col-md-5"><div class="radio-inline"><input type="radio" name="sex" id="sex-man" value="man" checked />男</div><div class="radio-inline"><input type="radio" name="sex" id="sex-woman" value="woman" />女</div></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>
表单使用注意事项
- 不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
- 一定要添加
label标签。
如果你不想显示label中的文本内容，**你可以通过为label设置.sr-only类将其隐藏。**但是如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别。
水平排列的表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
自定义设置宽度
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。当然，你也可以根据自己的需求，通过**百分比%**来自定义宽度
水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<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></form>
被支持的控件
表单布局实例中展示了其所支持的标准表单控件。
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
注意事项
必须添加类
form-control,这样才能起作用。必须添加正确的ype类型声明
只有正确设置了
type属性的输入控件才能被赋予正确的样式。
<input type="text" class="form-control" placeholder="Text input">
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textarea class="form-control" rows="3"></textarea>
多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
默认排列（垂直）
<div class="form-group"><label class="col-md-2 control-label" for="sex">性别</label><div class="col-md-5"><div class="radio"><input type="radio" name="sex" id="sex-man" value="man" checked />男</div><div class="radio"><input type="radio" name="sex" id="sex-woman" value="woman" />女</div></div>
</div><div class="form-group"><label class="col-md-2 control-label" for="sex">爱好</label><div class="col-md-5"><div class="checkbox"><input type="checkbox" name="sex" id="sex-man" value="man" checked />篮球</div><div class="checkbox"><input type="checkbox" name="sex" id="sex-woman" value="woman" />桌球</div></div>
</div>
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
<div class="form-group"><label class="col-md-2 control-label" for="sex">性别</label><div class="col-md-5"><div class="radio-inline"><input type="radio" name="sex" id="sex-man" value="man" checked />男</div><div class="radio-inline"><input type="radio" name="sex" id="sex-woman" value="woman" />女</div></div>
</div><div class="form-group"><label class="col-md-2 control-label" for="sex">爱好</label><div class="col-md-5"><div class="checkbox-inline"><input type="checkbox" name="sex" id="sex-man" value="man" checked />篮球</div><div class="checkbox-inline"><input type="checkbox" name="sex" id="sex-woman" value="woman" />桌球</div></div>
</div>
下拉列表（select）
<select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
</select>
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。
<select multiple class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
</select>
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
<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>
</form>
禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled" disabled>
fieldset整体禁用
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。
<a> 标签的链接功能不受影响
默认情况下，浏览器会将 <fieldset disabled> 内所有的原生的表单控件（<input>、<select> 和 <button> 元素）设置为禁用状态，防止键盘和鼠标与他们交互。然而，如果表单中还包含 <a ... class="btn btn-*"> 元素，并且不会阻止键盘用户能够获取焦点或激活这些链接。所以为了安全起见，建议使用自定义 JavaScript 来禁用这些链接。
只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示。
<div class="form-group has-success"><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 has-error"><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>
控件尺寸
宽度尺寸
通过向控件的父元素添加.col-lg-* 类似的类可以为控件设置宽度。
<div class="form-group has-success"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-lg-8"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div>
</div>
<div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-6"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div>
</div>
高度尺寸
通过向控件添加类input-lg可以比默认值高一点；类.input-sm比默认值低一点。
<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>
按钮
可作为按钮使用的元素
<a>、<button> 或 <input> 元素添加按钮类btn btn-default等，即可使用 Bootstrap 提供的样式。
<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">
注意事项
- 按钮类在导航和导航条组件只支持
<button>元素。 - 如果
<a>元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button"属性。 - 我们总结的最佳实践是：强烈建议尽可能使用
<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
（默认样式）Default （首选项）Primary （成功）Success （一般信息）Info （警告）Warning （危险）Danger （链接）Link
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button><!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button><!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button><!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button><!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
设置尺寸
方式一
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
- （大按钮）Large button
- （默认尺寸）Default button
- （小按钮）Small button
- （超小尺寸）Extra small button
<p><button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button><button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p><button type="button" class="btn btn-primary">（默认尺寸）Default button</button><button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p><button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button><button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p><button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button><button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
方式二
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
激活状态
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。只需要添加 .active 类就可以使按钮处于激活状态。
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
禁用状态
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。
button 元素
为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
a 元素
为基于 <a> 元素创建的按钮添加 .disabled 类。
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
图片
响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中，请添加 .center-block 类。
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded"> 添加了圆弧
<img src="..." alt="..." class="img-circle"> 圆形
<img src="..." alt="..." class="img-thumbnail"> 添加了padding
关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失。
×
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
响应式隐藏与可见
使用这些工具类可以方便的**针对不同设备展示或隐藏页面内容。**通过使用这些工具类可以在不同设备上提供不同的展现形式。
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
|---|---|---|---|---|
.visible-xs-*
|
可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm-*
|
隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md-*
|
隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg-*
|
隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs
|
隐藏 | 可见 | 可见 | 可见 |
.hidden-sm
|
可见 | 隐藏 | 可见 | 可见 |
.hidden-md
|
可见 | 可见 | 隐藏 | 可见 |
.hidden-lg
|
可见 | 可见 | 可见 | 隐藏 |
从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
| 类组 |
CSS display
|
|---|---|
.visible-*-block
|
display: block;
|
.visible-*-inline
|
display: inline;
|
.visible-*-inline-block
|
display: inline-block;
|
因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。
对Bootstrap的css基础样式进行总结归纳相关推荐
- CSS基础样式和排版文本段落
一.CSS基础样式 1.字体属性 font-family是字体属性 font-family:后面可以直接打出来字体的样式,或者直接选择 font-family: Times,"Times N ...
- CSS基础样式属性设置
文章目录 css基础样式与属性设置 一.宽和高 二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
- bootstrap的学习-基础样式和排版一
一.列表去除样式和横排排列 classs="list-unstyled","list-inline" 二.[表格].table 类指定基本样式,.table-s ...
- Bootstrap中CSS通用样式——排版，列表，代码，图片
一.排版 标题: 在Bootstrap4中,主要对标题样式做了如下规定: (1)重设上下外边距,margin-top值为0,margin-bottom:0.5rem. (2)固定所有标题行高为line ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单 ...
- 什么是css基础样式,CSS简介 - CSS | 绿叶学习网
一.CSS是什么 CSS,指的是Cascading Style Sheet(层叠样式表),是用来控制网页外观的一门技术.我们知道,前端最核心的3个技术是:HTML.CSS.JavaScript,三者的 ...
- Bootstrap—基础样式定义
本章主要是介绍Bootstrap默认的基础样式定义,利用这些基础的定义相互组合,完成页面的整体风格定义甚至是更具体的效果. Bootstrap应该是一个基础工具,它的好处在于已经帮你定义了一个基础的样 ...
- html 对话框 flatballoon,CSS纯样式实现箭头、对话框等形状
在使用第三方框架bootstrap的时候,本以为其是图片实现的小箭头,后来使用开发工具查看是用CSS来实现的,现记录如下: 理解完上面伪类的用法后,下面进入主题,直接贴上代码, border test ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
最新文章
- codeforces 700B Connecting Universities
- 计算机如何用vb文本加密,信息加密与隐藏工具的设计与实现VB231
- 视频压缩工具linux,Ubuntu视频转换工具-mencoder命令行参数
- spring简易学习笔记三(AOP)
- python系统路径_python中os模块简单了解（系统命令和路径的获取）
- mysql界面导出数据库有乱码_导出的MYSQL数据库是乱码还可以变回中文吗
- RN：Android 开发记录
- linux火狐怎么切换到ie内核,如何切换浏览器火狐 FIREFOX和IE之间切换
- 服务器如何备份系统和配置,windows server 2008和2012如何设置完整备份+增量备份
- net项目怎么兼容Java_是否能让JAVA 和 .net框架共存
- 微处理器 微型计算机系统,（计算机）什么是“微处理器、微型计算机、微型计算机系统,以及它们区别和联系?...
- 站内信系统数据库设计
- mysql攻城掠地_攻城掠地单机武将修改造出自己心目中大神.doc
- socket10053
- ＜ Linux ＞ 操作系统
- 软件面试常见题目（转帖）
- vscode连接电脑虚拟机上的ubuntu
- 【论文解读】Optimizing FPGA-based Accelerator Design for Deep Convolutional Neural Networks
- jquery仿凡客诚品图片切换的效果实例代码
- 硬件设计经验-②去耦电容