什么是Bootstrap？Bootstrap开发框架入门知识

WBOLT_COM 8 月 10, 2022 1.1k+ 0

Bootstrap是一个免费的开源Web开发框架。它旨在通过为模板设计提供一组语法来简化响应式、移动优先网站的Web开发过程。

换句话说，Bootstrap帮助Web开发人员更快地构建网站，因为他们不需要担心基本的命令和功能。它由HTML、CSS和基于JS的脚本组成，用于各种与网页设计相关的功能和组件。

本文将介绍使用Bootstrap的好处并解释它使用的不同文件类型。到最后，您将知道Bootstrap是否可以使您的工作流程受益。

Bootstrap的基本功能
为什么要使用Bootstrap？
为什么你不应该使用Bootstrap
3个Bootstrap的主文件
如何在Web开发中使用Bootstrap

Bootstrap的基本功能

Bootstrap官网

Bootstrap的主要目标是创建响应式、移动优先的网站。它确保网站的所有界面元素在所有屏幕尺寸上都能以最佳方式工作。

Bootstrap有两种变体——预编译和基于源代码版本。经验丰富的开发人员更喜欢后者，因为它可以让他们自定义样式以适应他们的项目。

例如，Bootstrap的“源代码”版本允许您访问Sass端口。这意味着它创建了一个导入Bootstrap的自定义样式表，允许您根据需要修改和扩展该工具。

您还可以使用包管理器安装Bootstrap，这是一种管理和更新框架、库和资产的工具。

一些最受欢迎的包管理器包括npm、Composer和Bower。Npm管理服务器端的依赖，而Composer专注于前端。如果您从事基于PHP的项目，请考虑改用Bower。

由于其受欢迎程度，出现了越来越多的Bootstrap社区。这些是Web开发人员和Web设计人员分享知识和讨论最新版本的Bootstrap补丁的好地方。

为什么要使用Bootstrap？

Bootstrap的一些界面组件包括导航栏、网格系统、图像轮播和按钮。

如果您仍然不确定Bootstrap是否值得一试，这里是使用它与其他Web开发框架相比的优势。

使用方便

首先，Bootstrap易于学习。由于其受欢迎程度，有大量教程和在线论坛可帮助您入门。

Bootstrap在Web开发人员和Web设计人员中如此受欢迎的原因之一是它具有简单的文件结构。它的文件经过编译以便于访问，并且只需要HTML、CSS和JS的基本知识即可修改它们。

您还可以将流行内容管理系统的主题用作学习工具。例如，大多数WordPress主题都是使用Bootstrap开发的，任何初学者Web开发人员都可以访问。

为了增加网站的页面加载时间，Bootstrap会缩小CSS和JavaScript文件。此外，Bootstrap保持网站和开发人员之间语法的一致性，非常适合基于团队的项目。

响应式网格

Bootstrap带有一个预定义的网格系统，使您免于从头开始创建一个网格系统。网格系统由行和列组成，让您可以在现有的网格中创建网格，而不是在CSS文件中输入媒体查询。

此外，Bootstrap的网格系统使数据输入过程更加直接。它包含大量媒体查询，允许您根据您的Web项目需求定义每个列的自定义断点。

默认设置通常绰绰有余。创建网格后，您只需向容器中添加内容。

Bootstrap网格系统有两个容器类来更好地适应桌面和移动项目——一个固定容器（.container）和一个流体容器（.container-fluid）。

第一个容器类提供了一个固定宽度的容器，而后者提供了一个全宽容器，能够将您的项目调整为所有屏幕尺寸。

浏览器兼容性

通过不同的浏览器访问您的网站有助于降低跳出率并在搜索结果中排名更高。Bootstrap通过与最新版本的流行浏览器兼容来满足这一要求。

尽管不支持WebKit和Gecko等鲜为人知的浏览器，但带有Bootstrap的网站也应该在它们上正常运行。但是，小屏幕上的模式和下拉菜单可能存在限制。

Bootstrap图像系统

Bootstrap使用其预定义的HTML和CSS规则处理图像显示和响应。

添加.img-responsive类将根据用户的屏幕尺寸自动调整图像大小。这将有利于您网站的性能，因为减小图像大小是网站优化过程的一部分。

Bootstrap还提供了额外的类，如.img-circle和.img-rounded，这有助于修改图像的形状。

Bootstrap文档

Bootstrap为想要第一次学习使用这个框架的开发人员提供了文档。您可以在Bootstrap文档页面上找到以下几个主题：

内容‒ 涵盖预编译的Bootstrap源代码。
浏览器和设备‒ 列出所有受支持的Web和移动浏览器以及基于移动的组件。
JavaScript ‒ 分解基于jQuery构建的各种JS插件。
主题– 解释内置Sass变量以便于自定义。
工具‒ 教你如何使用Bootstrap的npm脚本进行各种操作。
可访问性‒ 涵盖Bootstrap在结构标记、组件、颜色对比、内容可见性和过渡效果方面的功能和限制。

