day84-bootstrap
1.bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
响应式，页面拉大拉小自由变化。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
响应式，页面拉大拉小自由变化。
2.项目准备
lib bootstrap文件夹 jQuery.min.js
css 放css文件 index.css
js 放js文件 index.js
imgs 放图片
fonts 放字体图标
source
html
lib bootstrap文件夹 jQuery.min.js
css 放css文件 index.css
js 放js文件 index.js
imgs 放图片
fonts 放字体图标
source
html
3.字体图标
不失真
span class
style font-size改大小 color改颜色
不失真
span class
style font-size改大小 color改颜色
4.按钮
<button class="btn btn-primary" style="width:100px;height:50px;">点我</button>
primary蓝色 success绿色 info浅蓝色 warning浅橙色 danger红色
width改宽度 height改高度
<button class="btn btn-primary" style="width:100px;height:50px;">点我</button>
primary蓝色 success绿色 info浅蓝色 warning浅橙色 danger红色
width改宽度 height改高度
5.bootstrap基础页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 使用最新版本IE渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 为了确保移动设备的触屏缩放，添加视口 viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>项目1</title>
<!-- 引入bootstrap样式文件 -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!-- 自己写的样式文件,必须在bootstrap样式文件的后面-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 使用最新版本IE渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 为了确保移动设备的触屏缩放，添加视口 viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>项目1</title>
<!-- 引入bootstrap样式文件 -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!-- 自己写的样式文件,必须在bootstrap样式文件的后面-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，并且代码从上往下执行，所以必须放在前边) -->
<script src="lib/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件-->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 自己写的js文件-->
<script src="js/index.js"></script>
</body>
</html>
<script src="lib/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件-->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 自己写的js文件-->
<script src="js/index.js"></script>
</body>
</html>
6.页面标题的图标：favicon.ico
是ico格式，可以使用转换格式的网站制作出来。
<head>内输入link:favicon，按下Tab生成link标签，引入图标。
是ico格式，可以使用转换格式的网站制作出来。
<head>内输入link:favicon，按下Tab生成link标签，引入图标。
