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

最新推荐文章于 2023-05-30 11:31:03 发布

preMonster

最新推荐文章于 2023-05-30 11:31:03 发布

阅读量920

点赞数

分类专栏： web前端前端文章标签： html bootstrap jquery 前端框架框架

本文链接：https://blog.csdn.net/preMonster/article/details/74529121

版权

web前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

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

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

一.Bootstarp的下载

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

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

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

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

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

安装成功后，显示这个：

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

二.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>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <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学习吧。

preMonster

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记1——Boostrap下载与引用说明

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

扫一扫