该文档还包括基本实践的代码示例。您甚至可以为您的项目复制和修改代码示例，从而节省您从头开始编写代码的时间。

为什么你不应该使用Bootstrap

尽管有优势，但Bootstrap有一定的局限性，不适合特定类型的项目。

由于Bootstrap具有一致的视觉风格，它需要大量的自定义和样式覆盖以使一个项目与另一个项目不同。否则，使用此框架构建的所有网站都将具有相同的导航、结构和设计组件，使它们看起来不专业。

拥有大量功能意味着包含大型文件。如果您不小心，在您的项目中使用Bootstrap会减慢网站的加载时间并加重您的服务器的负担。为避免此问题，请确保仅添加您需要的类并使用文件的缩小版本。

虽然Bootstrap与最新版本的流行浏览器兼容，但旧版本并非如此。这意味着您网站的外观将完全取决于用户在更新浏览器时的努力程度。

另一个缺点是Bootstrap样式相对笨重。这会导致不必要的HTML输出，浪费中央处理器资源。

虽然它很容易使用，但Bootstrap一开始有一点学习曲线。学习可用的类和组件需要时间，这对于没有技术知识的人来说可能很复杂。

3个Bootstrap的主文件

Bootstrap包含一组在三个主要文件中编译的语法——Bootstrap.css、Bootstrap.js和Glyphicons。请记住，Bootstrap需要一个名为jQuery的JS库来运行JS插件和组件。

以下是管理网站用户界面和功能的三个主要框架文件。

Bootstrap.css

Bootstrap.css是一个CSS框架，用于安排和管理网站的布局。HTML处理网页的内容和结构，而CSS处理布局本身。出于这个原因，两个结构需要共存在一起才能执行特定的操作。

Bootstrap.css及其功能可帮助开发人员根据需要在尽可能多的页面上创建统一的外观。因此，Web 开发人员不必花费数小时进行手动编辑。

无需从头开始编码，您只需要将网页引用到CSS文件。任何必要的更改都可以单独在该文件中完成。

CSS函数不仅限于文本样式，因为您可以使用它们来格式化网站中的其他方面，例如表格和图像布局。

由于CSS有很多声明和选择器，因此记住所有这些可能需要一些时间。请参阅我们的CSS备忘单以简化您的学习过程。

Bootstrap.js

该文件是Bootstrap的核心部分。它由负责网站交互性的JavaScript文件组成。

为了节省多次编写JavaScript语法的时间，开发人员倾向于使用jQuery——一个流行的开源跨平台JavaScript库。

下面是几个jQuery可以做的例子：

执行AJAX请求，例如动态地从另一个位置减去数据。
使用JavaScript插件集合创建小工具。
使用CSS属性创建自定义动画。
为网站内容添加动态。

虽然带有CSS属性和HTML元素的Bootstrap可以正常运行，但它需要jQuery来创建响应式设计。否则，您只能使用样式表语言的裸露的、静态的部分。

因此，每个软件工程师都应该了解jQuery，因为它是Web开发的重要组成部分。

Glyphicons

图标是网站前端不可或缺的一部分，因为它们通常在用户界面中显示操作和数据。

Bootstrap使用称为Glyphicons的图标，其中包括Glyphicons Halflings集。虽然设计是基本的，但它们执行其基本功能，并且可以免费使用。

如果您想找到更时尚的图标，Glyphicons为特定领域的网站销售各种高级套装。

您还可以在Flaticon、GlyphSearch和Icons8等各种网站上免费下载单个和特定主题的图标。

要更改Glyphicons的大小，您需要使用CSS font-size属性覆盖默认样式。

如何在Web开发中使用Bootstrap

为了更好地了解如何使用引导程序，请看下面的示例。

<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

我们将更详细地解释其中的一些行。

meta charset="utf-8"

说明用于编写网站的字符集。在这种情况下，UTF-8指的是Unicode。

meta http-equiv="X-UA-Compatible"

确定应呈现页面的Internet Explorer版本。使用Edge模式，它被设置为使用可用的最高模式。

meta name="viewport"

确保页面与视口大小的比例为1:1。

link href="css/bootstrap.min.css" rel="stylesheet"

这是我们添加Bootstrap核心CSS的地方。

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

通过Google CDN加载jQuery。最好通过HTTP从CDN加载它，因为文件可以缓存一年。

src="js/bootstrap.min.js

添加Bootstrap核心JavaScript。此语法必须低于jQuery语法才能正常运行。添加过程可以通过Google的URL或手动下载来完成。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Bootstrap提供了一个JavaScript包来简化这个过程。但是，bootstrap.bundle.js和bootstrap.bundle.min.js包含Popper而不是jQuery。Popper是一个定位引擎，用于计算元素的定位。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

如何使用Bootstrap导航栏导航链接创建站点菜单的示例。