Rumah > Artikel > hujung hadapan web > 怎么引入bootstrap
怎么引入bootstrap
- 藏色散人asal
- 2019-06-01 10:13:587593semak imbas
Bootstrap的使用一般有两种方法：
引用在线的Bootstrap的样式，
将Bootstrap下载到本地进行引用。
在线引用
基本模板如下：
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap引入</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>优点：不用本地安装Bootstrap，也不用考虑引用时的路径问题
缺点：一旦在线样式挂了，那么会影响整个页面样式的呈现
本地引用
将Bootstrap下载到本地。
直接访问上述代码中的3个网址来获取代码
去Bootstrap的官网 http://v3.bootcss.com/ 和JQuery
的官网 http://jquery.com/ 下载相应的文件
将需要的文件放在项目下，便于引用
bootstrap的目录结构如下：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2最常用的是css/bootstrap.min.css、js/bootstrap.min.js
jquery.min.js可以在JQuery官网下载
最后，在相应文件中引入即可。
优点：确保网络状况不佳的情况下，页面样式依然可以正常显示
缺点：需要提前安装或下载，引用时要考虑路径问题。
Atas ialah kandungan terperinci 怎么引入bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：为什么普遍使用json？Artikel seterusnya：vue.js框架是干什么的