前端之Bootstrip
前端之Bootstrip
1. Bootstrip介绍
Bootstrap是HTML、CSS和JS框架，用于开发响应式布、移动设备优先的WEB项目。
Bootstrap是依赖jQuery所以要把jQuery导入
导入
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
1.1 布局容器
//两边有留白布局
<div class="container"></div>
//两边没有留白布局
<div class="container-fluid"></div>
1.2 栅格系统
<div class='row'></div>
// 写一个row就是将所在的区域划分成12份
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.c1 {
height: 100px;
background-color: orange;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
//平均分两份
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
//分三份2-8-2
<div class="col-md-2 c1"></div>
<div class="col-md-8 c1"></div>
<div class="col-md-2 c1"></div>
//分两份3-9
<div class="col-md-3 c1"></div>
<div class="col-md-9 c1"></div>
</div>
</div>
</body>
</html>
总结:
写一个row就是将所在的区域划分成12份
col-md-N 占几份
1.2.1 栅格参数
- 超小屏幕:
.col-xs- - 小屏幕:
.col-sm- - 中等屏幕:
.col-md- - 大屏幕 :
.col-lg-
如果要兼容全部的屏幕把这四个参数都写上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.c1 {
height: 100px;
background-color: orange;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-6 col-xm-6 col-lg-6 c1"></div>
<div class="col-md-6 col-xs-6 col-xm-6 col-lg-6 c1"></div>
<div class="col-md-2 col-xs-2 col-xm-2 col-lg-2 c1"></div>
<div class="col-md-8 col-xs-8 col-xm-8 col-lg-8 c1"></div>
<div class="col-md-2 col-xs-2 col-xm-2 col-lg-2 c1"></div>
<div class="col-md-3 col-xs-3 col-xm-3 col-lg-3 c1"></div>
<div class="col-md-9 col-xs-9 col-xm-9 col-lg-9 c1"></div>
</div>
</div>
</body>
</html>
如果用到了8份想让它居中
<div class="col-md-8 col-xs-8 c1 col-md-offset-2"></div>
col-md-offset-2 从左向右移两份
1.3 排版
1.4 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr class="success">
<th>ID</th>
<th>username</th>
<th>password</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>1</td>
<td>Hans</td>
<td>123</td>
<td>read</td>
</tr>
<tr class="danger">
<td>1</td>
<td>Hans</td>
<td>123</td>
<td>read</td>
</tr>
<tr class="info">
<td>1</td>
<td>Hans</td>
<td>123</td>
<td>read</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
1.5 表单
为了好看可以给表单加个 class="form-control"
1.6 按钮
1.7 图片
1.8 图标
更多图标看组件里https://v3.bootcss.com/components/#glyphicons
和Font Awesome中文网:http://www.fontawesome.com.cn/
使用Font Awesome图标需要下载和导入:
1.下载解压：http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip
2. 复制 font-awesome 目录到你的项目中
3. 在<head>处加载font-awesome.min.css如下。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
查看 案例 以获取 Font Awesome 的使用方法。
具体使用方法请看官网上面的案例。
Font Awesome完全兼容bootstrap
1.9 组件
弹窗：
使用SweetAlert for Bootstrap
1. 下载地址：https://github.com/lipis/bootstrap-sweetalert/releases
2.使用方法：
只需要导入dist里面的:sweetalert.min.js和sweetalert.css
弹窗:
swal("hello")
swal("hello","hi")
swal("hello","hi",success)
