Bootstrap-v5-表单(输入框)
一、表单控制(Form controls)
- 表单大小(Sizing)
- 表单可见性(Disabled)
- 只读纯文本(Readonly plain text)
- 文件上传(File input)
- 颜色(Color)
- 数据列表(Datalists)
二、实例
1、表单大小(Sizing)
- .form-control 默认输入框大小
- .form-control-lg 大号输入框
- .form-control-sm 小号输入框
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label="大输入框"> <input class="form-control" type="text" placeholder="Default input" aria-label="默认输入框"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label="小输入框">
2、表单禁用
- disabled 禁用(不可编辑)
- readonly 只读
<input class="form-control" type="text" placeholder="Disabled input" aria-label="禁用输入框" disabled> <input class="form-control" type="text" value="Disabled readonly input" aria-label="禁用只可读" disabled readonly>
3、只读纯文本(Readonly plain text)
- .form-control-plaintext
<!-- 只读纯文本 --> <div class="mb-3 row"> <label for="staticEmail" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"> </div> </div> <div class="mb-3 row"> <label for="inputPassword" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword"> </div> </div>
4、文件上传
- formFile 上传文件(默认)
- formFileMultiple 文件上传(多个)
- formFileDisabled 上传文件(未生效)
- formFileSm 文件上传(小文本框)
- formFileLg 文件上传(大文本框)
<!-- 文件上传 --> <div class="mb-3"> <label for="formFile" class="form-label">默认文件上传</label> <input class="form-control" type="file" id="formFile"> </div> <div class="mb-3"> <label for="formFileMultiple" class="form-label">多个文件上传</label> <input class="form-control" type="file" id="formFileMultiple" multiple> </div> <div class="mb-3"> <label for="formFileDisabled" class="form-label">不可上传文件</label> <input class="form-control" type="file" id="formFileDisabled" disabled> </div> <div class="mb-3"> <label for="formFileSm" class="form-label">小文件上传</label> <input class="form-control form-control-sm" id="formFileSm" type="file"> </div> <div> <label for="formFileLg" class="form-label">大文件上传</label> <input class="form-control form-control-lg" id="formFileLg" type="file"> </div>
5、颜色选择器
- .form-control-color 颜色选择
<!-- 颜色选择 --> <label for="exampleColorInput" class="form-label">Color picker</label> <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
6、数据列表
<!-- 下拉选择 --> <label for="exampleDataList" class="form-label">下拉选择</label> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="请搜索"> <datalist id="datalistOptions"> <option value="旧金山"> <option value="纽约"> <option value="北京"> <option value="上海"> <option value="芝加哥"> </datalist>