Bootstrap表单

静Yu
68 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。

堆叠表单（垂直方向）和内联表单（水平方向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>、
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
    <label class="form-label" >Email:</label><br>
    <input type="text" class="form-label">
</div>
<div class="container">
    <label class="form-label">Password:</label><br>
    <input type="text" class="form-label">
</div>
<div class="container">
    <form>
        <div class="row">
            <div class="col">
                <label class="form-label" >Email:</label><br>
            <input type="text" class="form-label">
            </div>
            <div class="col">
                <label class="form-label" >Password:</label><br>
                <input type="text" class="form-label">
            </div>
        </div>
    </form>
</div>
</body>
</html>

文本框

文本框就是我们平时网页见到的文本内容输入框，可以在文本中输入一段文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>、
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <label class="label-form">请输入文本内容：</label><br>
    <textarea class="label-form"></textarea>
</div>
</body>
</html>

下拉菜单

下拉菜单就是平时所见到的下拉框，网页会固定设置一些选项，你只可以从固定的选项中，选出其中一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <div class="col-md-3">
<select class="form-select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
    </div>
</div>
<hr>
<div class="container">
    <div class="col-md-3">
        <select class="form-select "disabled>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>
<hr>
<div class="container">
    <div class="col-md-3">
        <input clasws="form-control" list="seles" id="sele">
        <datalist id="seles">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </datalist>
    </div>
</div>
</body>
</html>

diabaled属性可以使下拉框无法选中个， datalist 标签为 <input> 元素设置下拉菜单.

复选框和单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>、
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" checked>
        <label class="form-check-label">北京</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox">
        <label class="form-check-label">天津</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" >
        <label class="form-check-label">河北</label>
    </div>
</div>
<hr>
<div class="container mt-3">
    <h2>单选框</h2>
    <p>下面的表单包含三个单选按钮，默认选中第一个选项，禁用最后一个选项：</p>
    <form action="/action_page.php">
        <div class="form-check">
            <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
            <label class="form-check-label" for="radio1">Option 1</label>
        </div>
        <div class="form-check">
            <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
            <label class="form-check-label" for="radio2">Option 2</label>
        </div>
        <div class="form-check">
            <input type="radio" class="form-check-input" disabled>
            <label class="form-check-label">Option 3</label>
        </div>
        <button type="submit" class="btn btn-primary mt-3">Submit</button>
    </form>
    <hr>
    <div class="container mt-3">
        <h2>切换开关</h2>
        <p>如果你想把复选框变成一个可切换的开关，可以在 .form-check 容器内使用 .form-switch 类:</p>
        <form action="">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
                <label class="form-check-label" for="mySwitch">Dark Mode</label>
            </div>
            <button type="submit" class="btn btn-primary mt-3">Submit</button>
        </form>
    </div>
</div>
</div>
</body>
</html>

复选框可以选择任意多数量的选项；单选框只能选择一个，最后一个选项加了disabled属性所以无法选中，如果你想把复选框变成一个可切换的开关，可以在 .form-check 容器内使用 .form-switch 类。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>、
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

    <div class="row">
<!--多选框水平方向-->
        <div class="col-md-3">
            <label class="checkbox-inline"><input type="checkbox" name="hobby">北京</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby">北京</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby">北京</label>
        </div>
    </div>
    <!--多选框垂直方向-->
        <div>
            <label class="check"><input type="checkbox" name="bobby">北京</label>
        </div>
        <div >
            <label class="check"><input type="checkbox" name="bobby">北京</label>
        </div>
        <div>
            <label class="check"><input type="checkbox" name="bobby">北京</label>
        </div>

</body>
</html>

选择区间

要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>选择区间</h2>
  <p>要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类：</p>
  <form action="/action_page.php">
    <label for="customRange" class="form-label">自定义选择区间</label>
    <input type="range" class="form-range" id="customRange" name="points">
    <label for="customRange" class="form-label">默认选择区间</label>
    <input type="range" id="defaultRange" name="points"><br>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>
avatar
文章
阅读
粉丝