Bootstrap 3 教程

Bootstrap 是一个强大的前端框架，用于更快、更轻松地进行 Web 开发。

Bootstrap 使我们能够以更少的工作量创建灵活且响应式的 Web 布局。

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。

目前 Bootstrap 最新的版本为 Bootstrap5。可以查看我们的 Bootstrap5 教程。

提示 ：我们的 Bootstrap 教程将对每个主题进行易于理解的解释，帮助大家逐步学习 Bootstrap 的基本和高级功能。对于初学者，请从基础开始，然后通过每天学习一点点来逐步前进。

使用 Bootstrap 的优势

如果您对其他前端框架有一定的使用经验，您可能想知道是什么让 Bootstrap 如此特别。以下是 Bootstrap 框架的一些优势：

• 节省大量时间——可以使用 Bootstrap 预定义设计模板和类，从而节省大量时间和精力，并专注于其他开发工作。
• 响应式功能— 使用 Bootstrap，您可以轻松创建响应式网站，这些网站在不同设备和屏幕分辨率上显示得更合适，而无需更改标记。
• 一致的设计——所有 Bootstrap 组件通过一个中央库共享相同的设计模板和样式，因此您的网页的设计和布局将保持一致。
• 易于使用——Bootstrap 非常易于使用。任何具有 HTML、CSS 和 JavaScript 基本知识的人都可以开始使用 Bootstrap 进行开发。
• 与浏览器兼容——Bootstrap 是为现代网络浏览器创建的，它与所有现代浏览器兼容，如 Chrome、Firefox、Safari、Internet Explorer 等。
• 开源- 最好的部分是，它可以完全免费下载和使用。

阅读本教程前，您需要了解的知识：

在开始阅读本教程之前，你必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:

• HTML 教程
• CSS 教程
• JavaScript 教程

Bootstrap3 实例

以下是一个简单的 Bootstrap3 实例：

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一个响应式页面，重置浏览器大小查看效果!</p> 
</div>
 
<div class="container mt-5">
    <div class="row">
        <div class="col-sm-4">
        <h3>第一列</h3>
        <p>迹忆客</p>
        <p>分享的是技术，关注的是成长！！！</p>
        </div>
        <div class="col-sm-4">
        <h3>第二列</h3>
        <p>迹忆客</p>
        <p>分享的是技术，关注的是成长！！！</p>
        </div>
        <div class="col-sm-4">
        <h3>第三列</h3>        
        <p>迹忆客</p>
        <p>分享的是技术，关注的是成长！！！</p>
        </div>
    </div>
</div>

尝试一下

Bootstrap4 与 Bootstrap3

Bootstrap4 与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。

Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。