如何使用bootstrap框架

使用bootstrap框架

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

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

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

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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,里面有很多主题供你使用。今天的分享就到这里啦,欢迎大家留言。

猜你喜欢

转载自blog.csdn.net/weixin_42724176/article/details/83450995