bootstrap 代码片段

响应式图像

.img-responsive{  display:inline-block;  height:auto; max-width:100%;}

dl reset

dl {margin-top: 0;margin-bottom: 20px;}

dd {margin-left: 0;}

dl实现filter目录

@media (min-width: 768px) {.dl-horizontal dt {float: left;width: 160px;overflow: hidden;clear: left;text-align: right;text-overflow: ellipsis;white-space: nowrap;  }.dl-horizontal dd {margin-left: 180px;  }}

<kbd>ctrl+c</kbd>

文本一旦超出这个高度，就会在Y轴出现滚动条。

.pre-scrollable {max-height: 340px;overflow-y: scroll;}

表单结构

<form class="form-inline" role="form">

<div class="form-group">

<label class="sr-only" for="exampleInputEmail2">邮箱</label>

<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">

</div>

<div class="form-group">

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

<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">

</div>

<div class="checkbox">

<label>

<input type="checkbox"> 记住密码

</label>

</div>

<button type="submit" class="btn btn-default">进入邮箱</button>

</form>

最新浏览器支持input focus状态

input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。我们一起来验证一下：

按钮点击状

box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

统一使用三角

<span class="caret"></span

.caret {  display: inline-block;  width: 0;  height: 0;  margin-left: 2px;  vertical-align: middle;  border-top: 4px solid;  border-right: 4px solid transparent;  border-left: 4px solid transparent;}

向上弹起的下拉菜单

.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu {  top: auto;  bottom: 100%;  margin-bottom: 1px;}

导航加下拉菜单（二级导航）

<ul class="nav nav-pills">     <li class="active"><a href="##">首页</a></li>     <li class="dropdown">        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>        <ul class="dropdown-menu">            <li><a href="##">CSS3</a></li>            …       </ul>     </li>     <li><a href="##">关于我们</a></li></ul>

宽度百分百

.navbar-fixed-bottom {  position: fixed;  right: 0;  left: 0;  z-index: 1030;}

字体加粗

font-weight: 700;

徽章：

min-width: 10px;

警示框--可关闭的警示框

<button class="close" type="button" data-dismiss="alert">&times;</button>

自定义进度条

<div class="progress">       <div class="progress-bar" style="width:40%"></div></div>