bootstrap3简单玩法
Bootstrap v3
Bootstrap v3 是一个流行的前端框架，它提供了一系列的模板、组件和工具，可以帮助开发者快速地构建响应式的网站和应用程序。
以下是 Bootstrap v3 的一些常见应用：
-
响应式布局：Bootstrap v3 提供了一个易于使用的网格系统，可以让开发者轻松地构建响应式网站。网格系统使用行和列来创建网页布局，可以适应不同的屏幕尺寸，从而在不同的设备上获得更好的用户体验。
-
样式化的组件：Bootstrap v3 提供了一系列的样式化组件，如按钮、表单、导航栏等，开发者可以直接使用这些组件来快速构建网站和应用程序。
-
JavaScript 插件：Bootstrap v3 还提供了一些常用的 JavaScript 插件，如轮播、模态框、下拉菜单等，可以帮助开发者实现更丰富的交互效果和功能。
-
自定义主题：Bootstrap v3 提供了一个易于定制的主题系统，开发者可以按照自己的需求定制特定颜色、字体等样式，从而创造出独特的设计风格。
总的来说，Bootstrap v3 是一个非常实用的前端框架，可以大大提高开发者的工作效率，同时还能帮助开发者创建出现代化、响应式、易于维护的网站和应用程序。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
...
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
...
Title
效果
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
简介
栅格系统用于通过一系列的行（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-*不存在， 也影响大屏幕设备。
实例：从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
Title
00
00
00
00
00
00
00
00
00
00
00
00
1
2
3
4
5
6
7
8
9
效果
排版
标题
HTML 中的所有标题标签， 到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
| h1. Bootstrap heading |
Semibold 36px |
| h2. Bootstrap heading |
Semibold 30px |
| h3. Bootstrap heading |
Semibold 24px |
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
| h1. Bootstrap heading Secondary text |
| h2. Bootstrap heading Secondary text |
| h3. Bootstrap heading Secondary text |
Copy
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
中心内容
通过添加 .lead 类可以让段落突出显示。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
...
内联文本元素
Marked text
You can use the mark tag to highlight text.被删除的文本
对于被删除的文本使用
This line of text is meant to be treated as deleted text.无用文本
对于没用的文本使用
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as no longer accurate.插入文本
额外插入的文本使用 标签。
This line of text is meant to be treated as an addition to the document.
This line of text is meant to be treated as an addition to the document.带下划线的文本
为文本添加下划线，使用 标签。
This line of text will render as underlined
This line of text will render as underlined利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。
小号文本
对于不需要强调的inline或block类型的文本，使用 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 元素被设置不同的 font-size 。
你还可以为行内元素赋予 .small 类以代替任何 元素。
This line of text is meant to be treated as fine print.
This line of text is meant to be treated as fine print.强调着重
通过增加 font-weight 值强调一段文本。
The following snippet of text is rendered as bold text.
rendered as bold text斜体书写
用斜体强调一段文本。
The following snippet of text is rendered as italicized text.
rendered as italicized textAlternate elements
在 HTML5 中可以放心使用 和 标签。 用于高亮单词或短语，不带有任何着重的意味；而 标签主要用于发言、技术词汇等。
对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
改变大小写
通过这几个类可以改变文本的大小写。
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
Lowercased text.
Uppercased text.
Capitalized text.
地址格式
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890Full Name
[email protected]
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
[email protected]
引用来源
在你的文档中引用其他来源的内容。
默认样式的引用
将任何 HTML 元素包裹在 中即可表现为引用样式。对于直接引用，我们建议用 标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
实现代码
Title
h1.bootstrap heading Secondary text
h2.bootstrap heading
h3.bootstrap heading
h4.bootstrap heading
h5.bootstrap heading
h1.bootstrap heading secondary text
you can use the mark tag to highlight text.
This line of text is meant to be treated as delete text.
This line of text is meant to be tread as an addition to the document.
left aligned text.
center aligned text.
right aligned text.
justified text.
no wrap text.
Lowercased text.
Uppercased text.
Capitalized text.
- 1
- 2
- 3
代码效果
表格
基本实例
为任意 Copy 通过 条纹状表格是依赖 Copy 添加 Copy 通过添加 Copy 通过添加 Copy 通过这些状态类可以为行或单元格设置颜色。 单独的表单控件会被自动赋予一些全局样式。所有设置了 标签添加
.table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
...
条纹状表格
.table-striped 类可以给 之内的每一行增加斑马条纹样式。
跨浏览器兼容性
:nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
...
带边框的表格
.table-bordered 类为表格和其中的每个单元格增加边框。
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
...
鼠标悬停
.table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
...
紧缩表格
.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
...
状态类
Class
描述
.active鼠标悬停在行或单元格上时所设置的颜色
.success标识成功或积极的动作
.info标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作
#
Column heading
Column heading
Column heading
1
Column content
Column content
Column content
2
Column content
Column content
Column content
3
Column content
Column content
Column content
4
Column content
Column content
Column content
5
Column content
Column content
Column content
6
Column content
Column content
Column content
7
Column content
Column content
Column content
8
Column content
Column content
Column content
9
Column content
Column content
Column content
...
...
...
...
...
...
...
...
...
...
代码实现
表格
ID
NAME
AGE
GENDER
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
代码效果
表单
基本实例
.form-control 类的 、