垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 表单浮动标签 ​

🎯 概述 ​

Bootstrap 表单浮动标签（Floating Labels）提供了一种优雅的表单标签样式，标签会在输入框获得焦点或有内容时浮动到上方。

📦 基本用法 ​

html
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">邮箱地址</label>
</div>

<div class="form-floating">
    <input type="password" class="form-control" id="floatingPassword" placeholder="密码">
    <label for="floatingPassword">密码</label>
</div>

📝 文本域 ​

html
<div class="form-floating">
    <textarea class="form-control" placeholder="留言" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">留言</label>
</div>

📋 选择框 ​

html
<div class="form-floating">
    <select class="form-select" id="floatingSelect">
        <option selected>请选择...</option>
        <option value="1">选项 1</option>
        <option value="2">选项 2</option>
        <option value="3">选项 3</option>
    </select>
    <label for="floatingSelect">选择一个选项</label>
</div>

🌟 实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 表单浮动标签示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 表单浮动标签示例</h1>
        
        <form>
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="name" placeholder="姓名">
                <label for="name">姓名</label>
            </div>
            
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
                <label for="email">邮箱地址</label>
            </div>
            
            <div class="form-floating mb-3">
                <input type="password" class="form-control" id="password" placeholder="密码">
                <label for="password">密码</label>
            </div>
            
            <div class="form-floating mb-3">
                <textarea class="form-control" placeholder="留言" id="message" style="height: 100px"></textarea>
                <label for="message">留言</label>
            </div>
            
            <div class="form-floating mb-3">
                <select class="form-select" id="country">
                    <option selected>请选择...</option>
                    <option value="1">中国</option>
                    <option value="2">美国</option>
                    <option value="3">日本</option>
                </select>
                <label for="country">国家</label>
            </div>
            
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

下一步 ​

下一章：Bootstrap 表单验证 →