哈喽,欢迎观看我的第一篇文档
个人简介
新人一枚,前端工作者,乐于分享,希望能跟大家一起学习一起深造。
有其他分享的内容或不懂得可以私信我。
今天我们学习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>
效果
在浏览器中打开的效果图,点击后弹一个下拉菜单
模板
在菜鸟教程里复制该区域
- 放到编辑器保存
- 浏览器打开即可。
结束
祝大家学习愉快,下期见