Bootstrap&Axios学习
Bootstrap：
1. 引入 Bootstrap
通过 CDN 引入:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>这些链接引入了 Bootstrap 的 CSS 和 JavaScript 文件，以及 jQuery 和 Popper.js，它们是 Bootstrap 的 JavaScript 组件所需的依赖。
2. 网格系统（常用）
基本布局:
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>效果: 创建一个三列布局，每列在中等及以上屏幕上占据 1/3 的宽度。
container 是一个固定宽度的容器，row 是行，col-md-4 表示在中等及以上屏幕上每列占据 4/12 的宽度。
3. 常用组件
按钮:
<button type="button" class="btn btn-primary">Primary Button</button>效果: 一个蓝色的按钮，带有 Bootstrap 的默认样式。
btn 是按钮的基础类，btn-primary 是一个修饰类，应用了蓝色的主题样式。
导航栏：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>效果: 一个响应式导航栏，包含品牌名称和导航链接。
navbar 是导航栏的基础类，navbar-expand-lg 表示在大屏幕上展开，navbar-light 和 bg-light 设置了导航栏的颜色。
卡片列表：
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>效果: 一个带有图片、标题、文本和按钮的卡片。
card 是卡片的基础类，card-img-top 用于图片，card-body 包含卡片的内容。
4. 表单
基本表单:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>效果: 一个简单的表单，包含电子邮件和密码输入框，以及一个提交按钮。
解释: form-group 用于包裹每个表单控件，form-control 应用于输入框以提供一致的样式。
5. 模态框
模态框示例:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>效果: 点击按钮后弹出一个模态框，模态框包含标题、内容和操作按钮。
modal 是模态框的基础类，modal-dialog 和 modal-content 用于定义模态框的结构，data-toggle="modal" 和 data-target="#exampleModal" 用于触发模态框的显示。
6. 工具提示（Tooltip）
工具提示示例:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Hover me to see tooltip
</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>效果: 当鼠标悬停在按钮上时，会在按钮上方显示一个工具提示。
data-toggle="tooltip" 和 title 属性用于定义工具提示的内容和位置。JavaScript 部分初始化了工具提示功能。
7. 弹出框（Popover）
弹出框示例:
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>效果: 点击按钮后，会显示一个弹出框，包含标题和内容。
data-toggle="popover"、title 和 data-content 属性用于定义弹出框的内容。JavaScript 部分初始化了弹出框功能。
8. 滚动监听（Scrollspy）
滚动监听示例:
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="section1">Section 1</h4>
<p>...</p>
<h4 id="section2">Section 2</h4>
<p>...</p>
</div>效果: 当用户滚动页面时，导航栏会根据当前滚动位置自动更新激活状态。
data-spy="scroll" 和 data-target 属性用于启用滚动监听功能，自动更新导航栏的激活状态。
9. 进度条（Progress）
进度条示例:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>效果: 显示一个进度条，表示 75% 的完成度。
progress 是进度条的容器，progress-bar 是实际的进度条，style="width: 75%;" 设置了进度条的宽度。
10. 警告框（Alerts）
警告框示例:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is a warning alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>效果: 显示一个可关闭的警告框，带有警告信息。
alert 是警告框的基础类，alert-warning 设置了警告的颜色，alert-dismissible 和 close 按钮允许用户关闭警告框。
Axios：
1.请求中带请求参数（post请求为例）：
axios.post('https://api.example.com/data', {
name: 'John Doe',
age: 30
})
.then(response => {
console.log('Data posted successfully:', response.data);
})
.catch(error => {
console.error('Error posting data:', error);
});2.设置请求头：
axios.get('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});使用 headers 选项设置自定义请求头，例如用于身份验证的 Authorization 头。
3.取消请求：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('https://api.example.com/data', {
cancelToken: source.token
})
.then(response => {
console.log(response.data);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
console.error('Error fetching data:', thrown);
}
});
// 取消请求
source.cancel('Operation canceled by the user.');使用 CancelToken 创建一个取消令牌，并在请求中传递。可以通过调用 source.cancel 方法取消请求。
4.all方法：
axios.all([
axios.get('https://api.example.com/data1'),
axios.get('https://api.example.com/data2')
])
.then(axios.spread((response1, response2) => {
console.log('Data1:', response1.data);
console.log('Data2:', response2.data);
}))
.catch(error => {
console.error('Error fetching data:', error);
});使用 axios.all 方法同时发送多个请求，axios.spread 方法用于分别处理每个请求的响应。