虽然个人不是很喜欢用BootStrap框架,但还是要会用的!
使用bootstrap先去官网下载:bootstrap下载官网
这里下载第一个就行了
然后下载jQuery.js,因为bootstrap用到了jquery,jQuery下载官网,
一般我们学习用普通版,min版是去了空格缩进,开发一般用min版,因为比较小,点进去发现直接是源码,不用复制,这时候按CTRL+S保存即可.
解压之后只需三步:
1.导入bootstrap.css
2.导入jQuery.js
3.导入bootstrap.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- bootstrap.css中集成了normalize.css，对浏览器样式进行了初始化，例如消除body8px的外间距，同时也抹平了浏览器之间的样式差异 -->
<!-- bootstrap对大部分html元素都进行了样式重置,让这些元素更加美观 -->
<!-- 使用bootstrap，需要导入3个文件 -->
<!-- 导入bootstrap.css -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!-- bootstarp.js依赖于jQuery.js，所以必须先导入jQuery，后导入bootstrap.js -->
<!-- 2，导入jQuery.js -->
<script src="jquery.js"></script>
<!-- 3，导入bootstrap.js -->
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>最后附上bootstrap的api,可在这里查看bootstrap里各个类，组件的用法bootstrap框架api
上面导航条其实都是api