代码/表格/表单

#内联代码

<code>标签使文字变红,背景变红

<pre>标签原样输出,bootstrap中给其加了灰色背景的框体

#表格

table标签的table类在每行底下加了一条水平线,再加上table-bordered类,表格出现表格的格子,加上table-striped类隔行切换背景色,加上table-hover类鼠标移到上方时,背景色变化,加上table-condensed类内边距渐变,表格的每行变宅

表格的css颜色

tr td.danger类  红色

tr td.success类  绿色

tr td.waring类  黄色

tr td.active类  灰色

#响应式表格(水平滚动条)

div.table-responsive类,.table包裹在其中,

<div class=“table-responsive”>

<table></table>

</div>

当屏幕小到768ps时,表格底部出现滚动条

#表单样式

每一组的<div>加上form-group类(表单组)

<div class=“form-group has-success”>

<lable for=“nameid”>姓名</lable>

<input type=“text” id=“nameid form-control input-lg”>

</div>

has-success类可以使文字和边框变色

#表单元素

input.form-control

input.input-lg

#表单颜色

div .has-success

div .has-error

div .has-waring

p .help-block

input .btn .btn-primary

#复选框

<div class=checkbox>

<lable>

<input type=“chechbox”>哈哈哈

</lable>

</div>

#textarea标签

<div class=“form-group has-warning”>

<textarea class=“form-control” rows=“10”></textarea>

</div>

#可以将以上的checkbox改为radio

#radio-inline类加到每一组的div中(水平单元框)

#checkbox-inline同上(水平复选框)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容