如何使用bootstrap框架

使用bootstrap框架

第一步就是引入bootstarp的两个必要的文件，一个是CSS文件，而另一个就是JS文件，bootstrap里面的组件和样式都是基于这两个文件才生效的。常用的安装bootstrap有两种，第一种方式就是使用线上的CDN方式，直接在head里面引入即可。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

第二种方式就是通过npm方式安装，需要事先安装node。直接打开nodejs官网直接下载安装，直接下一步即可。下载安装完成之后打开终端，windows系统用cmd（win+R）打开。

如果显示这样说明你的node安装成功，npm是它默认帮你安装的，所以你无须手动安装。bootstrap的安装如下：

npm install bootstrap@3

你可以去看一下bootstrap的文件结构，大致长这样：

其实最主要的还是两个文件，css和js，如果你想要更多的模板和主题，你可以直接去找bootwatch，里面有很多主题供你使用。今天的分享就到这里啦，欢迎大家留言。

ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！