使用bootstrap框架

第一步就是引入bootstarp的两个必要的文件,一个是CSS文件,而另一个就是JS文件,bootstrap里面的组件和样式都是基于这两个文件才生效的。常用的安***ootstrap有两种,第一种方式就是使用线上的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:笔者最近开通了微信公众号,大家可以关注一下哦,谢谢大家的支持!