CSS Twitter Bootstrap 3 内联表单带标签

在本文中，我们将介绍如何使用 CSS Twitter Bootstrap 3 创建一个带有标签的内联表单。内联表单是一种布局形式，其中表单的输入字段和标签在同一行显示。这种形式可以提供更紧凑和简洁的页面布局，使用户更容易理解和填写表单信息。

阅读更多：CSS 教程

准备工作

首先，我们需要确保已经引入了 CSS Twitter Bootstrap 3 的样式文件和相关的 JavaScript 文件。这样我们才能正确地使用 Bootstrap 提供的表单样式和功能。以下是引入文件的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内联表单</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 在这里编写表单的HTML代码 -->
</body>
</html>

请确保将上述代码中的 CSS 和 JavaScript 文件链接地址替换为正确的路径或CDN地址。

创建内联表单

接下来，我们将创建一个简单的内联表单。使用 Bootstrap 的内置样式可以方便地实现这个效果。以下是一个带有两个输入字段的内联表单示例代码：

<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName">姓名：</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail">邮箱：</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="请输入邮箱">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

在上述代码中，我们使用了 form-inline 类来指定这是一个内联表单。然后，我们使用 form-group 类将每个表单元素放在一个表单组中。标签和输入字段分别位于表单组内的 label 和 input 元素中。通过这种方式，我们可以将标签和输入字段显示在同一行上。

自定义样式

除了使用 Bootstrap 提供的默认样式外，我们还可以根据需要进行自定义。通过添加自定义的 CSS 类，我们可以改变标签和输入字段的样式。例如，我们可以将标签和输入字段显示为水平排列的行内元素，而不是块级元素。以下是自定义样式的示例代码：

<style>
    .custom-label-input {
        display: inline-block;
        margin-right: 10px;
    }
</style>

<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName" class="custom-label-input">姓名：</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail" class="custom-label-input">邮箱：</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="请输入邮箱">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

在上述代码中，我们使用了一个自定义的 CSS 类 .custom-label-input 来实现水平排列的标签和输入字段。通过设置 display: inline-block; 和 margin-right: 10px;，我们将标签和输入字段显示为行内元素，并在它们之间添加了一定的间距。