bootstrap 3.0 模板-网站模板-锦华智联科技

Bootstrap 3 是一个非常经典且强大的前端框架，虽然现在主流版本是 5，但许多遗留项目仍在使用 3，了解 3 的基本结构和使用方法依然很有价值。

（图片来源网络，侵删）

核心概念：Bootstrap 3 的“移动优先” (Mobile-First)

在开始之前，请务必理解 Bootstrap 3 的核心设计哲学：移动优先。

基础是移动设备：首先为小屏幕（手机）编写样式和布局。
渐进增强：然后通过媒体查询，逐步为平板、桌面等大屏幕添加更多的样式和布局复杂性。

这个思想体现在它的 12列网格系统 和 响应式工具类 中。

最基础的 HTML 模板

这是使用 Bootstrap 3 所需的最基本 HTML 结构，您可以将此代码保存为 .html 文件,然后在浏览器中打开即可看到一个简单的页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bootstrap 3 模板">
    <meta name="author" content="Your Name">
Bootstrap 3 模板</title>
    <!-- 1. 引入 Bootstrap 核心 CSS 文件 -->
    <!-- 从 CDN 引入是推荐的做法，速度快，无需下载 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选：引入 Bootstrap 主题文件（用于美化） -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- 可选：自定义的 CSS 文件，放在这里会覆盖 Bootstrap 的默认样式 -->
    <style>
        body {
            padding-top: 50px; /* 为固定在顶部的导航栏留出空间 */
        }
        .starter-template {
            padding: 40px 15px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 2. 创建一个固定在顶部的导航栏 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <!-- 在小屏幕上显示的“汉堡”菜单按钮 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">项目名称</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#about">lt;/a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    <!-- 3. 主要内容区域 -->
    <div class="container">
        <div class="starter-template">
            <h1>你好，Bootstrap 3!</h1>
            <p class="lead">这是一个使用 Bootstrap 3 构建的简单模板，它包含了响应式导航栏、一个容器和一些基本样式。</p>
            <p><a href="https://getbootstrap.com/docs/3.3/" class="btn btn-primary btn-lg" role="button">阅读 Bootstrap 3 文档 &raquo;</a></p>
        </div>
    </div><!-- /.container -->
    <!-- 4. 引入 Bootstrap 的 JavaScript 文件，并依赖 jQuery -->
    <!-- jQuery 必须在 Bootstrap 之前引入 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

模板结构详解

A. `<head>` 部分

<meta charset="utf-8">: 确保浏览器能正确显示中文等非英文字符。
<meta http-equiv="X-UA-Compatible" ...>: 强制使用最新的 IE 内核渲染页面。
<meta name="viewport" ...>: 这是响应式设计的核心！ 它告诉浏览器如何控制页面的尺寸和缩放。
- width=device-width: 页面宽度默认等于设备屏幕的宽度。
- initial-scale=1.0: 初始缩放比例为 1.0,即不缩放。
CSS 引入:
- bootstrap.min.css: Bootstrap 的核心样式文件,包含了所有组件和工具类。
- bootstrap-theme.min.css: 一个可选的主题文件，为组件提供了更现代的视觉效果（如按钮、表单等），如果不引入,将使用默认样式。
- 自定义 <style>: 用于编写你自己的覆盖样式。

B. `<body>` 部分

导航栏:
（图片来源网络，侵删）
- navbar navbar-inverse: 创建一个深色背景的导航栏。navbar-default 则是浅色。
- navbar-fixed-top: 将导航栏固定在页面顶部,滚动时不会消失。
- navbar-header: 包含品牌名称和用于小屏幕的切换按钮。
- navbar-toggle: 小屏幕上的“汉堡”菜单按钮。
- collapse navbar-collapse: 包含导航链接的列表,在小屏幕上会默认折叠。
容器:
- container: 一个固定宽度的居中容器,在不同屏幕尺寸下有最大宽度限制。
- container-fluid: 一个 100% 宽度的容器，会占满整个视口宽度,适合全屏布局。
- starter-template: 一个示例用的样式类,用于居中内容。
- btn btn-primary btn-lg: 按钮的样式类组合。btn 是基础，btn-primary 是颜色主题，btn-lg 是尺寸。

C. 底部 `<script>` 部分

jquery.min.js: Bootstrap 的所有 JavaScript 组件（如模态框、下拉菜单、折叠等）都依赖于 jQuery。必须先引入 jQuery。
bootstrap.min.js: 包含了所有可交互的 JavaScript 插件。

核心功能示例

A. 响应式网格系统

网格系统是 Bootstrap 的灵魂，它将页面划分为 12 列。

<div class="container">
    <h2>响应式网格系统示例</h2>
    <p>调整浏览器窗口大小，观察布局变化。</p>
    <!-- 在大屏幕上占6列，中等屏幕占12列，小屏幕占12列 -->
    <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12">
            <div class="alert alert-info">左侧内容 (在大屏幕上占一半，小屏幕上占满)</div>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12">
            <div class="alert alert-success">右侧内容 (在大屏幕上占一半，小屏幕上占满)</div>
        </div>
    </div>
    <!-- 在所有屏幕上都占12列 -->
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="alert alert-warning">这个区块在所有屏幕上都占满宽度。</div>
        </div>
    </div>
</div>

col-lg-*: Large 屏幕 (≥1200px)
col-md-*: Medium 屏幕 (≥992px)
col-sm-*: Small 屏幕 (≥768px)
col-xs-*: Extra Small 屏幕 (<768px)

B. 表单

Bootstrap 能让表单变得非常美观和易用。

<div class="container">
    <h2>表单示例</h2>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">邮箱地址</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">文件上传</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">这里是帮助文本。</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 记住我
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

C. 组件

Bootstrap 提供了大量开箱即用的组件。

按钮: <button class="btn btn-primary">主要按钮</button>
下拉菜单: 需要额外的 JavaScript 支持。
模态框: 点击按钮弹出的对话框。
警告框: <div class="alert alert-danger">这是一个错误警告！</div>

如何获取 Bootstrap 3

从 CDN 引入 (推荐): 如上面模板所示，直接使用 CDN 链接，这是最简单、最快捷的方式，CDN 会自动缓存文件,加载速度快。
下载源文件: 如果你需要离线开发或自定义，可以从 Bootstrap 官网下载。
- Bootstrap: 包含编译好的 CSS 和 JS 文件。
- Source: 包含 Less 源文件，如果你需要深度定制，可以使用 Less 编译器重新生成 CSS。

总结与升级建议

优点: Bootstrap 3 文档完善、社区庞大、组件丰富,能快速搭建出美观且响应式的网站。
缺点: 相比 Bootstrap 4/5，其网格系统语法略显繁琐，对 Flexbox 和 CSS 变量的原生支持较弱。

重要提示: 除非你在维护一个旧的 Bootstrap 3 项目，否则强烈建议学习和使用 Bootstrap 5，Bootstrap 5 更现代、更轻量、更灵活，并且移除了对 jQuery 的依赖，使用原生 JavaScript,是当前开发新项目的最佳选择。

bootstrap 3.0 模板