Bootstrap5 表单

最新推荐文章于 2024-08-08 07:34:41 发布

Gary jie

最新推荐文章于 2024-08-08 07:34:41 发布

阅读量609

点赞数

分类专栏：前端 Bootstrap5 文章标签：前端 java javascript

本文链接：https://blog.csdn.net/qq_44174346/article/details/126156032

版权

前端 Bootstrap5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Bootstrap5 表单⭐

堆叠表单

.form-label 内边距
.form-chek 元素周围
.form-check-input 复选单选 .form-check-lable 类

<div class="container mt-3">
  <h2>堆叠表单</h2>
	<form action="">
	  <div class="mb-3 mt-3">
		<label for="email" class="form-label">Email:</label>
		<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
	  </div>
	  <div class="mb-3">
		<label for="pwd" class="form-label">Password:</label>
		<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
	  </div>
	  <div class="form-check mb-3">
		<label class="form-check-label">
		  <input class="form-check-input" type="checkbox" name="remember"> Remember me
		</label>
	  </div>
	  <button type="submit" class="btn btn-primary">Submit</button>
	</form>
</div>

内联表单

.row
.col

<form>
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Enter email" name="email">
      </div>
      <div class="col">
        <input type="password" class="form-control" placeholder="Enter password" name="pswd">
      </div>
    </div>

在这里插入图片描述

文本框

.form-control 渲染

<label for="comment">请输入评论：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

在这里插入图片描述

输入框大小

.form-control-lg .form-control-sm

禁用/只读表单

disabled/readonly

纯文本输入

.form-control-plaintext

取色器

.form-control-color

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Bootstrap5 下拉菜单

下拉菜单元素可以使用 .form-select

.form-select-lg 或 .form-select-sm 类来修改大小

<label for="browser" class="form-label">选择你喜欢的网站：</label>
<input class="form-control" list="sites" name="site" id="site">
<datalist id="sites">
  <option value="Google">
  <option value="Runoob">
  <option value="Taobao">
  <option value="Wiki">
  <option value="Zhihu">
</datalist>

在这里插入图片描述

Bootstrap5 复选框与单选框⭐

.form-check 确保标签和复选框有适当边距
.

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Option 3
  <label class="form-check-label"></label>
</div>

切换开关

form-check form-switch

Bootstrap5 选择区间⭐

<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">

<input type="range" class="form-range" step="10">

type=“range” class=“form-range” step=“10” 设置步长为step属性

最大最小值

 <input type="range" class="form-range" min="0" max="4">

Bootstrap5 输入框组⭐

.input-group 设置文本的样式
.input-group-text 设置文本的样式

<form>
		<div class="input-group mb-3">
			<span class="input-group-text">@</span>
			<input type="text" class="form-control" placeholder="Username">
		</div>

		<div class="input-group">
			<input type="text" class="form-control" placeholder="Your Email">
			<span class="input-group-text">@runoob.com</span>
		</div>
	</form>