如何用Bootstrap制作输入框组

工具/材料

Sublime Text

01

首先用Sublime Text工具新建HTML5页面，导入bootstrap的样式文件和脚本文件，如下图所示

02

然后我蔽空们调用input-group样式来改并租让输入框组中的元素在同一行，如下图所示

03

当然input-group-addon不只可以放在输入框的前面，也可以放在输入核兆框的后面，如下图所示

04

也可以通过input-group-lg样式让输入框组中的元素变大，还有其他的一些控制大小的样式你可以查一下API

05

接下来你也可以在input前面加入复选框，如下图所示，将复选框放在input-group-addon里即可

06

还可以在输入框组中定义button按钮，如下图所示，按钮可以通过btn-default,btn-primary等来定义样式

07

最后也可以在输入框的前面加入下拉菜单，这种也是比较常用的功能，如下图所示

自晌码定义这些变量即磨锋可改变宴游哪Bootstrap的默认样式。

强调

...这需要对默认的表单格式做修改:R

为表单添加.form-...在任何文本输入框之前或之后添加文本或按钮。注意,select...

bootstrap 模态框d出时被遮罩层挡住了是设置错误造成的，解决方法为：

1、打开WebStorm开发工具，新建‘test.html’文件，并在文件同级目录安装部署Bootstrap相关文件，目录结构如下图。

2、在‘test.html’中写如下代码。

3、网页查看效果如下图，这时点击按钮还没有相应，因为没有对应的代码。

4、修改‘test.html’代码如下。

5、网页查看效果，点击按钮，好余可以正常d出模态框，点击网页其他位置模态框消失。

6、在模态框上增加取消高仿按钮，点击取消后模态框消失，代戚袜纤码如下。

---