BootStrap
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top aaa" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
1. bootstrap的介绍
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单
用于开发响应式布局、移动设备优先的WEB项目
2. bootstrap的安装
3. boostrap的使用布局(栅格系统的初步体验)
3.1 布局(栅格系统)
Bootstrap提供了套响应式、 移动设备优先的流式栅格系统,
随着屏幕或视口(viewport) 尺寸的增加,系统会自动分为最多12列(12份)
<link rel="stylesheet" href="E:\boostrap\bootstrap-5.1.3-dist\css\bootstrap.min.css">
<style>
.box{
width: 1500px;
font-size: 12px;
line-height: 50px;
}
.row > div,.col-md-1{
border: 1px solid red;
height: 50px;
text-align: center;
line-height:50px ;
}
</style>
<div class="container box">
<div class="row">
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
<dic class="col-md-1">1</dic>
</div>
<div class="row">
<div class="col-md-8">8</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<div class="col-md-6">8</div>
<div class="col-md-6">4</div>
</div>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
</div>
3.2 栅格系统的详细_固定宽度,百分比宽度,堆叠到水平
设定的只能适应一种屏幕大小
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
.box {
width: 1500px;
font-size: 12px;
line-height: 50px;
}
.row>div {
border: 1px solid red;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
4. 表格
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.container{
font-size: 12px;
line-height: 50px;
}
</style>
<div class="container">
<table class="table table-striped table-bordered">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>12</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>12</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>12</td>
</tr>
</table>
</div>
5. 表单
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.container{
width: 1000px;
border-radius: 10px;
border: 1px solid gray;
}
</style>
<div class="container">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
6. 按钮
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
width: 1000px;
border-radius: 10px;
border: 1px solid gray;
}
</style>
<div class="container">
<form>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
</form>
</div>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
width: 1000px;
border-radius: 10px;
border: 1px solid gray;
}
</style>
<div class="container">
<form class="form-horizontal">
<button class="btn btn-danger btn-lg active">危险</button>
<button class="btn btn-warning btn-sm">警告</button>
<button class="btn btn-success btn-xs" disabled>警告</button>
</form>
</div>
8. 组件_下拉菜单
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
9. 组件_输入框组
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
width: 500px;
border-radius: 10px;
border: 1px solid gray;
font-size: 12px;
margin: 50px auto;
}
</style>
<div class="container">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>
</div>
10. 按钮组
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
width: 500px;
border-radius: 10px;
border: 1px solid gray;
font-size: 12px;
margin: 50px auto;
}
</style>
<div class="container">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div>
</div>
11. javasc插件_模态窗口
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>