Bootstrap快速使用

宋正兵 on 2021-04-22

下载并添加到项目

Bootstrap 官网:https://v3.bootcss.com/

直接下来用于生产环境的 Bootstrap。

image.png

然后将压缩包内的 css、fonts 和 js 文件夹拷贝放入我们的项目当中。

imagebad84e7a00e89fb4.png

在index.html页面中添加外部资源

index.html

1
2
3
4
5
6
7
8
9
10
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../static/css/bootstrap.min.css"/>
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="../static/css/bootstrap-theme.min.css"/>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../static/js/bootstrap.min.js" type="application/javascript"></script>
</head>

快速插入组件

在 Bootstrap 官网的导航栏中找到“组件”,进入该页面。

image1c3289bfc5d21c0c.png

假设现在我们想给 index.html 添加一个导航栏,于是我们在下方找到

  1. 在目录中找到我们想要的组件
  2. 观察预览样式,找到我们想要的
  3. 复制代码粘贴到 index.html 当中

image35bff38f51eb48c8.png

启动查看效果

image3024b775a2cf81d2.png

可以看到成功添加了导航栏组件。

真是一个方便的工具。