1 <html> 2 <head> 3 <title>初识Bootstrap</title> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> 7 </head> 8 <body> 9 10 <form class="form-inline" role="form"> 11 <div class="form-group"> 12 <label for="f1">账号</label> 13 <input type="text" id="f1" class="form-control" placeholder="请输入账号"/> 14 </div> 15 <div class="form-group"> 16 <label for="f2">密码</label> 17 <input type="password" id="f2" class="form-control" placeholder="请输入密码"/> 18 </div> 19 <div class="form-group"> 20 <label for="f3" class="sr-only">邮箱</label> 21 <input type="email" class="form-control" id="f3" placeholder="请输入邮箱"/> 22 </div> 23 <div class="form-group"> 24 <label for="f4" class="sr-only">邮箱秘密</label> 25 <input type="password" id="f4" placeholder="请输入邮箱密码" class="form-control"/> 26 </div> 27 <div class="checkbox"> 28 <label> 29 <input type="checkbox"/>记住密码 30 </label> 31 </div> 32 <button type="submit" class="btn btn-danger">进入</button> 33 </form> 34 35 36 37 38 39 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 40 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 41 </body> 42 </html>
Bootstrap中水平排列的表单form-inline
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Odoo集合pdfjs实现在form表单上预览附件
Odoo集成pdfjs实现预览附件
字段 html HTML odoo -
bootstrap-表单控件——单选按钮水平排列
bootstrap-表单控件——单选按钮水平排列
bootstrap 单选 表单控件 -
Bootstrap~表单Form
回到目录 在进行自己的后台改版时,大体布局都使用了
表单 d3 bootstrap -
bootstrap-水平表单
bootstrap-水平表单
bootstrap 水平表单 -
bootstrap-为水平排列的表单和内联表单设置可选的图标
bootstrap-为水平排列的表单和内联表单设置可选的图标
表单 bootstrap 水平排列 -
bootstrap20-水平表单
bootstrap20-水平表单
bootstrap 水平表单 -
Form表单中method=数据 表单 服务器 提交数据 数据传输
-
form表单中的name属性
name属性如果给[ ],在提交表单的时候会把多个name值自动组成数组提交size属性表现为
css html html5 form表单中的name属性 提交表单 -
吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:水平表单
Bootstrap 实例 - 水平表单 名字 ...
bootstrap html jquery twitter css