BootStrap应用
bootstrap框架
Bootstrap，来自 Twitter，是一款受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
在html页面使用bootstrap,要先对文件引用.
bootstrap应用场景
控制大小,控制颜色,12栅格排版.bootstrap常用表单样式、表格样式.
BootStrap栅格layout
BootStrap将网页均分为12分（12个格子），响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
案例:
<!DOCTYPE html>
<html>
<head>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">2
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">3
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">4
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">5
</div>
<div class="col-md-1" style="border: 1px solid rgb(147, 45, 45); height:50px; background-color:yellow;">6
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">7
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">8
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">9
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">10
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">11
</div>
<div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">12
</div>
</div>
<div class="row">
<div class="col-md-4" style="height: 60; border: 1px solid green;background-color: violet;">dd</div>
<div class="col-md-4" style="height: 60; border: 1px solid green;background-color: violet;">dd</div>
<div class="col-md-4" style="height: 60; border: 1px solid green;background-color: violet;">dd</div>
</div>
<div class="row">
<div class="col-md-4"
style="height: 60; border: 1px solid rgb(13, 202, 101);background-color: rgb(56, 31, 169);">dd</div>
<div class="col-md-8" style="height: 60; border: 1px solid green;background-color: rgb(120, 16, 120);">dd
</div>
</div>
<div class="row">
<div class="col-md-6"
style="height: 60; border: 1px solid rgb(13, 202, 101);background-color: rgb(20, 179, 25);">dd</div>
<div class="col-md-6" style="height: 60; border: 1px solid green;background-color: rgb(16, 120, 26);">dd
</div>
</div>
<div class="row">
<div class="col-md-12"
style="height: 60; border: 1px solid rgb(15, 16, 15);background-color: rgb(13, 14, 14);">dd</div>
</div>
<!--左空 col-mad-offset-2 整行改变-->
<div class="row">
<div class="col-md-1 col-md-offset-2"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
</div>
<div class="col-md-1"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
</div>
</div>
<!--右浮动 col-mad-push-2 仅作用于单块栅格-->
<div class="row">
<div class="col-md-1 col-md-push-2"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
</div>
<div class="col-md-1"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
</div>
</div>
<!--左浮动 col-mad-pull-2 仅作用于单块栅格-->
<div class="row">
<div class="col-md-1 col-md-pull-2"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
</div>
<div class="col-md-1"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
</div>
</div>
<div class="row">
<div class="col-md-6"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(36, 167, 75);">1
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-4"
style="border:1px solid rgb(21, 20, 20); height:50px; background-color:rgb(156, 156, 147);">
</div>
<div class="col-md-4"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(156, 156, 147);">
</div>
<div class="col-md-4"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(156, 156, 147);">
</div>
</div>
</div>
</body>
</html>
使用栅格系统注意点
1 行必须放置在.container(固定宽度）或 .container-fluid （100% 宽度）中，以便获得适当的对齐alignment和内边距padding
2 使用行来创建列的水平组
3 内容应该放置在列内，唯有列可以是行的直接子元素
4 预定义的网格类，比如.row和.col-xs-x，可用于快速创建网格布局。
5 列通过内边距(padding)来创建列内容之间的间隙
| 栅格样式 | 描述 |
|---|---|
| col-lg-* | large 大型设备（大台式电脑，1200px 起 |
| col-md-* | middle 中型设备（台式电脑，992px 起） |
| col-sm-* | small 小型设备（平板电脑，768px 起） |
| col-xs-* | x-small 超小设备（手机，小于 768px） |
BootStrap常用样式与标签
常用样式
| 样式 | 描述 |
|---|---|
| .container | 让元素在容器中水平居中 |
| .col-md-4 | 占几个栅格 |
| .col-md-offset-4 | 左边空出几个栅格 |
| .col-md-push-8 | 向右浮动几个栅格 |
| col-md-pull-2 | 向左浮动几个栅格 |
案例
<!--左空 col-md-offset-2 整行改变-->
<div class="row">
<div class="col-md-1 col-md-offset-2"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
</div>
<div class="col-md-1"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
</div>
</div>
<!--右浮动 col-md-push-2 仅作用于单块栅格-->
<div class="row">
<div class="col-md-1 col-md-push-2"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
</div>
<div class="col-md-1"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
</div>
</div>
<!--左浮动 col-md-pull-2 仅作用于单块栅格-->
<div class="row">
<div class="col-md-1 col-md-pull-2"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
</div>
<div class="col-md-1"
style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
</div>
</div>
BootStrap常用组件
按钮组件
语法:
<input type=button class="btn" value="我是按钮">
提示：
btn是所有按钮的基本样式
class参数说明：
第一个参数：btn为按钮的基本样式
第二个参数为按钮的颜色样式
语境⾊彩：
btn-default 默认-⽩⾊
btn-success 绿⾊
btn-danger 红色
..
第三个参数为按钮的大小
按钮还有一种默认为整行的效果，称为块级按钮 btn-block
案例
<!DOCTYPE html>
<html>
<head>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button>纯生态按钮</button>
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-primary">primary标准</button>
<button class="btn btn-link">link</button>
</div>
</body>
</html>
面板组件
面板组件.panel提供基本的边界和内部，来包含内容
基本面板 && 带标题的面板
<!DOCTYPE html>
<html>
<head>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"><!--或者可以占用三个格 再右移动一格-->
<!--面板-->
<div class="panel panel-default">
<!--面板头-->
<div class="panel-heading">
花边新闻
</div>
<!--面板身体-->
<div class="panel-body">
严正谈了一打女朋友
</div>
</div>
</div>
<div class="col-md-4">
<!--面板-->
<div class="panel panel-default">
<!--面板头-->
<div class="panel-heading">
招聘信息
</div>
<!--面板身体-->
<div class="panel-body">
物业招聘保安,要求四肢健全
</div>
</div>
</div>
<div class="col-md-4">
<!--面板-->
<div class="panel panel-default">
<!--面板头-->
<div class="panel-heading">
便民提示
</div>
<!--面板身体-->
<div class="panel-body">
两室一厅,拎包入住,电话18189199
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">家居</a></li>
<li><a href="#">休闲</a></li>
<li><a href="https://www.360.com">安全</a></li>
</ul>
</div>
</body>
</html>
胶囊式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">美食</a></li>
</ul>
</div>
</body>
</html>
面包屑式导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="breadcrumb">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">美食</a></li>
</ul>
</div>
</body>
</html>
分页式导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="pagination">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</body>
</html>
翻页式导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</body>
</html>
表单
将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。
分类：
垂直表单 vertical（默认） class="form-vertical"
内联 [所有的表单元素显示在⼀⾏内] inline class="form-inline"
⽔平表单 horizontal [分两列，标签，元素] class="form-horizontal"
|-label与input元素放在⼀个div class为form-group以及control-label
|-表单元素放在<div class="col-md-x">内部，并在表单元素指定 class为form-control
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单の表单控件、文本框、文本域、下拉框</title>
<!-- 导入boostrap的css样式 -->
<link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--
表单样式：
1.文本框:
form-control
.input-lg .input-sm:控制表单大小
-->
<form>
<p>
用户名：<input/>
</p>
<p>
学历：<select>
<option>大专</option>
<option>大专</option>
<option>大专</option>
</select>
</p>
<p>
用户名：<textarea></textarea>
</p>
</form>
<form>
<div class="row">
<div class="col-md-3">
用户名：<input class="form-control"/>
用户名：<input class="form-control input-lg"/>
用户名：<input class="form-control input-sm"/>
</div>
</div>
<p>
学历：<select class="form-control">
<option>大专</option>
<option>大专</option>
<option>大专</option>
</select>
</p>
<p>
用户名：<textarea class="form-control"></textarea>
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单の单选框、复选框</title>
<!-- 导入boostrap的css样式 -->
<link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div>
<div>
兴趣爱好：
<div class="checkbox">
<input type="checkbox" />爱好1
</div>
<div class="checkbox">
<input type="checkbox" />爱好1
</div>
<div class="checkbox">
<input type="checkbox" />爱好1
</div>
</div>
</div>
<div>
<div>
兴趣爱好：
<label class="checkbox-inline">
<input type="checkbox" />爱好1
</label>
<label class="checkbox-inline">
<input type="checkbox" />爱好1
</label>
<label class="checkbox-inline">
<input type="checkbox" />爱好1
</label>
</div>
</div>
<div>
<div>
兴趣爱好：
<div class="radio">
<input type="radio" />爱好1
</div>
<div class="radio">
<input type="radio" />爱好1
</div>
<div class="radio">
<input type="radio" />爱好1
</div>
</div>
</div>
<div>
<div>
兴趣爱好：
<label class="radio-inline">
<input type="radio" />爱好1
</label>
<label class="radio-inline">
<input type="radio" />爱好1
</label>
<label class="radio-inline">
<input type="radio" />爱好1
</label>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单の表单布局</title>
<!-- 导入boostrap的css样式 -->
<link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
</head>
<body>
<div class="container">
<!--
表单布局样式：
.form-horizontal:设置垂直表单
.form-inline:设置内联表单，水平显示
-->
<form class="form-horizontal" action="#" method="post" role="form">
<div class="form-group">
<label for="uname" class="control-label col-md-2">用户名</label>
<div class="col-md-4">
<input name="username" id="uname" class="form-control" placeholder="请输入用户名" />
</div>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-md-2">密码</label>
<div class="col-md-4">
<input name="userpwd" type="password" id="upwd" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">性别</label>
<div class="col-md-4">
<label class="radio-inline">
<input name="sex" type="radio" class="radio" />男
</label>
<label class="radio-inline">
<input name="sex" type="radio" class="radio" />女
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">兴趣爱好</label>
<div class="col-md-4 checkbox-inline">
<label class="checkbox-inline">
<input name="hobby" type="checkbox" class="checkbox" />琴
</label>
<label class="checkbox-inline">
<input name="hobby" type="checkbox" class="checkbox" />棋
</label>
<label class="checkbox-inline">
<input name="hobby" type="checkbox" class="checkbox" />书
</label>
<label class="checkbox-inline">
<input name="hobby" type="checkbox" class="checkbox" />画
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">所在地</label>
<div class="col-md-4">
<select class="form-control">
<option>湖北</option>
<option>湖南</option>
<option>河北</option>
<option>河南</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-3">
<button class="btn btn-danger">保存</button>
</div>
</div>
</form>
<form class="form-inline" action="#" method="post" role="form">
<div class="form-group">
<label for="uname" class="control-label col-md-4">用户名</label>
<div class="col-md-6">
<input name="username" id="uname" class="form-control input-group-lg" placeholder="请输入用户名" />
</div>
</div>
<div class="form-group">
<label for="upwd" class="control-label col-md-3">密码</label>
<div class="col-md-6">
<input name="userpwd" type="password" id="upwd" class="form-control input-group-sm" />
</div>
</div>
</form>
</div>
</body>
</html>
如果你没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only class隐藏label标签。
案例:
<!DOCTYPE html>
<html>
<head>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-md-3">
<input type="text">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>严正</option>
<option>lily</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3">
<textarea class="form-control"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
