全局CSS样式
-
概览
- HTML5文档类型
<!DOCTYPE html> <html lang="zh-CN"> ... </html>- 移动设备优先
为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。(依情况而定)
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">- Normalize.css
重置浏览器之间的样式，让浏览器保持一致 - 布局模式
container 固定模式布局
container-fluid 流式布局
-
栅格系统
栅格系统用于通过一系列的行（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-* 不存在， 也影响大屏幕设备。
- 栅格参数
| 超小屏幕 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 (≥992px) | 大屏幕 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | A | A | A |
| .container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | 12 | 12 | 12 |
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px (每列左右均有 15px) | 30px (每列左右均有 15px) | 30px (每列左右均有 15px) | 30px (每列左右均有 15px) |
- 列偏移
col-lg-push-2 left值
col-lg-pull-2 right值
col-lg-offset-2 marginleft值
<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>
- 嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .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>
- 屏幕显示隐藏类
hidden-md 中屏隐藏
visible-lg 大屏显示
<div class="row visible-md">
<div class="col-lg-12 s">1</div>
</div>
<div class="row hidden-lg">
<div class="col-md-2 s">1</div>
<div class="col-md-10 s">2</div>
</div>
-
排版
- 标题
HTML 中的所有标题标签，< h1 > 到 < h6 > 均可使用，在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
<p class="h1">主标题<span class="small">副标题</span></p> <p class="h2">主标题<span class="small">副标题</span></p> <p class="h3">主标题<span class="small">副标题</span></p> <p class="h4">主标题<span class="small">副标题</span></p> <p class="h5">主标题<span class="small">副标题</span></p> <p class="h6">主标题<span class="small">副标题</span></p>- 突出显示文本< mark >
You can use the mark tag to <mark>highlight</mark> text.- 被删除的文本
对于被删除的文本使用 < del > 标签。
<del>This line of text is meant to be treated as deleted text.</del>- 无用文本
对于没用的文本使用 < s > 标签。
<s>This line of text is meant to be treated as no longer accurate.</s>- 插入文本
额外插入的文本使用 < ins > 标签。（添加下划线）
<ins>This line of text is meant to be treated as an addition to the document.</ins>- 对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
<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>- 改变大小写
通过这几个类可以改变文本的大小写。
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>- 基本缩略语
<abbr title="attribute">attr</abbr>- 首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>- 地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。
<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> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>- 引用
在文档中引用其他来源的内容。
//默认样式引用 <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>- 列表
list-inline 内联列表（水平列表）
list-unstyled 去点 去内边距
<ul class="list-group"> <li class="list-group-item"><a class="list-group-item" href="#">1</a></li> <li class="list-group-item"><a class="list-group-item" href="#">2</a></li> <li class="list-group-item"><a class="list-group-item" href="#">3</a></li> <li class="list-group-item"><a class="list-group-item" href="#">4</a></li> </ul>- 自定义列表
dl-horizontal 水平类
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>- 表格相关类
- 通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
- 添加 .table-bordered 类为表格和其中的每个单元格增加边框。
- 通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
- 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
- 通过这些状态类可以为行或单元格设置颜色：.active 鼠标悬停在行或单元格上时所设置的颜色；success 标识成功或积极的动作；info 标识普通的提示信息或动作；warning 标识警告或需要用户注意；danger 标识危险或潜在的带来负面影响的动作
- 将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。（响应式表格）
<table class="table table-striped table-bordered table-hover table-condensed table-responsive"> <tr class="active"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr class="success"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr class="info"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr class="warning"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table>- 基本表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form action=""> <div class="form-group"> <label for="">姓名：</label> <input class="form-control" type="text"/> </div> <div class="form-group"> <label for="">姓名：</label> <input class="form-control" type="text"/> </div> <div class="form-group"> <label for="">姓名：</label> <input class="form-control" type="text"/> </div> </form>- 内联表单
为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
<form action="" class="form-inline"> <div class="form-group"> <label for="">姓名：</label> <input class="form-control" type="text"/> </div> <div class="form-group"> <label for="">姓名：</label> <input class="form-control" type="text"/> </div> <div class="form-group"> <label for="">姓名：</label> <input class="form-control" type="text"/> </div> </form>- 水平排列的表单
通过为表单添加 .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> <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>- 按钮
- 可作为按钮使用的标签或元素< a >、< button > 或 < input >
<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">- 使用下面列出的类可以快速创建一个带有预定义样式的按钮。
（默认样式）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 就可以获得不同尺寸的按钮。
<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>- 图片的形状
<img class="img-circle" src="img/baidu.png" alt=""/> <img class="img-rounded" src="img/baidu.png" alt=""/> <img class="img-thumbnail" src="img/baidu.png" alt=""/> <img class="img-responsive" src="img/baidu.png" alt=""/>- 文本颜色类
<p class="text-danger">apibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">apibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-info">apibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-success">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>- 背景色辅助类
<p class="text-danger bg-primary">apibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning bg-danger">apibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-info bg-success">apibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-success bg-warning">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>- 关闭按钮
<span class="close">×</span>- 快速浮动及清除浮动
<div class="clearfix"> <div class="pull-left" style="width: 100px;height: 100px; background: red"></div> <div class="pull-right" style="width: 100px;height: 100px; background: blue"></div> </div> <div style="width:400px;height: 100px; background: orange"></div>- 块元素居中
<div class="center-block" style="width: 100px;height: 100px; background: deeppink"></div>- 显示隐藏
<div class="show">apibus, tellus ac cursus commodo, tortor mauris nibh</div>//显示 <div class="hide">apibus, tellus ac cursus commodo, tortor mauris nibh</div>//隐藏 - 标题
扫一扫
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
