# 表行样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
|
说明: BootStrap为表格tr元素提供了5种额外样式,控制tr的背景颜色,active类表示当前活动的信息,success类表示成功或者正确的行为,warning类表示警告需要特别注意,.danger类表示危险或可能错过的原因,需要注意的是当要和table-hover类一起使用的时候,也设置了响应的鼠标悬停高亮颜色,所以自定义覆盖时需要注意.
# 响应表格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
说明: BootStrap通过在t表格外部套一层table-responsive类容器即可创建响应式表格,在小于768px时容器会自动出现水平滚动条,大于768px时水平滚动条消失,还有一点儿是对外部容器添加了一个边框的同时去掉了内部table的table-bordered边框,防止重叠
# 基础表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
说明: BootStrap对基础表单并没做太多的定制化效果设计,默认都使用全局设置,只是对表单内的fieldset/legend/label标签进行了设定,select/input/textarea元素上应用form-control样式显示的宽度会变为100%,并且placeholder的颜色会变为#999999;通常实际使用中会将label和input元素放在一个样式为form-group的div里,form-group默认设置margin-bottom: 15px来保证清晰的看到每一组控件.
# 内联表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
说明: BootStrap的form-inline类使得所有表单都在一行,其实是设置了所有的form-group的display: inline-block;当然如果你想隐藏label标签的话可直接给label加一个sr-only将其隐藏
# 横向表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
说明: BootStrap横向表单和内联表单使用方式不太一样,使用form的form-horizontal类不止是简单的设置control-label等的padding-top:7px;text-align:right;保证标签相对于输入框垂直居中,如果使用text-right则会靠顶部,还需要配合预置删栏系统以便将label和控件水平并排布局
# 表单控件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
|
说明: BootStrap的form-horizontal类和删栏系统配合实现了横向表单,input/select/textarea用法基本不变,当对它们附加form-control类时,宽度将变为100%,所以此时就无需设置textarea的cols值,radio/checkbox比较特殊,支持通过外部附加一个拥有radio/checkbox类的div实现竖向单选/多选,也可通过对它们label附加radio-inline/checkbox-inline实现横向单选/多选.
登录乐搏学院官网http://www.learnbo.com/
或关注我们的官方微博微信,还有更多惊喜哦~