Bootstrap表单和输入

表单和输入

6.1 表单基础

Bootstrap可以帮助您创建漂亮且易于使用的表单。以下是一个基本的表单示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>

    <form>
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
        </div>
        <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" rows="4" placeholder="Enter your message"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

效果

6.2 表单验证

Bootstrap提供了表单验证样式，可以帮助用户填写正确的表单数据。以下是一个带有表单验证的示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>


    <form>
        <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" required>
            <div class="invalid-feedback">
                Please choose a username.
            </div>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" required>
            <div class="invalid-feedback">
                Please provide a password.
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
    <!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

效果

6.3 输入框、下拉菜单等元素样式

Bootstrap提供了多种输入框、下拉菜单等元素的样式。以下是一些示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>


    <input type="text" class="form-control" placeholder="Text input">
    <select class="form-select" aria-label="Select example">
<option selected>Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
    <input type="file" class="form-control" id="formFile">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
    </div>
    <!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

上篇 Bootstrap CSS组件 Bootstrap定制化主题下篇

Bootstrap表单和输入

网友评论0