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>
输出:
例子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>
输出: