bootstrap 之 css

概览

----------------------------------------------

移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1.0">

禁用缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

响应式图片：不超过其父元素宽度

<img src="..." class="img-responsive" alt="Responsive image">

页面内容居中对齐：用.container包裹页面上的内容

<div class="container">

....

</div>

全宽布局：将内容区域包裹在一个容器元素内，并且赋予padding: 0 15px;

栅格

----------------------------------------------

栅格布局

<div class="container">

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

</div>

</div>

排版

----------------------------------------------

标题及副标题

<h3>h3. Bootstrap heading<small>我是副标题</small></h3>

段落突出显示

<p class="lead">...</p>

加粗、小字体、斜体

strong

small

em

文本对齐：text-left text-center text-right

<p class="text-left">Left aligned text.</p>

文本强调

<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>

缩略语：也可以为缩略语添加.initialism可以将其font-size设置的更小些。

<abbr title="attribute" class="initialism">哈哈</abbr>

引用：

（1）也可以使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

（2）也可以添加<small>标签来注明引用来源。

<blockquote class="pull-right">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<small>Someone famous in Source Title</small>

</blockquote>

无样式列表：只针对直接子元素

<ul class="list-unstyled">

<li>Phasellus iaculis neque</li>

<li>Phasellus iaculis neque</li>

</ul>

内联列表：通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

<ul class="list-inline">

<li>...</li>

<li>...</li>

</ul>

垂直/水平排列：可以让<dl>内短语及其描述排在一行。

<dl class="dl-horizontal">

<dt>...</dt>

<dd>...</dd>

</dl>

自动截断

<p class='text-overflow'>Fusce dapibus, tellus ac cursus commodo.</p>

代码

----------------------------------------------

code标签

For example, <code><section></code> should be wrapped as inline.

pre标签：还可以使用.pre-scrollable class，其作用是设置max-height为350px，并在垂直方向展示滚动条。

<pre><p>Sample text here...</p></pre>

表格

----------------------------------------------

基本样式：为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。

<table class="table">

...

</table>

条纹状：.table-striped

<table class="table table-striped">

...

</table>

带表框：.table-bordered

<table class="table table-bordered">

...

</table>

鼠标悬停：.table-hover

<table class="table table-hover">

...

</table>

紧缩表格：.table-condensed

<table class="table table-condensed">

...

</table>

状态class：为 tr 或 td 设置class

.active 鼠标悬停在行或单元格上时所设置的颜色

.success 标识成功或积极的动作

.warning 标识警告或需要用户注意

.danger 标识危险或潜在的带来负面影响的动作

响应式表格：其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。

<div class="table-responsive">

<table class="table">

...

</table>

</div>

表单

----------------------------------------------

基本样式：.form .form-group .form-control .help-block

<form role="form">

<div class="form-group">

<label for="exampleInputFile">File input</label>

<input type="text" id="exampleInputFile" class="form-control">

<p class="help-block">Example block-level help text here.</p>

</div>

<div class="checkbox">

<label><input type="checkbox"> Check me out</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

内联表单：.form-inline .sr-only （注意：需要为 input textarea select设置宽度；需要为表单元素设置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">

<label class="sr-only" for="exampleInputPassword2">Password</label>

<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">

</div>

<div class="checkbox">

<label>

<input type="checkbox"> Remember me

</label>

</div>

<button type="submit" class="btn btn-default">Sign in</button>

</form>

水平排列：.form-horizontal .col-sm-* .control-label .col-sm-offset-*

<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">

<div class="col-sm-offset-2 col-sm-10">

<button type="submit" class="btn btn-default">Sign in</button>

</div>

</div>

</form>

检验状态：.has-warning .has-error .has-success

<div class="form-group has-warning">

<label class="control-label" for="inputWarning">Input with warning</label>

<input type="text" class="form-control" id="inputWarning">

</div>

控件尺寸：.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">

调整列尺寸

<div class="row">

<div class="col-xs-2">

<input type="text" class="form-control" placeholder=".col-xs-2">

</div>

<div class="col-xs-3">

<input type="text" class="form-control" placeholder=".col-xs-3">

</div>

<div class="col-xs-4">

<input type="text" class="form-control" placeholder=".col-xs-4">

</div>

</div>

按钮

----------------------------------------------

不同样式：.btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link

<button type="button" class="btn btn-danger">Danger</button>

尺寸：.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素。

<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>

活动状态：.active

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>

<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态：disabled="disabled"

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

图片

----------------------------------------------

圆角、圆形、缩略图型

<img src="..." alt="..." class="img-rounded">

<img src="..." alt="..." class="img-circle">

<img src="..." alt="..." class="img-thumbnail">

工具class

----------------------------------------------

关闭按钮

<button type="button" class="close" aria-hidden="true">×</button>

下拉三角

<span class="caret"></span>

浮动：如果是用于对齐导航条上的组件，请务必使用.navbar-left 或 .navbar-right。

<div class="pull-left">...</div>

<div class="pull-right">...</div>

清除浮动

<div class="clearfix">...</div>

显示隐藏

<div class="show">...</div>

<div class="hidden">...</div>

屏幕阅读器：使用.sr-only可以针对除了屏幕阅读器之外的所有设备隐藏一个元素。

<a class="sr-only" href="#content">Skip to main content</a>

其他class

----------------------------------------------

针对屏幕尺寸显示/隐藏



针对浏览器/打印机显示隐藏