主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

什么是 Bootstrap4?

Bootstrap4 是一款广受欢迎的用于 HTML、CSS 和 JavaScript 开发的开源前端框架。

Bootstrap4 由 Twitter 团队最初开发,后来成为开源项目。

Bootstrap4 旨在帮助开发者更高效地构建响应式、移动设备优先的网站和 Web 应用程序。


Bootstrap4 适用人群?

只要您掌握 HTML 与 CSS 基础知识,就能轻松阅读本教程,并逐步开发出属于自己的网站。

完成本教程的学习后,您将具备运用 Bootstrap4 开发 Web 项目的中级能力,足以应对各类常见项目需求。


学习前,需要了解的知识:

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


Bootstrap4 实例

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

实例代码 运行代码
复制
<div class="container mt-5">
    <!-- 标题 -->
    <h1 class="text-center mb-4">Bootstrap 特色示例</h1>

    <!-- 网格系统 -->
    <div class="row">
        <!-- 左侧卡片 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <img src="https://kaicz.com/uploads/20250304/20250304101901.jpeg" class="card-img-top" alt="示例图片">
                <div class="card-body">
                    <h5 class="card-title">卡片标题</h5>
                    <p class="card-text">这是一个使用 Bootstrap 卡片组件的示例。卡片可以包含图片、标题和文本。</p>
                    <a href="#" class="btn btn-primary">了解更多</a>
                </div>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="col-md-6">
            <h2>响应式布局</h2>
            <p>Bootstrap 的网格系统可以轻松创建响应式布局。调整浏览器窗口大小,查看布局如何自动适应屏幕尺寸。</p>
            <button type="button" class="btn btn-success">成功按钮</button>
            <button type="button" class="btn btn-danger">危险按钮</button>
            <button type="button" class="btn btn-warning">警告按钮</button>
        </div>
    </div>

    <!-- 提示框 -->
    <div class="alert alert-info mt-4" role="alert">
        <strong>提示:</strong> 这是一个 Bootstrap 的提示框组件,用于显示重要信息。
    </div>
</div>

效果:

Bootstrap4 布局效果图


Bootstrap4 特点

Bootstrap4 是在 Bootstrap3 的基础上进行了大量的更新和改进,下面从多方面对比两者的特点:

  • 代码基础:从 Less 换为 Sass,功能更强大。
  • 响应式设计:断点增至 5 个,用 Flexbox 和 Grid 布局,适配性和灵活性提升。
  • 排版字体:用相对单位,标题和段落样式优化,易读性增强。
  • 组件更新:新增卡片、弹性嵌入组件,样式更现代美观。
  • 颜色系统:颜色选项增多,支持 Sass 变量自定义。
  • JS 插件:依赖 jQuery 但优化实现,自定义选项更多。
  • 兼容性:放弃 IE8、IE9,专注支持现代浏览器。


评论区 0
发表评论
教程介绍
Bootstrap4 广泛使用的前端框架,提供组件与网格系统,助力快速构建响应式网页。
1 章节
76 阅读
0 评论
教程目录

Bootstrap4 教程

Bootstrap4 教程