Bootstrap 4教程 - 响应式Web前端框架

最后编辑于2025-04-14 13:23:03.6854355 +0800 CST

Bootstrap 4 教程 ¶

Bootstrap 4 Logo

Bootstrap 4 是目前最流行的响应式前端框架，用于开发移动设备优先的网站。这个完整教程将带您从基础到高级，掌握Bootstrap 4的所有核心功能。

Bootstrap 4 简介 ¶

Bootstrap 4 是一个免费的、开源的前端框架，用于开发响应式、移动设备优先的网站。它包含了HTML、CSS和JavaScript基于模板的设计工具，提供了排版、表单、按钮、导航和其他界面组件。

Bootstrap 4 的主要特点 ¶

响应式设计 - 使用Bootstrap 4创建的页面能够自动适应不同设备尺寸
移动优先策略 - 优先考虑移动设备的用户体验，然后扩展到大屏幕设备
基于Flexbox - 内置Flexbox布局系统，提供更灵活的网格布局
兼容性好 - 与所有现代浏览器兼容
多种组件 - 包含丰富的预定义组件，如导航栏、卡片、模态框等
强大的插件 - 提供多种JavaScript插件，无需编写复杂代码

Bootstrap 4 与 Bootstrap 3 的主要区别 ¶

Bootstrap 4 使用Flexbox而不是浮动布局
Bootstrap 4 使用rem单位代替px
全局字体大小从14px增加到16px
新增了卡片组件，替代了面板、缩略图和wells
重新设计的表单元素和改进的导航组件
增强的网格系统和更多的辅助类

Bootstrap 4 主要组件 ¶

Bootstrap 4提供了广泛的组件，使您能够快速构建响应式网站：

网格系统 ¶

基于12列的布局系统，可以轻松创建任意复杂度的页面布局。

排版 ¶

完整的排版系统，包括标题、段落、列表、引用等设置。

表单 ¶

预定义的表单布局、输入控件和验证样式。

导航 ¶

多种导航样式，包括导航栏、标签页、胶囊导航等。

按钮 ¶

各种大小、颜色和状态的按钮样式。

表格 ¶

响应式表格样式，包括条纹表格、悬停效果等。

卡片 ¶

替代旧版本中的面板、缩略图和wells，用于显示内容。

模态框 ¶

创建对话框、通知或自定义内容弹窗。

下拉菜单 ¶

可用于导航或任何需要下拉列表的地方。

轮播图 ¶

用于循环播放元素，如幻灯片或轮播图片。

Bootstrap 4 快速入门 ¶

要开始使用Bootstrap 4，您可以通过多种方式引入它：

从CDN引入 ¶

html

1<!-- 引入Bootstrap 4 CSS文件 -->
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
3
4<!-- 引入Bootstrap 4所需的JavaScript文件 -->
5<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
6<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
7<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

使用npm安装 ¶

bash

1npm install bootstrap@4.6.2

基本HTML模板 ¶