哈喽，欢迎观看我的第一篇文档
个人简介
新人一枚，前端工作者，乐于分享，希望能跟大家一起学习一起深造。
有其他分享的内容或不懂得可以私信我。
今天我们学习Bootstrap（界面工具集）
Bootstrap，来自 Twitter (推特)，是目前最受欢迎的前端框架(它算半个框架，像Vue、微信小程序等等，这些才是框架。它叫界面工具集)。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
本文章将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。
你结合本文章和菜鸟教程一起看，只要认真看保准学会。
这是菜鸟教程官网：菜鸟教程官网
Bootstrap有3和4版本，通用没事，看哪个都可，我目前用3版本的。
bootstrap3.0
下载Bootstrap
先下载会下载Bootstrap
在Bootstrap官网下载就可，bootstrap下载需求看自己需要结合本文章。
我是用npm方法下载的
-
在需要下载的文件夹，点击此处输入cmd ,敲回车即可
-
在cmd(运行) 里面输入
npm install bootstrap@3回车，就显示已经下载
-
报错就是代码输入的不对，空格也要写上去
-
下载就算完成了，打开编辑器，引入。
引入
新建一个html文件，在里面输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
在标准的html文章里引入分两种，一种不需要引入jq文件，一种需要引入，需要引入必须先 引入jQuery文件，在引入bootstrap.css。
打开下载好的文件在node_modules文件夹里面找到dist文件夹，这里面才有我们需要的
css文件：bootstrap.css或bootstrap.min.css
js文件：bootstrap.js或bootstrap.min.js
住：：(min.css/min.js) 都是简化版：把一些不必要的空格，换行删掉，就是给机器看的文件)
引入哪个都行，在自己
官网下载jQuery
jQ3.6.0版本下载 jquery-3.6.0.js
- 在编辑器中引入 ，在 head 标签里面添加
<head>
<!-- jq优先级要高 先引入jq -->
<script src="../css/bootstrap-3.4.1-dist/js/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="文件路径/bootstrap.min.css">
<script src="文件路径/bootstrap.min.js"></script>
</head>
下面直接撸代码
敲代码
在 body 身体里面写入
默认头部导航栏
<!-- 头部导航 -->
<div class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
效果
在浏览器中打开的效果图，点击后弹一个下拉菜单
模板
在菜鸟教程里复制该区域
- 放到编辑器保存
- 浏览器打开即可。
结束
祝大家学习愉快，下期见
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。