HTML5教程

前端静态页面框架-Bootstrap的引入方式

本文主要是介绍前端静态页面框架-Bootstrap的引入方式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Bootstrap官网


在这里插入图片描述
通过CDN引入方式:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

通过 npm进行安装:

npm install bootstrap@3

require(‘bootstrap’) 代码的作用是加载 Bootstrap 的所有 jQuery 插件到 jQuery 对象上。其中,bootstrap 模块自身并不导出任何内容。你可以通过加载安装包顶级目录下的 /js/*.js 文件的方式手动加载单个的 Bootstrap 插件。

Bootstrap 的 package.json 文件包含了一些额外的元数据信息:

    less - 该目录下包含 Bootstrap 的Less 源码文件
    style - 该目录下包含 Bootstrap 的(按默认设置)预编译且未压缩的 CSS 文件
这篇关于前端静态页面框架-Bootstrap的引入方式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!