📌  相关文章
📜  BootStrap 介绍及安装(1)

📅  最后修改于: 2023-12-03 15:29:39.116000             🧑  作者: Mango

BootStrap 介绍及安装

什么是 BootStrap?

Bootstrap 是一个流行的开源前端框架，由Twitter工程师Mark Otto和Jacob Thornton创建。 它是一个包含HTML，CSS和JavaScript的工具包，在Web应用程序开发中广泛使用。

Bootstrap基于响应式设计，使网站在各种设备上都能很好地展示，无需编写额外的CSS代码。

Bootstrap框架提供了许多预定义的 UI 元素和样式，例如表格、表单、按钮、导航栏等。 可以很容易地将它们用于你的网站或Web应用程序中，从而减少了开发时间和代码量。

安装 Bootstrap

安装 Bootstrap 可以选择下载源代码并在你的项目中引用，也可以使用CDN（内容分发网络）将资源直接引入页面。

方式一：下载源代码使用

可以在Bootstrap官网下载Bootstrap源代码。

下载完成后，将源代码解压缩，将css、js和fonts目录中的文件复制到你的项目中引用。

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
方式二：使用CDN引入

可以使用CDN直接将资源引入到你的页面中。这样可以加快页面的加载速度。

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 引入JS文件 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
使用 Bootstrap

安装完成后，就可以开始使用Bootstrap了。

示例

现在，我们在页面中创建一个简单的示例，展示Bootstrap的一些常用特性。

首先，我们需要一些基本的HTML代码来定义页面的结构。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap示例</title>
  <!-- 引入Bootstrap CSS文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>这是一个Bootstrap示例</h1>
    <p>Bootstrap可以帮助我们快速构建漂亮的Web应用程序，而无需重新发明轮子。</p>
    <button class="btn btn-primary">点击我</button>
  </div>
  <!-- 引入jQuery和Bootstrap JS文件 -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在上面的示例中，我们引入了Bootstrap CSS文件和jQuery和Bootstrap JS文件。

此外，我们还创建了一个简单的页面，其中包含一个标题、一些文本和一个按钮，这些都是使用Bootstrap样式和组件创建的。

最后，我们在页面底部引入了Bootstrap JS文件，以便响应用户的操作。

效果

BootStrap示例效果

结论

Bootstrap是一个流行的前端框架，它可以帮助您快速构建漂亮的Web应用程序。 安装和使用Bootstrap非常简单，可以大大减少开发时间和代码量。

注意：在使用 Bootstrap 时，请务必按照官方文档进行操作，以便确保您的代码兼容所有现代浏览器。