垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 输入框组 ​

🎯 概述 ​

Bootstrap 输入框组（Input Groups）允许在输入框的前后添加文本、按钮或下拉菜单，用于创建更丰富的表单控件。

📦 基本用法 ​

html
<!-- 前置文本 -->
<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="用户名">
</div>

<!-- 后置文本 -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="收件人用户名">
    <span class="input-group-text">@example.com</span>
</div>

<!-- 前后都有 -->
<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control">
    <span class="input-group-text">.00</span>
</div>

🔘 带按钮的输入框组 ​

html
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="搜索...">
    <button class="btn btn-outline-secondary" type="button">搜索</button>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">按钮</button>
    <input type="text" class="form-control">
</div>

📏 大小 ​

html
<!-- 大尺寸 -->
<div class="input-group input-group-lg mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control">
</div>

<!-- 默认尺寸 -->
<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control">
</div>

<!-- 小尺寸 -->
<div class="input-group input-group-sm mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control">
</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>
        
        <h2>基本输入框组</h2>
        <div class="input-group mb-3">
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
        
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="邮箱">
            <span class="input-group-text">@example.com</span>
        </div>
        
        <h2>带按钮</h2>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="搜索...">
            <button class="btn btn-primary" type="button">搜索</button>
        </div>
        
        <h2>价格输入</h2>
        <div class="input-group mb-3">
            <span class="input-group-text">¥</span>
            <input type="text" class="form-control" placeholder="0.00">
            <span class="input-group-text">.00</span>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

下一步 ​

下一章：Bootstrap 表单浮动标签 →