Bootstrap框架模态框与表单组件

Bootstrap框架模态框与表单组件

Bootstrap提供了一个易于使用的现成样式框架、布局工具和交互式组件框架，允许开发人员创建视觉上吸引人，功能丰富的开箱即用的网站和应用程序。在我们制作需要提交表单的网站的弹出输入框时通常会把Bootstrap的模态框和表单组件进行组合使用。
Bootstrap框架是通过添加类名来引用的，而Bootstrap的类名具有较高的易读性，通过下面的模态框例子可以知道模态框分为header、 body和 foot这三部分。

header部分主要安置标题和关闭模态框窗口按钮，body部分主要通常用于安置你所要显示的主要内容例如你可以放入一个form表单，foot部分主要安置按钮一般有一个按钮用与关闭模态框，有一个按钮用于保存或确认，模态框默认是处于隐藏状态,如要弹出使用$(“选择模态框”).modal(“show”),如要隐藏使用$(“选择模态框”).(“hide”)。
表单组件主要也是由form标签作为外部容器其余内容可自定义一般安置几个加上form-group、form-control或form-check类的div包裹输入框、复选框，label标签可以作为输入框或复选框的标题加上col-form-label或check-form-label等类就可拥有其特有样式，一般在最后一个输入内容部分放置表单操作按钮（保存按钮等）。

模态框的body部分可以放置自定义内容，如果把form表单组件安置在body部分就可以实现弹出填写表单功能了，还可以用bootstrap的导航组件插入模态框其中的body部分实现模态框内查询修改删除等功能设置readonly或删除readonly属性可以让表单的删除只读，表单的修改变为可以编辑