Bootstrap 5表格控件的颜色

Bootstrap 5是Bootstrap的最新版本，它是最流行的HTML、CSS和JavaScript框架，用于创建响应式、移动优先的网站。在经过几个月的重新定义其功能后，它于2020年6月16日正式发布。

Bootstrap 5表格控件颜色用于设置颜色类型输入字段的颜色。要创建一个颜色类型的输入字段，在<input> 元素中使用type=”color “属性。

表格控制颜色

使用的类:

form-control-color: 该类用于<input> 元素，用于创建一个颜色输入域。

语法:

<label for="colorfield" class="form-label">
      Color picker
</label>
<input type="color" 
      class="form-control form-control-color" 
      id="colorfield" value="..." title="...">

例子1：在这个例子中，我们将使用<label>和<input> 元素与.form-label、.form-control和.form-control-color类来创建一个颜色输入域。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Form controls Color</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Form controls Color</h2>
  
        <label for="GFG_Color" class="form-label">
            Select Color
        </label>
        <input type="color" class="m-auto 
            form-control form-control-color" 
            id="GFG_Color" value="#006600">
    </div>
</body>
</html>

输出:

Bootstrap 5表格控件的颜色

例子2：在这个例子中，我们将使用<label>，<input> ， <datalist>以及<option>带有.form-label ，和.form-control类的元素来创建一个颜色选择的选项输入域。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap5 Form controls Color</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Form controls Color</h2>
  
        <label for="GFG_Color" class="form-label">
            Select Color
        </label>
        <input type="color" class="form-control" 
            list="colors" id="GFG_Color" 
            placeholder="Select Color">
        <datalist id="colors">
            <option value="#ff0000"></option>
            <option value="#00ff00"></option>
            <option value="#0000ff"></option>
            <option value="#660000"></option>
            <option value="#006600"></option>
            <option value="#000066"></option>
            <option value="#cc0000"></option>
            <option value="#00cc00"></option>
            <option value="#0034af"></option>
        </datalist>
    </div>
</body>
</html>