1. 基础表单
在Bootstrap框架中,通过定制了一个类名 form-control
,也就是说,使用了类名form-control
,将会实现一些设计上的定制效果。
- 宽度变成了100%
- 设置了一个浅灰色
#ccc
的边框 - 具有 4p x的圆角
- 设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
- 设置了placeholder(输入框的提示文字)的颜色为
#999
这个类一般用于输入框
1.1 内联表单
只需要给form加上下面.form-inline这个类就可以实现表单元素在一行排列
1.2 水平表单
待添加
2. input 输入框
为了让控件在各种表单风格中样式不出错,需要添加类名form-control,如:<input type="email" class="form-control" placeholder="请输入您的邮箱">
3. 按钮 Button
-
input[type="submit"]
:提交按钮 -
input[type="button"]
:普通按钮 -
input[type="reset"]
:重置按钮 -
<button></button>
:按钮元素,(默认行为是提交)
在Bootstrap框架中的按钮都是采用<button>来实现。
3.1 情景按钮
注:
Bootstrap中的按钮,第一前提是必须添加
btn
这个类,其他的各种类,都只能添加到其后。所以一个按钮应该是这个样子的:<button class="btn btn-info" >信息按钮</button>
,若还有其他的样式,往btn-info
后添加,充分利用 css 的层叠特性。
3.2 按钮大小
3.3 块状按钮
Bootstrap框架中提供了一个类名btn-block。使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。同样添加到btn类后即可生效。
3.4 活动与禁用状态
活动状态
Bootstrap 按钮的活动状态主要包括按钮的悬浮状态:hover
,点击状态:active
和焦点状态:focus
几种。
通过在源码中我们可以看到,Bootstrap对于每一种风格的按钮都做了单独的定制。需要进行修改的话可以参考源码!
禁用状态
在Bootstrap框架中,要禁用按钮有两种实现方式:
- 在标签中添加disabled属性
- 在元素标签中添加类名.disabled