Bootstrap5 复选框、单选按钮、滑块

听海边涛声

于 2024-09-02 07:58:44 发布

阅读量97

点赞数 1

文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/141789048

版权

https://getbootstrap.com/docs/5.3/forms/checks-radios/

复选框有不同的标记，它们被设置了.form-check 类的容器元素包围。label设置.form-check-label类，而复选框和单选按钮使用.form-check-input。希望默认选中复选框，可以使用checked属性。

复选框

使用.form-check 类包装元素，来确保标签和复选框有适当的外边距。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <div class="form-check">
        <input type="checkbox" class="form-check-input">
        <label for="" class="form-check-label">选项1</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input">
        <label for="" class="form-check-label">选项2</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input">
        <label for="" class="form-check-label">选项3</label>
      </div>
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

单选按钮

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <div class="form-check">
        <input type="radio" name="gender" checked class="form-check-input">
        <label for="" class="form-check-label">男</label>
      </div>
      <div class="form-check">
        <input type="radio" name="gender" class="form-check-input">
        <label for="" class="form-check-label">女</label>
      </div>
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

拨动开关

https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches

将复选框设置为切换开关的样式，可以将.form-switch 类和 .form-check类一起使用。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" checked>
        <label for="" class="form-check-label">开关</label>
      </div>
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

滑块

https://getbootstrap.com/docs/5.3/forms/range/

.form-range 类添加到type="range"的input元素，可以设置范围菜单的样式。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <input type="range" class="form-range">
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>