bootstrap_3.0
在学习bootstrap_3.0的时候的一些记录
栅格系统
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
2/3.col-md-81/3.col-md-41/3.col-md-41/3.col-md-41/3.col-md-41/2.col-md-61/2.col-md-6排版
h1. 正标题 small用以标记副标题
h2. 正标题 small用以标记副标题
h3. 正标题 small用以标记副标题
h4. 正标题 small用以标记副标题
h5. 正标题 small用以标记副标题
h6. 正标题 small用以标记副标题
段落一：段落之间1/2行高外边距 Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
段落二：.lead可以让段落突出显示Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
small 小号文本
strong 强调文本
em 斜体强调文本
b 不增加额外重要性的同事将词或短于高亮显示
p的.text-left 左对齐
p的.text-center 居中
p的.text-right 右对齐
p的.text-muted
p的.text-primary
p的.text-success
p的.text-info
p的.text-warning
p的.text-danger
span.label-muted
span.label-primary
span.label-success
span.label-info
span.label-warning
span.label-danger
缩略语
blockquote作为引用 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
来源：鼠标显示具体来源名称
blockquote的.pull-right让引用右对齐 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
来源：鼠标显示具体来源名称
- 短语1
- 短语对应的描述 带自动换行cription list is perfect for defining terms.
- 短语222222
- 短语对应的描述 cription list is perfect for defining terms.
- 短语1
- dl的dl-horizontal属性使短语跟描述排在同一行
- 短语222222
- 短语对应的描述 cription list is perfect for defining terms.
code标签包裹内联样式代码片段
pre标签用以展示多行代码 .pre-scrollable设置max-height为350px，并在垂直方向展示滚动条
表格
| xx | xx | xx |
|---|---|---|
| 100 | 200 | 300 |
| 400 | 500 | 600 |
表格标签示例
1. 默认表格样式
表格元素会自动设置一些基本的边框样式，以保证结构的可读性和维护性。更多的样式效果需要添加.table样式名。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
2. 条纹表格
通过给表格添加样式名.table-striped来添加一些美妙的斑马线效果。
注意：条纹表格的实现使用了:nth-child样式选择器，在IE7-IE8下是无效的。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
3. 有边框的表格
给整个表格添加圆角和边框来达到美化的效果。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
4. 紧凑的表格
通过添加样式名.table-condensed将单元格的内补白减半（从8像素减小到4像素），使得表格看起来更加的紧凑。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
5. 将它们都组合起来
随意的将这些有效的样式名组合起来，展现出表格的不同效果。
| Full name | |||
|---|---|---|---|
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
表单
基础表单
内联表单form.form-inline
搜索表单
水平对齐的表单
我们默认支持的是表单控件在右边的展示样式。列表如下：
- 文本输入框(text, password, email, etc)
- 复选框
- 单选框
- 下拉菜单
- 多选菜单
- 文件上传表单
- 多行文本输入框
输入框组
@
.00
$
.00
登陆表单，需要自己写css控制表单大小
进度条
基础效果
条纹效果.progress-striped
运动效果.progress-striped active
堆叠效果
下拉菜单
图片
Well嵌入效果
Well 默认嵌入效果
Well well-lg嵌入效果
Well well-sm嵌入效果
杂七杂八
警告框
alert-success
alert-info
alert-warning
alert-danger 警告框中的链接.alert-link
大屏幕介绍
标签
label-default label-primary label-success label-info label-warning label-danger徽章
未读文章 42胶囊式标签页 徽章
模态框 modal.js More Info
通过data-属性激活模态框
通过JavaScript调用激活模态框
$('#myModal').modal(options)
关于options选项
可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-backdrop=""。
$('#myModal').modal('toggle') ###< 手动启动或隐藏模态框
$('#myModal').modal('show') ###< 手动打开一个模态框
$('#myModal').modal('hide') ###< 手动隐藏一个模态框
标签页 tab.js More Info
home
profile
messages
setting
工具提示 tooltip.js More Info
data-属性
data-toggle ###< 触发的模块 data-placement ###< 显示位置 data-original-title ###< 提示内容
弹出框 popover.js More Info
data-属性
data-toggle ###< 触发的模块 data-content ###< 弹出框内容 data-original-title ###< 弹出框标题
