正文

Bootstrap3类名快速入门手册：掌握常用布局与组件类名，轻松构建响应式网页

/0 浏览量
0422

Bootstrap 是一个流行的前端框架，它提供了丰富的类名和工具，帮助开发者快速构建响应式网页。Bootstrap3 作为 Bootstrap 的一个版本，拥有许多实用的布局和组件类名，使得构建网页变得更加简单快捷。本手册将带你快速入门 Bootstrap3 的类名，让你轻松掌握常用布局与组件类名，从而构建出美观且功能强大的响应式网页。

1. 布局类名

Bootstrap3 的布局类名主要用于设置网页的容器、行和列。以下是一些常用的布局类名：

  • 容器类名：

    • .container：用于固定宽度的容器。
    • .container-fluid：用于全宽度的容器。

  • 行类名：

    • .row：用于创建行。

  • 列类名：

    • .col-xs-*：针对超小屏幕（<768px）的列。
    • .col-sm-*：针对小屏幕（≥768px）的列。
    • .col-md-*：针对中等屏幕（≥992px）的列。
    • .col-lg-*：针对大屏幕（≥1200px）的列。

2. 响应式工具类名

Bootstrap3 提供了一系列响应式工具类名，用于调整元素的大小、对齐等。以下是一些常用的响应式工具类名：

  • 宽度类名：

    • .col-xs-*：针对超小屏幕（<768px）的宽度。
    • .col-sm-*：针对小屏幕（≥768px）的宽度。
    • .col-md-*：针对中等屏幕（≥992px）的宽度。
    • .col-lg-*：针对大屏幕（≥1200px）的宽度。

  • 对齐类名：

    • .text-left：左对齐。
    • .text-center：居中对齐。
    • .text-right：右对齐。

  • 偏移类名：

    • .col-xs-offset-*：针对超小屏幕的偏移。
    • .col-sm-offset-*：针对小屏幕的偏移。
    • .col-md-offset-*：针对中等屏幕的偏移。
    • .col-lg-offset-*：针对大屏幕的偏移。

3. 常用组件类名

Bootstrap3 提供了丰富的组件类名，用于快速构建各种网页元素。以下是一些常用的组件类名：

  • 按钮：

    • .btn：按钮基本样式。
    • .btn-primary：主要按钮样式。
    • .btn-success：成功按钮样式。
    • .btn-info：信息按钮样式。
    • .btn-warning：警告按钮样式。
    • .btn-danger：危险按钮样式。

  • 表格：

    • .table：表格基本样式。
    • .table-striped：条纹表格样式。
    • .table-bordered：边框表格样式。
    • .table-hover：鼠标悬停效果。

  • 表单：

    • .form-control：表单输入框基本样式。
    • .form-group：表单分组样式。
    • .form-inline：内联表单样式。

  • 其他组件：

    • .alert：警告框样式。
    • .progress：进度条样式。
    • .list-group：列表组样式。

4. 实战案例

以下是一个使用 Bootstrap3 布局和组件类名的简单示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap3 布局与组件类名示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">Bootstrap3 布局与组件类名示例</h1>
                <button type="button" class="btn btn-primary btn-lg">点击我</button>
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>职业</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>20</td>
                            <td>学生</td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td>22</td>
                            <td>程序员</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

通过以上示例，你可以看到 Bootstrap3 的布局和组件类名在网页中的应用。希望这份手册能帮助你快速入门 Bootstrap3 的类名，让你在构建响应式网页的道路上更加得心应手。

-- 展开阅读全文 --