下面是小凰凰的简介，看下吧！
💗人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
💗学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
💗您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。

文章目录

    • 一、bootstrap简介
    • 二、安装bootstrap
        • 1、npm下载bootstrap到本地进行安装
            • （1）切到项目路径下
            • （2）生成package文件
            • （3）下载bootstrap3、jquery
            • （4）导入css、js文件
        • 2、采用cdn方式导入bootstrap

一、bootstrap简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，`它即是由动态CSS语言Less写成。

在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面：
▪️ 从 Less 迁移到 Sass
▪️ 改进网格系统
▪️ 缺省弹性框支持
▪️ Dropped wells, thumbnails, and panels for cards
▪️ 合并所有 HTML resets 到一个新的模块中：Reboot
▪️ 全新自定义选项
▪️ 不再支持 IE8
▪️ 重写所有的 JavaScript 插件
▪️ 改进工具提示和 popovers 的自动定位
▪️ 改进文档
▪️ 其他大量改进

上文提到的less、sass都是css的升级版！如果有意往前端发展的小伙伴可以了解一下！

二、安装bootstrap

1、npm下载bootstrap到本地进行安装

（1）切到项目路径下
cd /Users/shijiandingyiqingchun/PycharmProjects/learning
（2）生成package文件
npm init --yes
（3）下载bootstrap3、jquery

bootstrap是基于jqeury写的，因此需要下载jq！

npm install bootstrap@3
npm install jquery
（4）导入css、js文件
<!DOCTYPE html>
<html lang="zh-CN">
<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="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
</body>
<script src="jquery.js"></script>
<script src="bootstrap/css/bootstrap.min.js"></script>
</html>

效果对比：
没加bootstrap样式
加上bootstrap样式
是不是感觉好看了许多！

2、采用cdn方式导入bootstrap

<!DOCTYPE html>
<html lang="zh-CN">
<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="https://cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在bootstrap前边) -->
<script src="https://cdn.jsdelivr/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>

更多推荐

bootstrap框架（一）：bootstrap简介与安装