- Bootstrap 教程
- Bootstrap - 首页
- Bootstrap - 概述
- Bootstrap - 环境设置
- Bootstrap - RTL(从右到左)
- Bootstrap - CSS 变量
- Bootstrap - 颜色模式
- Bootstrap 布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 间距
- Bootstrap - 实用工具类
- Bootstrap - CSS 网格
- Bootstrap 组件
- Bootstrap - 手风琴
- Bootstrap - 警报
- Bootstrap - 徽章
- Bootstrap - 面包屑
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 走马灯
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态框
- Bootstrap - 导航栏
- Bootstrap - 导航和选项卡
- Bootstrap - 侧边栏
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 气泡提示
- Bootstrap - 进度条
- Bootstrap - 滚动侦听
- Bootstrap - 加载动画
- Bootstrap - 吐司提示
- Bootstrap - 工具提示
- Bootstrap 表单
- Bootstrap - 表单
- Bootstrap - 表单控件
- Bootstrap - 选择框
- Bootstrap - 复选框和单选按钮
- Bootstrap - 滑块
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- Bootstrap - 表单验证
- Bootstrap 辅助类
- Bootstrap - 清除浮动
- Bootstrap - 颜色和背景
- Bootstrap - 彩色链接
- Bootstrap - 焦点环
- Bootstrap - 图标链接
- Bootstrap - 位置
- Bootstrap - 比例
- Bootstrap - 堆叠
- Bootstrap - 拉伸链接
- Bootstrap - 文本截断
- Bootstrap - 垂直线
- Bootstrap - 视觉隐藏
- Bootstrap 实用工具类
- Bootstrap - 背景
- Bootstrap - 边框
- Bootstrap - 颜色
- Bootstrap - 显示
- Bootstrap - Flex 布局
- Bootstrap - 浮动
- Bootstrap - 交互
- Bootstrap - 链接
- Bootstrap - 对象适应
- Bootstrap - 不透明度
- Bootstrap - 溢出
- Bootstrap - 位置
- Bootstrap - 阴影
- Bootstrap - 大小
- Bootstrap - 间距
- Bootstrap - 文本
- Bootstrap - 垂直对齐
- Bootstrap - 可见性
- Bootstrap 演示
- Bootstrap - 网格演示
- Bootstrap - 按钮演示
- Bootstrap - 导航演示
- Bootstrap - 博客演示
- Bootstrap - 滑块演示
- Bootstrap - 走马灯演示
- Bootstrap - 页眉演示
- Bootstrap - 页脚演示
- Bootstrap - 英雄图演示
- Bootstrap - 特色演示
- Bootstrap - 侧边栏演示
- Bootstrap - 下拉菜单演示
- Bootstrap - 列表组演示
- Bootstrap - 模态框演示
- Bootstrap - 徽章演示
- Bootstrap - 面包屑演示
- Bootstrap - 巨大块演示
- Bootstrap - 粘性页脚演示
- Bootstrap - 相册演示
- Bootstrap - 登录演示
- Bootstrap - 定价演示
- Bootstrap - 结账演示
- Bootstrap - 产品演示
- Bootstrap - 封面演示
- Bootstrap - 仪表盘演示
- Bootstrap - 粘性页脚导航栏演示
- Bootstrap - 砌体布局演示
- Bootstrap - 启动模板演示
- Bootstrap - RTL 相册演示
- Bootstrap - RTL 结账演示
- Bootstrap - RTL 走马灯演示
- Bootstrap - RTL 博客演示
- Bootstrap - RTL 仪表盘演示
- Bootstrap 有用资源
- Bootstrap - 问答
- Bootstrap - 快速指南
- Bootstrap - 有用资源
- Bootstrap - 讨论
Bootstrap - 表单布局
本章将讨论 Bootstrap 表单布局。使用表单布局选项(从内联到水平,再到自定义网格)为表单添加结构。
表单布局
Bootstrap 不会为<form>元素提供默认样式,但浏览器默认会提供一些功能性的高亮显示。每一组表单字段都必须位于<form>元素内。
请务必为<form>内的<button>指定并包含 type 属性,因为它们的默认值为type="submit"。
表单默认垂直堆叠。Bootstrap 对几乎所有表单控件都使用display: block和width: 100%。要更改每个表单的布局,请使用其他类。
实用工具类
要为表单添加一些结构,应使用边距实用工具类。对标签、控件、可选表单文本和表单验证消息进行基本分组。
为保持一致性,建议坚持使用margin-bottom实用工具类,并在整个表单中采用单一方向。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="mb-3"> <label for="formGroupExampleInput" class="form-label">Username</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Username"> </div> <div class="mb-3"> <label for="formGroupExampleInput2" class="form-label">Password</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="password"> </div> </body> </html>
表单网格
使用网格类构建更复杂的表单。为需要多列、不同宽度和附加对齐选项的表单布局构建网格。您需要使用$enable-grid-classes启用 Sass 变量。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row mt-2"> <div class="col"> <input type="text" class="form-control" placeholder="Username" aria-label="Username"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Password" aria-label="Password"> </div> </div> </body> </html>
间距
要控制内联和块方向上的间距宽度,请使用间距修饰符类。通过使用$enable-grid-classes,您可以启用 Sass 变量。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="row g-3 mt-2"> <div class="col"> <input type="text" class="form-control" placeholder="Username" aria-label="Username"> </div> <div class="col"> <input type="text" class="form-control" placeholder="Password" aria-label="Password"> </div> </div> </body> </html>
使用网格系统创建更复杂的布局。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <form class="row g-3"> <div class="col-md-6"> <label for="inputFirst" class="form-label">First name</label> <input type="text" class="form-control" id="inputFirst"> </div> <div class="col-md-6"> <label for="inputLast" class="form-label">Last name</label> <input type="text" class="form-control" id="inputLast"> </div> <div class="col-md-6"> <label for="inputEmail" class="form-label">Email</label> <input type="email" class="form-control" id="inputEmail"> </div> <div class="col-6"> <label for="inputPassword" class="form-label">Password</label> <input type="Password" class="form-control" id="inputPassword" placeholder="password"> </div> <div class="col-12"> <label for="inputAddress" class="form-label">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="Address"> </div> <div class="col-md-6"> <label for="inputAdharno" class="form-label">Adharcard no</label> <input type="text" class="form-control" id="inputAdharno"> </div> <div class="col-md-6"> <label for="inputMobno" class="form-label">Mobile no</label> <input type="text" class="form-control" id="inputMobno"> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> I agree to terms and conditions </label> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </body> </html>
水平表单
使用类.row来形成组,以使用网格创建水平表单。使用类.col-*-*定义标签和控件的宽度。
要使表单与其关联的表单控件垂直居中,请将类.col-form-label应用于<label>。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <form> <div class="row mb-3"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3"> </div> </div> <div class="row mb-3"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3"> </div> </div> <fieldset class="row mb-3"> <legend class="col-form-label col-sm-2 pt-0">Language Known</legend> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="gridCheck" id="gridCheck1" value="option1" checked> <label class="form-check-label" for="gridCheck1"> English </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="gridCheck" id="gridCheck2" value="option2"> <label class="form-check-label" for="gridCheck2"> Hindi </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="gridCheck" id="gridCheck2" value="option2"> <label class="form-check-label" for="gridCheck2"> marathi </label> </div> <div class="form-check disabled"> <input class="form-check-input"type="checkbox" name="gridCheck" id="gridCheck3" value="option3" disabled> <label class="form-check-label" for="gridCheck3"> Others </label> </div> </div> </fieldset> <div class="row mb-3"> <div class="col-sm-10 offset-sm-2"> <div class="form-check"> <input class="form-check-input" type="radio" id="gridRadio1"> <label class="form-check-label" for="gridRadio1"> Radio Button </label> </div> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </body> </html>
水平表单标签大小
将类.col-form-label-sm或.col-form-label-lg应用于您的<label>或<legend>,以分别遵循.form-control-sm和.form-control-lg的大小。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="row mb-3"> <label for="colFormSm" class="col-sm-2 col-form-label col-form-label-sm">Username</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-sm" id="colFormSm" placeholder="Username"> </div> </div> <div class="row mb-3"> <label for="colFormLabel" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="text" class="form-control" id="colFormLabel" placeholder="Password"> </div> </div> <div class="row"> <label for="colFormLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-lg" id="colFormLg" placeholder="email"> </div> </div> </body> </html>
列大小
如前例所示,网格系统允许在.row中使用任意数量的.cols。在它们之间平均分配可用宽度。您还可以使用特定列类,例如.col-sm-7,选择要占用更多或更少空间的列子集,而其余的.col则平均分配剩余空间。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="row g-3"> <div class="col-sm-6"> <input type="text" class="form-control" placeholder="Email" aria-label="Email"> </div> <div class="col-sm-3"> <input type="text" class="form-control" placeholder="Mobile no" aria-label="Mobile no"> </div> <div class="col-sm-2"> <input type="text" class="form-control" placeholder="Age" aria-label="Age"> </div> </div> </body> </html>
自动调整大小
在下面的示例中,使用 flexbox 实用工具类垂直居中内容,并将.col更改为.col-auto。这样,列只会占用其所需的空间。换句话说,列的大小取决于内容。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <form class="row gy-2 gx-3 align-items-center"> <div class="col-auto"> <label class="visually-hidden" for="inputName">Name</label> <input type="text" class="form-control" id="inputName" placeholder="Name"> </div> <div class="col-auto"> <label class="visually-hidden" for="inputGroup"></label> <div class="input-group"> <input type="text" class="form-control" id="inputGroup" placeholder="Username"> <div class="input-group-text">@gmail.com</div> </div> </div> <div class="col-auto"> <label class="visually-hidden" for="selectLanguage">Language</label> <select class="form-select" id="selectLanguage"> <option selected>Choose...</option> <option value="1">English</option> <option value="2">Hindi</option> <option value="3">Marathi</option> </select> </div> <div class="col-auto"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="autoSizingCheck"> <label class="form-check-label" for="autoSizingCheck"> Remember me </label> </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </body> </html>
然后您可以再次与特定大小的列类混合使用。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <form class="row gx-3 gy-2 align-items-center mt-2"> <div class="col-sm-3"> <label class="visually-hidden" for="inputName">Name</label> <input type="text" class="form-control" id="inputName" placeholder="Name"> </div> <div class="col-sm-3"> <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label> <div class="input-group"> <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Email"> <div class="input-group-text">@gmail.com</div> </div> </div> <div class="col-sm-3"> <label class="visually-hidden" for="selectLanguage">Language</label> <select class="form-select" id="selectLanguage"> <option selected>Choose...</option> <option value="1">English</option> <option value="2">Hindi</option> <option value="3">Marathi</option> </select> </div> <div class="col-auto"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="autoSizingCheck2"> <label class="form-check-label" for="autoSizingCheck2"> Remember me </label> </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </body> </html>
内联表单
要构建响应式水平布局,请使用类.row-cols-*。
使用间距修饰符类在水平和垂直方向上添加间距。
在狭窄的移动视口中,.col-12对于堆叠表单控件等很有用。
要将表单元素居中对齐并使.form-check正确对齐,请使用类.align-items-center。
示例
您可以使用编辑和运行选项编辑和尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Layout</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <form class="row row-cols-lg-auto g-3 align-items-center"> <div class="col-12"> <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label> <div class="input-group"> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> <div class="input-group-text">@gmail.com</div> </div> </div> <div class="col-12"> <label class="visually-hidden" for="selectLanguage">Language</label> <select class="form-select" id="selectLanguage"> <option selected>Choose...</option> <option value="1">English</option> <option value="2">Hindi</option> <option value="3">Marathi</option> </select> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> Remember me </label> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </body> </html>