设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
HTML5 文档类型
<!DOCTYPE html> <html lang="zh-CN">... </html>
移动设备优先
Bootstrap是移动设备优先哒
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1.为了确保适当的绘制和触屏缩放,需要在 <head>
之中添加 viewport 元数据标签。
2.width=device-width告诉浏览器页面的宽度应该等于设备的宽度
3.initial-scale=1页面将是原本尺寸展示,如果后面是2.0的话,就是是将页面放大两倍
4.maximum-scale=1最大放大至原先大小
5.user-scalable=no可以禁用其缩放(zooming)功能。
布局容器
容器类为包裹页面内容和栅格系统哒。由于 padding
等属性的原因,以下两种容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
栅格系统
相应式的网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
工作原理
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
- 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 通过为“列”设置 padding 属性,从而创建列与列之间的间隔。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行”所包含的“列”抵消掉了padding。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
自动 | 750px | 970px | 1170px |
类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
注:.
1.col-md-offset-*可以使列向右偏移
2.col-md-push-* 和 .col-md-pull-* 类就可以改变列的顺序。
排版
1.主标题副标题<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
2.Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。
3..lead 类可以让段落突出显示。<p class="lead">...</p>
4.被删除的文本<del>delete text.</del>
5.无用文本<s>text.</s>
6.额外插入的文本使用 <ins>
标签。
7.为文本添加下划线,使用 <u>
标签。
8.小号字体用<small>标签,被包裹其内的文本将被设置为父容器字体大小的 85%。
9.着重字体使用 <strong> 标签。
10.字体倾斜用 <em> 标签
11.文本对齐用如下类
<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>
12.改变字体的大小写,首字母大写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
13.缩写语用<abbr>标签,用title标出完整词汇
<abbr title="attribute">attr</abbr>
14.无序列表
<ul><li>...</li> </ul>
15.有序列表
<ol><li>...</li> </ol>
16.无样式列表
<ul class="list-unstyled"><li>...</li> </ul>
17.内联列表:并添加少量的内补(padding),将所有元素放置于同一行。
<ul class="list-inline"><li>...</li> </ul>
18.带有描述的短语列表
<dl><dt>...</dt><dd>...</dd> </dl>
19.水平排列描述列表
<dl class="dl-horizontal"><dt>...</dt> <dd>...</dd> </dl>
text-overflow
属性可以将左侧长的部分截断显示
代码
1.内联代码需要<code>标签。
For example, <code><section></code>
2.用户输入用 <kbd>
标签标记用户通过键盘输入的内容。
3.代码块用<pre>标签。
<pre><p>Sample text here...</p></pre>
4.用<var>
标签标记变量。
例如:y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
5.程序输出,通过 <samp> 标签来标记程序输出的内容。
表格
1.基本表格,用<table>
标签添加 .table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<table class="table">... </table>
2.条纹状表格,通过 .table-striped
类可以给 <tbody>
之内的每一行增加斑马条纹样式。(是依赖 :nth-child
CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。)
<table class="table table-striped">... </table>
3.带边框的表格,通过添加.table-bordered类来实现的。
<table class="table table-bordered">... </table>
4.鼠标悬停,通过添加.table-hover类实现的。
<table class="table table-bordered">... </table>
5.紧缩表格,是通过添加table-condensed 类实现的。单元格中的内补白(padding)均会减半。
<table class="table table-condensed">... </table>
6.状态类,通过这些状态类可以为行或单元格设置颜色。可以添加在<tr>上,也可添加在<td>上。
<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>
7.响应式表格。将任何 .table
元素包裹在 .table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
<div class="table-responsive"><table class="table"> ... </table> </div>
表单
1.基本实例: .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的
<form role="form"><div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div>
</form>
2.内联表单:.form-inline,视口宽度再小的话就会使表单折叠;在内联表单,我们将这些元素的宽度设置为 width: auto;;
一定要添加 label 标签,如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div>
</from>
3.水平排列的表单,通过为表单添加 .form-horizontal
类,并联合使用 Bootstrap 预置的栅格类,可以将 label
标签和控件组水平并排布局。这样做将改变 .form-group
的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row
了。
4.被支持的控件。包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件:text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和 color
。
1)输入框:<input type="text" class="form-control" placeholder="Text input">
2)文本域:<textarea class="form-control" rows="3"></textarea>
3)多选和单选框:
<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>
10.只读输入框,用 readonly 属性
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
11.被禁用输入框,用 disabled 属性
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
12.被禁用的为fieldset,<fieldset>
设置 disabled
属性,可以禁用 <fieldset>
中包含的所有控件。
13.验证状态:Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning
、.has-error
或 .has-success
类到这些控件的父元素即可。任何包含在此元素之内的 .control-label
、.form-control
和 .help-block
元素都将接受这些校验状态的样式。
<div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control" id="inputSuccess1"> </div>
14.控件的尺寸:通过 .input-lg
类似的类可以为控件设置高度,通过 .col-lg-*
类似的类可以为控件设置宽度。
15.水平排列的表单组的尺寸:通过添加 .form-group-lg
或 .form-group-sm
类,为 .form-horizontal
包裹的 label
元素和表单控件快速设置尺寸。
16.辅助文本:针对表单控件的“块(block)”级辅助文本。
按钮
1.预定义样式:
<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>
2.尺寸:使用 .btn-lg
、.btn-sm
或 .btn-xs
可以获得不同尺寸的按钮。
3. 通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
4.激活状态:
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
5.禁用状态:<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
6.按钮类:为 <a>
、<button>
或 <input>
元素应用按钮类。注:虽然按钮类可以应用到 <a>
和 <button>
元素上,但是,导航和导航条只支持 <button>
元素。
图片
1.响应式图片:.img-responsive
类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;
和 height: auto;
属性,从而让图片在其父元素中更好的缩放。
<img src="..." class="img-responsive" alt="Responsive image">
2.图片的形状:
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
辅助类
1.Contextual colors:
<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>
2. Contextual backgrounds
<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>
3.关闭按钮:
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
4.三角符号:
<span class="caret"></span>
5.快速浮动:
<div class="pull-left">...</div> <div class="pull-right">...</div>