Bootstrap学习笔记1——Boostrap下载与引用说明

逃离我推掉我的手 2022-06-13 11:39 205阅读 0赞

![Center][]

Bootstrap目前作为最流行的前端框架之一，广受前端工程师们的欢迎，Bootstrap 基于 HTML、CSS、JAVASCRIPT 的，简洁灵活，使web开发更加方便。

我之前一直想学习这个流行的框架，但是碍于种种，一直没好好的学，这段时间有了一点空闲，希望能将我对Bootstrap的学习领悟分享给大家。

## 一.Bootstarp的下载 ##

Bootstrap作为简易的开源框架备受好评，它的下载也是免费的，读者可以前往官网进行下载：[点击这里][Link 1]。

若读者觉得太过麻烦，也可以选择命令行进行下载，我使用的便是npm进行下载。

若想要使用npm进行下载，最好事先进行node.js安装，npm也在其中。

建立demo文件夹，在文件夹下运行：npm install bootsrap@3

当然若你安装好了cnpm也可以输入：cnpm install bootsrap@3

![Center 1][]

安装成功后，显示这个：

![Center 2][]

若在文件夹中出现这个文件夹，便代表你下载成功了，里面便是bootstrap。

![Center 3][]

## 二.Bootstarp的引用 ##

下载好了bootstrap,并不代表你就能直接用了，你想要引入bootsrap进行页面，你首先需要注意一点：

bootstrap制作的插件都是用jquery实现的，就是里面的语法都是按jquery的，所以一定要先引入jquery.js文件，才能用bootstrap插件，不然就会报错，效果出不来。

想要加载bootstrap的js必须先加载jquery文件，若没有jquery文件，可以选择到jquery官网进行下载：点击这里。具体jquery引用方式与普通js引用完全一样。

我们可以先在跟项目创一个Demo,然后引入Bootstrap。

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewpor" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
    		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
    		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap-theme.css"/>
    		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css"/>
    	</head>
    	<body>
    		<h1>This is your first Bootstrap</h1>
    	</body>
          
        <script src="node_modules/bootstrap/js/jquery-3.2.1.min.js"></script>
    	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    	<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    </html>

只有真正在页面中引入了bootstrap所需要的js，css才能真正使用bootstrap框架。下面让我们正式开始Bootstrap学习吧。

[Center]: /images/20220613/a90c24a739c14d8fb81a5403b4717624.png
[Link 1]: http://v3.bootcss.com/
[Center 1]: /images/20220613/88ffa68de7aa4a8ca3690f919e011ffa.png
[Center 2]: /images/20220613/b684594ee60c4c8395fbab3c93f31394.png
[Center 3]: /images/20220613/0dc662028fac46d897e70b3661950377.png