全局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:#">first.last@example.com</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> 元素都将被默认设置宽度属性为 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@example.com</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>