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>

目录
相关文章
N..
|
8月前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
82 0
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
73 0
|
1月前
|
前端开发 数据安全/隐私保护 容器
Bootstrap5 表单1
本章介绍如何使用 Bootstrap5 创建表单,包括堆叠和内联表单布局。表单元素如 `&lt;input&gt;`、`&lt;textarea&gt;` 和 `&lt;select&gt;` 使用 `.form-control` 类后宽度为 100%。示例展示了如何创建包含邮箱、密码输入框及复选框的堆叠表单,并使用 `.form-label` 确保标签有适当内边距。
Bootstrap5 表单3
使用 `&lt;textarea&gt;` 标签和 `.form-control` 类创建和调整大小的表单文本框示例,包括大、中、小三种尺寸的输入框。
Bootstrap5 表单4
介绍禁用/只读表单、纯文本输入及取色器的使用方法。通过设置 `disabled` 和 `readonly` 属性,可使输入框变为禁用或只读状态;使用 `.form-control-plaintext` 类可去除输入框边框,实现纯文本显示效果;添加 `.form-control-color` 类则可创建取色器。示例代码展示了具体应用。
|
1月前
|
数据安全/隐私保护
Bootstrap5 表单2
内联表单示例:通过在表单中使用 `.row` 和 `.col` 类,可以使输入框等表单元素并排显示。此例展示了一个包含邮箱和密码输入框的内联表单。
|
7月前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
45 0
|
8月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
|
Web App开发 移动开发 前端开发
N..
|
8月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
81 0