前端之Bootstrap框架
前端框架简介
bootstrap框架
]内部提供了很多漂亮的标签样式和功能,前端工程师只需要拷贝使用即可
bootstrap版本
推荐使用v3版本
基本使用
必须先导入后使用
导入的两种方法
- 本地导入
- cdn导入
bootcdn
bootstrap需要使用jQuery来实现动态效果
文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
框架属性
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
<style>
.c1 {
border: solid blue 8px;
text-align: center;
}
.c2 {
margin-top: 200px;
}
</style>
<body>
<div class="container c1 c2">001</div>
<div class="container-fluid c1">002</div>
<div class="container c1">003</div>
</body>
栅格系统
栅格参数可以做到响应式布局xs sm md lg
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份
如果一行十二份用不完可以调整位置
col-md-offset-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script>src = "bootstrap-3.3.7-dist/js/bootstrap.min.js"</script>
<script>src = "jquery-3.6.0.js"</script>
</head>
<style>
.c1 {
height: 100px;
border: solid blue 8px;
margin-top: 200px;
}
.c2 {
height: 90px;
border: black solid 4px;
}
</style>
<body>
<div class="container c1">
<div class="row">
<div class="col-md-4 c2"></div>
<div class="col-md-8 c2" ></div>
</div>
</div>
<div class="container c1">
<div class="row">
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2" ></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2" ></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2" ></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2" ></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2" ></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2" ></div>
</div>
</div>
</body>
</html>
表格样式
表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script>src = "bootstrap-3.3.7-dist/js/bootstrap.min.js"</script>
<script>src = "jquery-3.6.0.js"</script>
</head>
<style>
.c1 {
margin-top: 200px;
}
</style>
<body>
<div class="container c1">
<table class="table table-hover table-bordered table-striped">
<tread>
<tr class="info">
<th>姓名</th>
<th>年龄</th>
</tr>
</tread>
<tbody>
<tr class="success">
<td >trump</td>
<td>76</td>
</tr>
<tr>
<td>biden</td>
<td>79</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
注意：针对radio和checkbox不能加
按钮与图片
按钮样式
class = 'btn'
按钮颜色
<a href="" class="btn btn-info">按钮颜色</a>
<a href="" class="btn btn-primary">按钮颜色</a>
<a href="" class="btn btn-success">按钮颜色</a>
<a href="" class="btn btn-danger">按钮颜色</a>
<a href="" class="btn btn-warning">按钮颜色</a>
按钮尺寸
<a href="" class="btn btn-success btn-sm">按钮尺寸</a>
<a href="" class="btn btn-success btn-lg">按钮尺寸</a>
<a href="" class="btn btn-success btn-block">按钮尺寸</a>
图标样式
<span class="glyphicon glyphicon-user"></span>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？