码迷,mamicode.com
首页 > 其他好文 > 详细

我的bootstrap日记

时间:2016-11-23 06:47:00      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:ble   data   ati   帮助   校验   value   风格   ase   new   

<!-- 常用格式 -->
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>

<!-- 列偏移 -->
<div class="col-md-offset-4 col-md-4"></div>
<div class="col-md-push-9 col-md-3"></div>
<div class="col-md-9 col-md-pull-3"></div>

<!-- 常用标记 -->
<small>副标题</small>
<mark>标记</mark>
<div class="lead">让段落突出</div>
<del></del>
<s></s>
<ins></ins>
<u></u>
<strong></strong>
<em></em>
<i></i>
<b></b>
<blockquote></blockquote>
<div class="pull-right"></div>
<div class="blockquote-reverse"></div>

<!-- 文本对齐 -->
<div class="text-left"></div>
<div class="text-center"></div>
<div class="text-right"></div>
<div class="text-justify"></div>

<div class="text-newrap"></div>
<div class="text-lowercase"></div>
<div class="text-uppercase"></div>
<div class="text-capitalize"></div> <!-- text-capitalize -->
<!-- 文本样式 -->
<div class="text-muted">灰色,半透明</div>
<div class="text-primary">蓝色的,primary</div>
<div class="text-info">淡黄色,info</div>
<div class="text-warning">警告文本</div>
<div class="text-danger">错误提示文本</div>
<div class="text-success">绿色,success</div>

<!-- 列表样式 -->
<div class="list-unstyled">无样式(去除前面的点了)</div>
<div class="list-inline">行内样式,列表水平排列</div>
<div class="dl-horizontal">单个列表水平放置</div>

<!-- 代码 -->
<code>普通代码</code>
<kbd>键盘符号</kbd>
<pre>预定义,一般用于代码片段</pre>

<!-- 表格 -->
<table class="table">普通表格类</table>
<table class="table table-striped">各行变色表格</table>
<table class="table table-hover">鼠标滑过变色</table>
<table class="table table-border">带有表框的表格</table>
<table class="table table-condensed">紧凑型表格</table> <!-- table-condensed -->
<table class="table table-responsive">自适应表格</table> <!-- table-responsive -->
<!-- <tr><td><th>类 -->
<tr class="active">激活风格行</tr>
<td class="success">success风格单元格</td>
<th class="info">info风格页头</th>


<!-- 表单 -->
<form action="" class="form">form表单基本类</form>
<div class="form-group">建议将输入框组嵌套到表单组中使用</div>
<label for="" class="sr-only">一般输入框前面会用一个label层包裹标题</label>
<input type="text" class="form-control"> <!-- form-control类能够让框100%显示 -->

<form action="" class="form-inline">内联表单</form> <!-- 所有表单元素一起在一行显示 -->
<form action="" class="form-horizontal">水平表单</form> <!-- 每个表单组占一行,里面有多个元素共一行显示 -->
<div class="input-group">input输入组</div>
<label for="" class="input-group-addon"></label> <!-- input组里面锁定文本的类 -->
<!-- 支持的控件 -->
<input type="text">
<!-- password data month time week number email url seach tel colol -->
<input type="checkbox"> <label for="" class="checkbox-inline"></label>
<input type="radio"> <label for="" class="radio-inline"></label>
<textarea></textarea>
<select class=‘form-control‘ multiple></select>
<option value=""></option>
<!-- 静态控件 -->
<p class="form-control-static">静态文本</p>
<!-- 禁用与只读 -->
disabled readonly
<!-- 校验状态 -->
.has-waring .has-success .has-error <!-- 一般添加到表单组里面 -->
<!-- 添加额外的图标 -->
.has-feedback 添加到表单组
.glyphicon .glyphicon-ok .form-control-feedback <!-- 添加在单独添加的一个空span标签上面 -->
<!-- .glyphicon-ok .glyphicon-waring-sign .glyphicon-remove -->
<!-- 控件大小 -->
.input-lg .input-sm .input-xs
.col-sm-10 ......
<!-- 帮助文本 -->
<span class="help-block"></span>


<!-- 按钮 --><!-- 按钮 --><!-- 按钮 --><!-- 按钮 -->
<!-- 样式 -->
<button class="btn btn-default">默认按钮样式</button>
<button class="btn btn-primary">primary按钮样式</button>
<button class="btn btn-success">success按钮样式</button>
<button class="btn btn-info">info按钮样式</button>
<button class="btn btn-warning">warning按钮样式</button>
<button class="btn btn-danger">danger按钮样式</button>
<button class="btn-btn-link">link按钮样式</button>
<!-- 尺寸 -->
.btn-lg .btn-sm .btn-xs
<button class="btn btn-default btn-block">100%宽度按钮</button> <!-- btn-block -->
<!-- 状态 -->
.active(支持button和a) .disabled(支持a, button需要用disabled = "disabled"属性)

我的bootstrap日记

标签:ble   data   ati   帮助   校验   value   风格   ase   new   

原文地址:http://www.cnblogs.com/caoxuetanma/p/6091453.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!