什么是 Bootstrap 4?

17 Mar 2025 | 5 分钟阅读
What is Bootstrap 4

Bootstrap 4 是 Bootstrap 的最新版本。 Bootstrap 可以定义为一个免费且开源的框架,可用于创建响应式、移动优先的前端网页。

Bootstrap 的优点

Bootstrap 有各种不同的优点,下面给出了一些

  1. 使用 Bootstrap 的首要和最重要的优点是它非常易于使用和实现。 如果一个人对 HTML 和 CSS 有一些基本的了解,那么该用户就可以轻松使用 Bootstrap。
  2. Bootstrap 可以适应任何手机、平板电脑、桌面等的大小,这一个事实也是一个非常有趣的特性。
  3. Bootstrap 4 也很有用,因为它与所有现代浏览器兼容,包括 Google Chrome、Firefox、Internet Explorer 10+、Edge、Safari 和 Opera。
  4. 它还会产生更少的跨浏览器错误。
  5. 它重量轻,因此可以广泛用作创建响应式站点的框架。
  6. 最后,Bootstrap 4 是一个非常简单但非常有效的网格系统。

为什么要使用 Bootstrap?

这有多种原因,例如

  1. 这是一种更快、更简单的方式来开发网站。
  2. 它可以创建与平台无关的网页。
  3. 它还可以创建响应式网页。
  4. 使用 Bootstrap 4 创建的网页可以很容易地实现响应式。

Bootstrap 4 在当今世界的一些主要用途是什么?

Bootstrap 4 有各种主要用途,示例如下

  1. 支持各种浏览器:它可以在每个浏览器中得到支持。
  2. 易于开始和实现:当用户对 HTML 和 CSS 有一定的了解时,它非常容易上手和实现。 除此之外,官方网站上很容易获得文档。
  3. 响应式设计和外观:使用 Bootstrap 框架创建的网页具有响应性,并且可以适应任何屏幕尺寸,例如移动设备、桌面等。
  4. 易于定制:它还提供了一些内置组件和功能,可用于轻松定制网页。

bootstrap 4 的缺点是什么?

Bootstrap 4 也有很多缺点; 这些缺点如下

  1. 在许多情况下,Bootstrap 并不适合需要大量投资的企业。
  2. 此外,Bootstrap 4 可能需要很长时间才能创建一个网站。 因此,在没有投资的情况下使用 bootstrap 4 并不是一个好主意。
  3. 使用 Bootstrap 4 的人即使投资也可能赚不到钱。
  4. 这也是用户很容易负债累累的原因之一。

Bootstrap 3 与 Bootstrap 4

Bootstrap 3Bootstrap 4
在 Bootstrap 3 中,CSS 源文件是 LESS(Leaner Style Sheets)。在 Bootstrap 4 中,CSS 源文件是 SCSS (Sassy CSS)。
在这里,网格系统有 4 个层级,分别是 xs、sm、md 和 lg。在这里,网格系统有 5 个层级,分别是 xs、sm、md、lg 和 xl。
CSS 单位是 px。CSS 单位是 rem。
下拉结构是在 <ul> 和 <li> 的帮助下创建的。下拉结构是在 <ul> 和 <div> 的帮助下创建的
类 .img-responsive 用于创建响应式图像。类 .img-fluid 用于创建响应式图像。
对于图标,用户可以使用 Glyphicons。Bootstrap 4 中不支持 Glyphicons。
有很多类用于媒体对象,例如 .media、.media-body、.media-object、.media-heading 等等。媒体对象只有一个类,即 .media。
Bootstrap 3 中不支持深色或反向表用户可以使用 .table-dark 类创建深色或反向表。
唯一可用于创建按钮的类是 .btn-default 和 .btn-info引入了许多新类,可用于创建按钮,例如 - .btn-light、.btn-secondary、.btn-success、.btn-dark。 此外,.btn-default 类被删除了。
可以使用 .btn-xs 类创建一个超小尺寸的按钮。超小尺寸的按钮在 Bootstrap 4 中不再可用。 唯一可用的类是 .btn-sm 和 .btn-lg。
复选框或单选框是使用诸如 .radio、.radio-inline、.checkbox 和 .checkbox-inline 之类的类创建的。复选框和单选按钮是使用诸如 .form-check、.form-check-label、.form-check-input 和 .form-check-inline 之类的类创建的。
表格的大小可以通过使用 .input-lg 和 .input-sm 类来增加或减少。表格的大小可以通过使用 .form-control-lg 和 .form-control-sm 类来增加或减少。
菜单标题可以通过使用 .dropdown-header 类添加到 li 标签来创建。菜单标题是通过使用 .dropdown-header 类与 h1 到 h2 标签一起创建的。
为了划分部分,在 li 元素中使用类 .divider。为了划分部分,可以在 div 元素中使用类 .dropdown-divider。
页面可以通过 .previous 和 .next 类对齐。此类 .previous 和 .next 在此不受支持。
在这里,不能使用 .jumbotron-fluid 类来创建全宽巨型导航栏。Bootstrap 4 允许用户使用 .jumbotron-fluid 类来创建全宽巨型导航栏。
类 .items 用于创建轮播项目。类 .carousel-items 用于轮播项目。
在 Bootstrap 3 中,支持 wells、panels 和缩略图。在 Bootstrap 4 中,不支持 wells、panels 和缩略图。取而代之的是,可以使用卡片。

前提条件

在学习 Bootstrap 4 之前,您应该对 HTML 和 CSS 有基本的了解。

目标受众

我们的 Bootstrap 4 教程旨在帮助愿意学习 Bootstrap 4 概念并成为前端开发人员的初学者和软件专业人士。 在本教程结束时,您将获得 Bootstrap 4 的中级专业知识。

问题

我们向您保证,您不会发现 Bootstrap 4 教程有任何问题。 但如果存在任何错误,请在联系表单中发布问题。


下一主题环境设置