《响应式页面设计》_项目6-任务6.3.pptxVIP

6.3.1表单 Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单。表单元素中的文本控件如input、textarea、checkbox、radio、select在使用.form-control类的情况下，宽度都是设置为100%。 Bootstrap表单布局分为堆叠表单(全屏宽度垂直方向)和内联表单（水平方向）。1、表单1.堆叠表单2.内联表单

1堆叠表单以下示例使用两个输入框，一个提交按钮来创建堆叠表单，效果如图6-26所示。

1堆叠表单以下示例使用两个输入框，一个提交按钮来创建堆叠表单，效果如图6-26所示。divclass=containerh2堆叠表单/h2form divclass=form-group labelfor=email用户名:/label inputtype=emailclass=form-controlid=emailplaceholder=输入用户名 /div divclass=form-group labelfor=pwd密码:/label inputtype=passwordclass=form-controlid=pwdplaceholder=输入密码 /div !--divclass=form-check labelclass=form-check-labelinputclass=form-check-inputtype=checkboxRememberme/label /div-- buttontype=submitclass=btnbtn-primary提交/button/form/div

2内联表单所有内联表单中的元素都是左对齐的。注意：在屏幕宽度小于576px时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。内联表单需要在form元素上添加.form-inline类，我们现在将上述代码增加该类且去掉form-group之后，效果如图6-27所示。

6.3.2表单控件Bootstrap4支持以下表单控件：input、textarea、checkbox、radio、select。2、表单控件1.BootstarpInput2.Bootstarptextarea3.Bootstrap复选框(checkbox)与单选框(Radio)4.Bootstrapselect下拉菜单

1BootstrapInput Bootstrap支持所有的HTML5输入类型:text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel以及color。 注意：如果input的type属性未正确声明，输入框的样式将不会显示。 以下示例使用两个input元素，一个是text，一个是password，效果如图6-28所示。

2Bootstraptextareadivclass=containerh2表单控件:textarea/h2p以下示例演示了textarea的样式。/pformdivclass=form-grouplabelfor=comment评论:/labeltextareaclass=form-controlrows=5id=comment/textarea/div/form/div

3Bootstrap复选框(checkbox)与单选框(Radio)使用.form-check可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，label需要将该.disabled类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。以下示例包含了三个选项，最后一个是禁用的，效果如图6-30所示。divclass=containerh2表单控件:checkbox/h2p以下示例包含了三个选项。最后一个是禁用的：/pformdivclass=form-checklabelclass=form-check-labelinputtype=checkboxclass=form-check-inputvalue=Option1/label/divdivclass=form-checklabelclass=form-check-labelinputtype=checkboxclass=form-check-inputvalue=Opt