3.Bootstrap详解
⽂章⽬录
Bootstrap简单⼊门
1.bootstrap简介
Bootstrap如果有⼩伙伴想了解更多的使⽤可以去官⽅api进⾏了解呢
1.1 什么是Bootstrap？
Bootstrap来⾃ Twitter，是⽬前最受欢迎的响应式前端框架。
Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。
1.2 为什么使⽤ Bootstrap？
移动设备优先：⾃ Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。
不是简单的增加⼀些可选的针对移动设备的样式，⽽是直接融合进了框架的内核中。
也就是说，针对移动设备的样式融合进了框架的每个⾓落，⽽不是增加⼀个额外的⽂件。
浏览器⽀持：所有的主流浏览器都⽀持 Bootstrap。
容易上⼿：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够⾃适应于台式机、平板电脑和⼿机。
响应式设计
它为开发⼈员创建接⼝提供了⼀个简洁统⼀的解决⽅案。
它包含了功能强⼤的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
1.3 下载与使⽤
下载好的，压缩包解压出来。就得到了bootstrap的资源⽂件了。
分别是css、js、font字体，全部放在项⽬的根⽬录即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<title>拉勾有我-必须⽕</title>
</head>
<body >
<h1>Hello, Bootstrap!</h1>
<!-- 注意：这两个按钮的class样式是Bootstrap定义的 -->
<button class="btn btn-primary">学习充电</button>
<button class="btn btn-success">极速⼊职</button>
</body>
</html>
2.Bootstrap的使⽤
2.1 表格
和之前的表格相⽐，标签更丰富更加语义化，效果更佳美观
2.1.1 丰富的标签
<table> 为表格添加基础样式
<thead> 表格标题⾏的容器元素（<tr>）
<tbody> 表格主体中的表格⾏的容器元素（<tr>）
<tr> 表格⾏
<td> 默认的表格单元格。
<th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使⽤。
<caption> 关于表格存储内容的描述或总结。
2.1.2 好看的类样式
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不⽀持) ，隔⾏变⾊.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任⼀⾏启⽤⿏标悬停状态，⿏标悬停⾼亮突出显⽰.table-condensed 让表格更加紧凑
2.1.3 情景⾊类样式
适合应⽤在<th>、<tr>，<td>
.active 激活效果（悬停颜⾊）
.success 表⽰成功或积极的动作
.info 表⽰普通的提⽰信息或动作
.warning 表⽰警告或需要⽤户注意
.danger 表⽰危险或潜在的带来的负⾯影响的动作
2.1.4 响应式表格
⼩于768px，出现边框
表格的⽗元素设置响应式，⼩于768px，出现边框
<table class="table table-responsive">
<caption>经营产品⼤全</caption>
<thead>
<tr>
<th>产品</th>
<th>付款⽇期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>产品1</td>
<td>2020-1-1</td>
<td>待发货</td>
</tr>
<tr class="active">
<td>产品2</td>
<td>2020-1-2</td>
<td>已发货</td>
</tr>
<tr class="success">
<td>产品3</td>
<td>2020-1-3</td>
<td>未付款</td>
</tr>
<tr class="warning">
<td>产品4</td>
<td>2020-1-4</td>
<td>已退货</td>
</tr>
<tr class="danger">
<td>产品5</td>
<td>2020-1-5</td>
<td>已退款</td>
</tr>
</tbody>
</table>
2.2 表单
2.2.1 表单布局
2.2.1.1 默认布局
<body >
<form>
<div class="form-group">
<label>邮箱</label>
<input type="email" class="form-control" placeholder="请输⼊邮箱">
</div>
<div class="form-group">
为什么使用bootstrap?
<label>密码</label>
<input type="passowd" class="form-control" placeholder="请输⼊密码"> </div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
2.2.1.2 内联布局
让所有表单元素居于⼀⾏
注意：当⼩于768px时，会⾃动还原成移动端样式.
注意
<form class="form-inline">
2.2.2 表单控件
2.2.2.1 输⼊框
<form>
<div class="form-group">
<label for="">输⼊框</label>
<input type="text" class="form-control" placeholder="请输⼊⽂本..."> </div>
</form>
2.2.2.2 ⽂本框
<div class="form-group">
<label for="">⽂本框</label>
<textarea class="form-control" cols="30" rows="5"></textarea>
</div>
2.2.2.3 复选框
checkbox 默认
checkbox-inline 内联
<div class="checkbox">
<label>
<input type="checkbox">抽烟
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">喝酒
</label>
</div>
<hr>
<div class="checkbox-inline">
<label>
<input type="checkbox">洗澡
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox">烫头
</label>
</div>
2.2.2.4 复选按钮
<form>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox">⾳乐
</label>
<label class="btn btn-primary">
<input type="checkbox">体育
</label>
<label class="btn btn-primary">
<input type="checkbox">美术
</label>
<label class="btn btn-primary">
<input type="checkbox">电脑
</label>
</div>
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
2.2.2.5 单选框
<label class="radio">
<input type="radio" name="sex">男
</label>
<label class="radio">
<input type="radio" name="sex">⼥
</label>
<hr>
<label class="radio-inline">
<input type="radio" name="gender">耕
</label>
<label class="radio-inline">
<input type="radio" name="gender">织
</label>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
2.2.2.6 单选按钮
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary">
<input type="radio" name="gender">男
</label>
<label class="btn btn-primary">
<input type="radio" name="gender">⼥
</label>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script> 2.3 按钮

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。