请选择 进入手机版 | 继续访问电脑版
本站特色:极好的技术研究氛围!所有技术交流,必有回复!

疯狂Java联盟

 找回密码
 加入联盟
查看: 456|回复: 0

Bootstrap连载(5)-- Bootstrap表单

[复制链接]
发表于 2018-8-13 13:28:40 | 显示全部楼层 |阅读模式
更多Bootstrap的知识请参考李刚老师著作《疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 》
京东购买地址:https://item.jd.com/12249634.html

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

示例代码:
  1. <span class="nt"><form></span>
  2.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  3.     <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
  4.     <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
  5.   <span class="nt"></div></span>
  6.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  7.     <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputPassword1"</span><span class="nt">></span>Password<span class="nt"></label></span>
  8.     <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
  9.   <span class="nt"></div></span>
  10.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  11.     <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputFile"</span><span class="nt">></span>File input<span class="nt"></label></span>
  12.     <span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"exampleInputFile"</span><span class="nt">></span>
  13.     <span class="nt"><p</span> <span class="na">class=</span><span class="s">"help-block"</span><span class="nt">></span>Example block-level help text here.<span class="nt"></p></span>
  14.   <span class="nt"></div></span>
  15.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">></span>
  16.     <span class="nt"><label></span>
  17.       <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span> Check me out
  18.     <span class="nt"></label></span>
  19.   <span class="nt"></div></span>
  20.   <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Submit<span class="nt"></button></span>
  21. <span class="nt"></form></span>
复制代码




内联表单  为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

示例代码:

  1. <span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
  2.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  3.     <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputName2"</span><span class="nt">></span>Name<span class="nt"></label></span>
  4.     <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputName2"</span> <span class="na">placeholder=</span><span class="s">"Jane Doe"</span><span class="nt">></span>
  5.   <span class="nt"></div></span>
  6.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  7.     <span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputEmail2"</span><span class="nt">></span>Email<span class="nt"></label></span>
  8.     <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail2"</span> <span class="na">placeholder=</span><span class="s">"jane.doe@example.com"</span><span class="nt">></span>
  9.   <span class="nt"></div></span>
  10.   <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Send invitation<span class="nt"></button></span>
  11. <span class="nt"></form></span>
复制代码



水平排列的表单  通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

示例代码:
  1. <span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span><span class="nt">></span>
  2.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  3.     <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputEmail3"</span> <span class="na">class=</span><span class="s">"col-sm-2 control-label"</span><span class="nt">></span>Email<span class="nt"></label></span>
  4.     <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
  5.       <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail3"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">></span>
  6.     <span class="nt"></div></span>
  7.   <span class="nt"></div></span>
  8.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  9.     <span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword3"</span> <span class="na">class=</span><span class="s">"col-sm-2 control-label"</span><span class="nt">></span>Password<span class="nt"></label></span>
  10.     <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
  11.       <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword3"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
  12.     <span class="nt"></div></span>
  13.   <span class="nt"></div></span>
  14.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  15.     <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-offset-2 col-sm-10"</span><span class="nt">></span>
  16.       <span class="nt"><div</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">></span>
  17.         <span class="nt"><label></span>
  18.           <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span> Remember me
  19.         <span class="nt"></label></span>
  20.       <span class="nt"></div></span>
  21.     <span class="nt"></div></span>
  22.   <span class="nt"></div></span>
  23.   <span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
  24.     <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-offset-2 col-sm-10"</span><span class="nt">></span>
  25.       <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
  26.     <span class="nt"></div></span>
  27.   <span class="nt"></div></span>
  28. <span class="nt"></form></span>
复制代码









您需要登录后才可以回帖 登录 | 加入联盟

本版积分规则

视频、代码、电子书下载
请关注"疯狂图书"公众号
QQ交流1群: 545923995  未满
微信群请扫二维码
QQ交流1群:
545923995
(未满)

小黑屋|手机版|Archiver|疯狂Java联盟 ( 粤ICP备11094030号 )

GMT+8, 2019-5-21 15:11 , Processed in 0.157260 second(s), 6 queries , File On.

快速回复 返回顶部 返回列表