Bootstrap中水平排列的表单form-inline

简介: 1 2 3 初识Bootstrap 4 5 6 7 8 9 10 11 12 账号 13 14 15 16 密码 17 18 ...
+关注继续查看
 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>

目录
相关文章
|
2月前
|
Web App开发 移动开发 前端开发
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
28 0
|
3月前
|
前端开发
Bootstrap 表单样式
Bootstrap 表单样式
19 0
|
11月前
|
前端开发
bootstrap 组件之表单 组件学习总结
bootstrap 组件之表单 组件学习总结
|
前端开发
关于Bootstrap 表格样式及表单布局的设置
讲解bootstrap、表格样式、表单布局、Bootstrap 实现表格样式、表单布局等。
229 0
关于Bootstrap 表格样式及表单布局的设置
|
前端开发 JavaScript Python
Bootstrap学习笔记1--表单样式
最近感觉学Python有点懵了,想想前端的技能一直比较弱,又偷懒的不愿意一项项仔细去学。 思来想去,还是简单的前台框架吧 --> Bootstrap
107 0
|
移动开发 前端开发 信息无障碍
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(3)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
190 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(3)
|
前端开发
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(2)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
168 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(2)
|
前端开发 容器
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(1)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
132 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(1)
|
移动开发 前端开发 HTML5
Bootstrap教程(9)--使用表单控件
本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结
153 0
Bootstrap教程(9)--使用表单控件
相关产品
云迁移中心
推荐文章
更多