教程 > Bootstrap 4 教程 阅读:460

Bootstrap 4 教程

Bootstrap4 教程

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

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

Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件,助你快速设计和自定义响应式、移动设备优先的站点。

Bootstrap 最初是由 Twitter 的一名设计师和一名开发人员于 2010 年年中创建的。在成为开源框架之前,Bootstrap 被称为 Twitter Blueprint。

目前 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 的基础知识。如果您还不了解这些概念,那么建议您先阅读我们的这些教程:


Bootstrap4 实例

以下是一个简单的 Bootstrap5 实例:

<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 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用 Bootstrap3

查看笔记

扫码一下
查看教程更方便