全局CSS样式
一、概览
需要将页面设置为 HTML5 文档类型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
二、栅格系统
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
移动设备和桌面屏幕
.col-xs-12 .col-md-8 .col-xs-6 .col-md-4
手机、平板、桌面
.col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4
列偏移
.col-md-4 .col-md-4 .col-md-offset-4
三、排版
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
通过添加 .lead 类可以让段落突出显示。
<p class="lead">...</p>
高亮文本
You can use the mark tag to <mark>highlight</mark> 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 no longer accurate.</s>
插入文本
<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>
着重
<strong>rendered as bold text</strong>
斜体
<em>rendered as italicized text</em>
对齐
<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="HyperText Markup Language" class="initialism">HTML</abbr> //.initialism让字体变得更小
地址
<address>
<strong>Twitter, Inc.</strong><br> //需要<br>换行
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
引用
<blockquote class="blockquote-reverse"> //默认是靠左对其，加上.blockquote-reverse后靠右
<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>
无样式列表
<ul class="list-unstyled">
<li>...</li>
</ul>
内联列表，将所有元素放置于同一行。
<ul class="list-inline">
<li>...</li>
</ul>
水平排列的描述
<dl class="dl-horizontal"> //默认是竖直方向排列dt与dd
<dt>...</dt>
<dd>...</dd>
</dl>
四、代码
内联代码
For example, <code><section></code> should be wrapped as inline.
用户输入
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>
变量
<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>
五、表格
基本 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
<table class="table">
...
</table>
条纹状表格
<table class="table table-striped">
...
</table>
带边框的表格
<table class="table table-bordered">
...
</table>
鼠标悬停
<table class="table table-hover">
...
</table>
紧缩表格
<table class="table table-condensed">
...
</table>
状态类可以为行或单元格设置颜色。
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<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 元素内，即可创建响应式表格
<div class="table-responsive">
<table class="table">
...
</table>
</div>
六、表单
基本实例
.form .form-group .sr-only .form-control p.help-block .radio .checkbox .btn .btn-default .btn-success .etc
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
.sr-only可将该类隐藏
<form role="form">
<div class="form-group">
<label class="sr-only" for="userName">User Name</label>
<input id="userName" class="form-control" placeholder="username..." type="text">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input id="pwd" class="form-control" placeholder="password..." type="password">
</div>
<div class="form-group">
<label for="file">File Input</label>
<input id="file" type="file" value="search...">
<p class="help-block">for .txt only</p>
</div>
<div class="form-group radio">
<label for="male"><input type="radio" id="male" name="sex" class="radio">male</label>
<label for="female"><input type="radio" id="female" name="sex" class="radio">female</label>
</div>
<div class="form-group checkbox">
<label><input type="checkbox">select me</label>
</div>
<button type="button" class="btn btn-success">Submit</button>
</form>
内联表单
只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
一定要添加 label 标签
<form class="form-inline" role="form">
...
</form>
水平排列的表单
为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，将改变 .form-group 的行为当做.row功能
<form class="form-horizontal" role="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="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>
支持的控件
输入框
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
文本域
<textarea class="form-control" rows="3"></textarea>
多选和单选框
.disabled禁用
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
.checkbox-inline 或 .radio-inline 类可以使这些控件排列在一行。
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
下拉列表
multiple属性可多选
<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" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
...
</form>
.disabled禁用
<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。 注意此时<a> 标签的链接功能不受影响，需手动通过js代码禁用
校验状态，展现显著颜色
添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback"> //设置.has-feedback类，并结合适当的字体图标，给输入框添加额外的图标
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> //额外的图标所需的span
</div>
</div>
</form>
控件尺寸
基本的竖直方向的表单通过.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>
当水平排列时.form-horizontal，给外层.form-group添加.form-group-lg 或 .form-group-sm 类，以保证label框与放大的input等控件框水平对齐
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
...
七、按钮
预定义样式
<!-- 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 可以获得不同尺寸的按钮。
.btn-block 类可以将其拉伸至父元素100%的宽度
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
激活与禁用状态
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> //用超链接模拟button按钮样式
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> //同样禁用后仍可链接，需通过js禁用功能
八、图片
响应式图片 .img-responsive
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
<img src="..." alt="..." class="img-rounded"> //圆角矩形
<img src="..." alt="..." class="img-circle"> //圆形
<img src="..." alt="..." class="img-thumbnail"> //带边框的缩略图
九、辅助类
文本颜色
<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>
背景底色
<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>
关闭按钮
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
三角符号
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
block居中
<div class="center-block">...</div>
Bootstrap学习笔记之全局CSS样式（一）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章