- 引导布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 排水沟
- Bootstrap - 实用程序
- Bootstrap - Z 索引
- Bootstrap - CSS 网格
- 引导组件
- Bootstrap - 手风琴
- Bootstrap - 警报
- Bootstrap - 徽章
- Bootstrap - 面包屑导航
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 轮播
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态
- Bootstrap - 导航栏
- Bootstrap - 导航和选项卡
- Bootstrap - Offcanvas
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 弹出窗口
- Bootstrap - 进展
- Bootstrap-Scrollspy
- Bootstrap - 旋转器
- Bootstrap - 吐司
- Bootstrap - 工具提示
- 引导表单
- Bootstrap - 表单
- Bootstrap - 表单控制
- 引导程序 - 选择
- Bootstrap - 支票和收音机
- Bootstrap - 范围
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- 引导程序 - 验证
- 引导助手
- Bootstrap-Clearfix
- 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 - Jumbotrons 演示
- Bootstrap-粘性页脚演示
- Bootstrap-相册演示
- Bootstrap-登录演示
- Bootstrap 定价演示
- Bootstrap-Checkout 演示
- Bootstrap-产品演示
- Bootstrap-封面演示
- Bootstrap-仪表板演示
- Bootstrap-粘性页脚导航栏演示
- Bootstrap-Masonry 演示
- Bootstrap-Starter 模板演示
- Bootstrap-Album RTL 演示
- Bootstrap-Checkout RTL 演示
- Bootstrap-Carousel RTL 演示
- Bootstrap-博客 RTL 演示
- Bootstrap-仪表板 RTL 演示
- Bootstrap 有用资源
- Bootstrap - 问题与解答
- Bootstrap - 快速指南
- Bootstrap - 有用的资源
- Bootstrap - 讨论
Bootstrap - 表单控件
本章将讨论 Bootstrap 表单控件。自定义样式、大小、焦点状态和其他功能可用于升级文本表单控件,例如<input>和<textarea>。
基本示例
使用类.form-control和.form-label来设置表单控件的样式。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="mb-3"> <label for="formControlName" class="form-label">Full Name</label> <input type="text" class="form-control" id="formControlName" placeholder="name"> </div> <div class="mb-3"> <label for="formControlEmail" class="form-label">Email id</label> <input type="text" class="form-control" id="formControlEmail" placeholder="tutorialspoint@example.com"> </div> <div class="mb-3"> <label for="formControlTextarea" class="form-label">Add a comment</label> <textarea class="form-control" id="formControlTextarea" rows="3"></textarea> </div> <button type="submit" class="btn btn-success">Submit</button> </body> </html>
浆纱
使用.form-control-lg和.form-control-sm等类来指定表单输入字段的大小。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <input class="form-control form-control-lg mt-2" type="text" placeholder="Large size input box" aria-label=".form-control-lg example"> <input class="form-control mt-2" type="text" placeholder="Default size input box" aria-label="default input example"> <input class="form-control form-control-sm mt-2" type="text" placeholder="Small size input box" aria-label=".form-control-sm example"> </body> </html>
表格文本
使用.form-text创建块级或内联级表单文本。
添加顶部边距可以轻松地将块级元素上方的输入隔开。
使用aria-labelledby或aria-scribedby属性将表单文本与表单控件关联起来,以确保通过屏幕阅读器等辅助技术来宣布它。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <label for="inputUsername" class="form-label mt-2">Username</label> <input type="text" id="inputUsername" class="form-control" aria-labelledby="UsernameHelpBlock"> <div id="UsernameHelpBlock" class="form-text"> Your username 6–20 characters long and can be any combination of letters, numbers or symbols. </div> <label for="inputPassword" class="form-label mt-2">Password</label> <input type="text" id="inputPassword" class="form-control" aria-labelledby="PasswordHelpBlock"> <div id="PasswordHelpBlock" class="form-text"> must be 6-20 characters long. </div> <button type="submit" class="btn btn-primary mt-2">Submit</button> </body> </html>
内联文本可以仅使用.form-text类使用任何典型的内联 HTML 元素(例如<span>、<small> ...等) 。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row g-3 align-items-center mt-2"> <div class="col-auto"> <label for="inputUsername" class="col-form-label">Username</label> </div> <div class="col-auto"> <input type="text" id="inputUsername" class="form-control" aria-labelledby="usernameHelpInline"> </div> <div class="col-auto"> <span id="usernameHelpInline" class="form-text"> Username 6–20 characters long. </span> </div> </div> </body> </html>
残疾人
对于灰显外观和删除指针事件,请使用输入的禁用属性。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <input class="form-control mt-2" type="text" placeholder="Disable Input Field" aria-label="Disabled input example" disabled> </body> </html>
只读
使用readonly属性可以防止更改输入值。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <input class="form-control mt-2" type="text" value="Tutorialspoint" aria-label="readonly example" readonly> </body> </html>
只读纯文本
.form-control-plaintext创建一个只读输入字段作为明文。这会消除样式并保留适当的边距和填充。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="mb-3 row"> <label for="name" class="col-sm-2 col-form-label">Name</label> <div class="col-sm-3"> <input type="text" readonly class="form-control-plaintext" id="name" value="Tutorialspoint"> </div> </div> <div class="mb-3 row"> <label for="bootstrap" class="col-sm-2 col-form-label">Language</label> <div class="col-sm-3"> <input type="text" class="form-control" id="bootstrap" placeholder="Bootstrap"> </div> </div> </body> </html>
在只读纯文本内联中,您可以使表单标签和输入将内联和水平显示。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <form class="row g-2 mt-2"> <div class="col-auto"> <input type="text" readonly class="form-control-plaintext" id="staticName" value="Tutorialspoint"> </div> <div class="col-auto"> <input type="text" class="form-control" id="inputLanguage" placeholder="Bootstrap"> </div> </form> </body> </html>
文件输入
文件输入用于浏览文件作为计算机上的输入。
使用大小的文件输入
使用.form-control-sm可以减小文件输入的大小。
使用.form-control-lg使文件输入的大小更大。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="mb-3"> <label for="fileInputsm" class="form-label">Small size file input</label> <input class="form-control form-control-sm" id="fileInputsm" type="file"> </div> <div> <label for="fileInputlg" class="form-label">Large size file input</label> <input class="form-control form-control-lg" id="fileInputlg" type="file"> </div> </body> </html>
使用属性输入文件
无需显式定义默认属性。
使用禁用属性,该属性提供灰色外观并删除指针事件。
可以同时接受多个具有多个属性的文件输入。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="mb-3"> <label for="defaultFileInput" class="form-label">Default file input</label> <input class="form-control" type="file" id="defaultFileInput"> </div> <div class="mb-3"> <label for="disabledFileInput" class="form-label">Disabled file input</label> <input class="form-control" type="file" id="disabledFileInput" disabled> </div> <div class="mb-3"> <label for="multipleFileInput" class="form-label">Multiple files input</label> <input class="form-control" type="file" id="multipleFileInput" multiple> </div> </body> </html>
颜色
在<input>元素中使用.form-control-color类和type="color"属性向输入字段添加颜色。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <label for="colorInput" class="form-label">Select a color</label> <input type="color" class="form-control form-control-color" id="colorInput" value="#228b22"> </body> </html>
数据列表
您可以创建一组<option> ,可以使用数据列表从<input>访问它们。浏览器和操作系统为<datalist>元素提供有限且不一致的样式。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form Control</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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <label for="dataList" class="form-label">Languages</label> <input class="form-control" list="datalistOptions" id="dataList" placeholder="Search languages..."> <datalist id="datalistOptions"> <option value="Bootstrap"> <option value="HTML"> <option value="CSS"> </datalist> </body> </html>