day01_前端框架之Bootstrap的应用
本课目标
- 能够完成 Bootstrap 环境搭建
- 能够理解 Bootstrap 的栅格布局
- 能够根据 Bootstrap 相关文档使用Bootstrap组件
- 能够根据 Bootstrap 重构主页和表单页
第1章 bootstrap简介
1.1 什么是bootstrap
-
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
- Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。
-
Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。
-
作用：
-
Bootstrap 使得 Web 开发更加快捷，高效。
-
BootStrap支持响应式开发，解决了移动互联网前端开发问题。
-
Bootstrap英文官网: Bootstrap · The most popular HTML, CSS, and JS library in the world.
-
Bootstrap4 中文文档参考: 简介 · Bootstrap
-
1.2 什么是响应式布局
-
响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个 展示版本。此概念专为解决移动互联网浏览而诞生的。
-
响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开 发维护成本，并且能带给用户更好的体验性。
-
响应式布局会增加程序员负担以及代码量
-
未使用响应式开发：
第2章 bootstrap环境搭建
2.1 下载bootstrap
第3章 bootstrap页面布局
3.1 基础入门
-
Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在
.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件 ，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。 -
Bootstrap原生带三种container宽度规范：
-
.container, 居中，适配不同的断的max-width尺寸。 -
.container-fluid, 全屏，适配屏幕的width: 100%尺寸。
-
| 超小屏幕 <576px | 小屏幕 ≥576px | 中等屏幕 ≥768px | 大屏幕 ≥992px | 超大屏幕 ≥1200px | |
|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
-
课堂案例：01.Bootstrap远程样式引入.html
html
<!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">
<title>Bootstrap入门</title>
<!--
要使用bootstrap：只需要通过link和scrip标签去引入样式和js脚本就可以了
通过远程连接的方式引入样式，这种方式的前期条件就是需要链接互联网，因为样式是通过
远程地址访问的
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
hello Bootstrap入门
</body>
</html>-
课堂案例：02.Boostrap本地样式引入.html
html
<!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">
<title>Bootstrap通过本地样式引入</title>
<!--
需要引入如下样式:
引入js文件的时候，需要注意先后顺序
总共：需要引入4个文件，一个样式，3个脚本
-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<p class="text-warning"> hello Bootstrap</p>
<p> hello Bootstrap</p>
</body>
</html>-
课堂案例：03.container页面布局规范.html
html
<!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">
<title>Contain 容器</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<!--
class="container":可以根据浏览器的大小进行自适应和居中
ps：会设置padding属性为15
-->
<div class="container">
<h2>hello 酷狗</h2>
</div>
<div class="container-fluid">
<h2>哈哈哈哈</h2>
</div>
</body>
</html>3.1 栅格系统
-
为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。 栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。
-
栅格特点 "行（row）"包含在 .container或 container-fluid（100% 宽度）中行使用的样式
-
课堂案例：04.Bootstrap栅格系统1.html
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
div {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
<div class="col-1">4</div>
<div class="col-1">5</div>
<div class="col-1">6</div>
<div class="col-1">7</div>
<div class="col-1">8</div>
<div class="col-1">9</div>
<div class="col-1">10</div>
<div class="col-1">11</div>
<div class="col-1">12</div>
</div>
<div class="row">
<div class="col-5">5</div>
<div class="col-5">5</div>
<div class="col-2">2</div>
</div>
<!--
第一行：4个格子
第二行：8个格子
第三行：6个格子
多出来的6个格子跑到第二行去了
-->
<div class="row">
<div class="col-4">4</div>
<div class="col-9">8</div>
<div class="col-2">6</div>
</div>
</div>
<span>-----------</span>
<div class="container">
<!--
嵌套布局
-->
<div class="row">
<div class="col-4">4</div>
<div class="col-8">
<!-- 对于8个格子，还可以划分为12份 -->
<div class="row">
<div class="col-3">3</div>
<div class="col-9">9</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-4">4</div>
<div class="col-8">
<div class="row">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
<div class="col-1">4</div>
<div class="col-1">5</div>
<div class="col-1">6</div>
<div class="col-1">7</div>
<div class="col-1">8</div>
<div class="col-1">9</div>
<div class="col-1">10</div>
<div class="col-1">11</div>
<div class="col-1">12</div>
</div>
</div>
</div>
</div>
</body>
</html>-
课堂案例：05.Bootstrap栅格系统2.html
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
div{
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
<div class="col-1">4</div>
<div class="col-1">5</div>
<div class="col-1">6</div>
<div class="col-1">7</div>
<div class="col-1">8</div>
<div class="col-1">9</div>
<div class="col-1">10</div>
<div class="col-1">11</div>
<div class="col-1">12</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-4">4</div>
<div class="col-sm-2">2</div>
</div>
</div>
<!--
根据不同的屏幕大小适配不同的宽度，最终显示不同的样式
-->
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-3">1</div>
<div class="col-sm-11 col-md-9">11</div>
</div>
</div>
</body>
</html>-
课堂案例：06.Bootstrap栅格系统3.html
html
<!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">
<title>等宽布局</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
div{
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">8</div>
<div class="col-4">4</div>
</div>
<!--
等宽多行：创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行
-->
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
</body>
</html>第4章 bootstrap公共样式&内容
-
课堂案例：07.Bootstrap的内容.html
html
<!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">
<title>内容</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
/* img{
width: 900px;
height: 900px;
} */
</style>
</head>
<body>
<!--
内容：作为了解就可以了
-->
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<ul class="list-inline">
<li class="list-inline-item">列表之一</li>
<li class="list-inline-item">列表之二</li>
<li class="list-inline-item">列表之三</li>
</ul>
<img src="img/1.jpg" class="img-fluid" alt="Responsive image">
<hr>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
</html>-
课堂案例：08.Bootstrap的公共样式.html
html
<!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">
<title>公共样式</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<span class="border">1111</span>
<span class="border-top">2222</span>
<span class="border-right">3333</span>
<span class="border-bottom">44444</span>
<span class="border-left">55555</span>
<span class="border border-primary">111111</span>
<span class="border border-secondary">1111111</span>
<span class="border border-success">1111111</span>
<span class="border border-danger">11111111</span>
<span class="border border-warning">11111111</span>
<span class="border border-info">11111111</span>
<span class="border border-light">1111111</span>
<span class="border border-dark">1111111111</span>
<span class="border border-white">1111111111</span>
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<hr>
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
<hr>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
</body>
</html>第5章 bootstrap常用组件
5.1 按钮的样式
-
课堂案例：09.按钮组件.html
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<hr>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
<!--
启用状态：
.btn样式定义的按钮，默认就是启用状态（背景较深、边框较暗、带内阴影），
如果你一定要使按钮固定为启用状态、不需要点击反馈，可以增加.active样式，
并包括aria-pressed="true" 属性，则状态显示为启用状态。
-->
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
<hr>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
</body>
</html>5.2 轮播图
-
课堂案例：10.轮播图.html
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<!-- 可以根据具体的轮播图进行选择 -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<!--
轮播的图片
active:在轮播中最先显示的图片
-->
<div class="carousel-inner">
<div class="carousel-item " data-interval='1500'>
<img src="img/1.jpg" width="500px" height="500px" class="d-block w-100" alt="...">
</div>
<div class="carousel-item " data-interval='1500'>
<img src="img/2.jpg" width="500px" height="500px" class="d-block w-100" alt="...">
</div>
<div class="carousel-item active" data-interval='1500'>
<img src="img/3.jpg" width="500px" height="500px" class="d-block w-100" alt="...">
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>5.3 导航条
-
课堂案例：11.导航栏.html
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<!--
屏幕尺寸较小的时候，会把导航项收缩到这个折叠菜单中
-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!--
active：被默认选中
-->
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!--
dropdown：下拉菜单
dropdown-menu：用于下拉菜单项
-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!--
disable：是超链接失去点击效果
-->
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!--
-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>5.4 表单样式（最重要的）
-
课堂案例：12.表单组件1.html
html
<!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">
<title>12.表单组件1.html</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Bootstrap提供了一些表单控件样式、布局选项，以及用来创建广泛多样化的的表单的自定义组件，以下是示例和使用指南。 -->
<div class="container">
<form action="">
<!--
文本框定义
外层的div样式 class="form-group"
输入项样式 class="form-control"
placeholder：HTML5规范定义的属性，可以在文本框中显示提示信息
small：给提示信息的
-->
<div class="form-group">
<label for="exampleInputUserName">用户名</label>
<input type="text" class="form-control" id="exampleInputUserName" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="exampleInputPwd">密码</label>
<input type="text" class="form-control" id="exampleInputPwd" placeholder="请输入用户名">
</div>
<hr>
<!--
radio:单选框样式
外层的div样式 class="form-check"
输入项样式 class="form-check-input"
disabled：表示不可选状态
checked：默认选中
-->
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"
checked>
<label class="form-check-label" for="exampleRadios1">
男
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
女
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3"
disabled>
<label class="form-check-label" for="exampleRadios3">
其他
</label>
</div>
<hr>
<!--
checkbox：复选框
外层的div样式 class="form-check"
输入项样式 class="form-check-input"
disabled：表示不可选状态
checked：默认选中
-->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
打篮球
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
排球
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" checked>
<label class="form-check-label" for="defaultCheck2">
乒乓球
</label>
</div>
<hr>
<!--
下拉菜单：
外层的div样式： class="form-group"
select的样式： class="custom-select " 会显示上下箭头
select的样式： class="form-control " 会显示正常的箭头
selected： 默认选中
-->
<div class="form-group">
<select class="custom-select ">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-control ">
<option selected>请选择</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<!--
文本域
class="form-group"
-->
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<hr>
<input type="file" name="filename">
<hr>
<!--
文件上传项
-->
<div class="form-group">
<label for="exampleFormControlFile1">上传</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
<hr>
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">请选择文件</label>
</div>
<hr>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>-
课堂案例：13.表单组件2.html
html
<!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">
<title>表单校验</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--
表单校验：当用户填写完输入向后，需要判断用户输入的内容是否满足要求
required：代表必填项，如果不填，提交会有提示
.is-valid ：通过校验规则
.is-invalid:没有通过校验规则
valid-feedback :通过校验规则后的提示信息
invalid-feedback：没有通过校验规则的提示信息
-->
<form >
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">用户名</label>
<input type="text" class="form-control is-valid" id="validationCustom01" placeholder="请输入用户名" value=""required>
<div class="valid-feedback">
满足要求
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">密码</label>
<input type="password" class="form-control is-invalid" id="validationCustom02" placeholder="Last name" value="Otto"
required>
<div class="invalid-feedback">
密码输入不符合要求
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username"
aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</body>
</html>第6章 bootstrap综合案例
-
课堂案例：14.注册页面开发.html
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.text {
font-size: 30px;
text-align: center;
}
body {
background-image: url(img/bg.jpg)
}
.form {
width: 550px;
height: 400px;
border: 1px solid rgb(145, 14, 14);
background-color: rgba(221, 199, 126, 0.88);
margin: 120px auto;
}
.center_btn {
text-align: center;
}
</style>
<script>
/*
需求1：判断两次输入的密码是否相同
需求2：判断邮箱格式是否满足规范
卡住了
需求3：判断用户注册的手机号是否是未注册过的
*/
function checkForm() {
// console.log("提交表单");
//判断需求1和需求2都满足的时候才提交
return checkPassword()&&checkEmail();
}
/*
判断两次输入的密码是否相同
*/
function checkPassword() {
const pwdObj1 = document.querySelector("#password")
const pwdObj2 = document.querySelector("#rePassword")
// console.log(pwdObj1.value)
// console.log(pwdObj2.value)
//两次输入的密码一样
if(pwdObj1.value==pwdObj2.value){
return true;
}else{
//两次输入的密码不一样,加入提示
pwdObj2.setAttribute("class","form-control is-invalid")
// pwdObj2.setAttribute("class","is-invalid")
return false;
}
}
const rg = /^[\w]{3,6}@qq.com$/
function checkEmail(){
// const emailObj = document.querySelector("#emailText")
// console.log(emailObj.value)
/*
如何判断邮箱地址是否满足条件？
111@qq.com
具体要求：
数字和字母开始 +@ +字母 + . + .com结尾
这个需要判断的字符串是变化的，不是固定的，
需要使用正则表达式
*/
console.log(emailObj.value)
emailObj.addEventListener("blur",function(){
console.log("hh")
})
// if(rg.test(emailObj.value)){
// return true;
// }else{
// return false;
// }
}
/*
判断用户注册的手机号是否是未注册过的
给文本框绑定以恶搞blur事件
*/
window.addEventListener("load",function(){
const phonenumberObj = document.querySelector("#phonenumber1")
phonenumberObj.addEventListener("blur",function(){
/*
判断1：手机号的长度是否是11位
*/
if(phonenumberObj.value.length != 11){
console.log("手机号不满足要求")
phonenumberObj.setAttribute("class","form-control is-invalid")
}else{
phonenumberObj.setAttribute("class","form-control is-valid")
}
/*
判断2： 手机号是否满足规范要求
是否都是和整数 ：可以遍历字符串，判断每一个整数是否是0~9的区间，并且第一位不是0，是1
*/
/*
判断3： 需要请求后端服务器，判断这个手机号在后台的数据库是否存在，然后服务端再把结果发回来
*/
})
const emailObj = document.querySelector("#emailText")
emailObj.addEventListener("blur",function(){
// console.log("haha")
if(rg.test(emailObj.value)){
console.log("格式正确")
emailObj.setAttribute("class","form-control is-valid")
}else {
console.log("格式错误")
emailObj.setAttribute("class","form-control is-invalid")
}
})
})
</script>
</head>
<body>
<!--
onsubit:提交form表单，如果onsubmit指定的函数返回true就会正常提交，返回false就不会提交
-->
<!-- <form class="form" onsubmit="return checkForm();"> -->
<form class="form" >
<!--
offset-sm-2:向右偏移两个格子
-->
<div class="alert alert-primary text">新用户注册</div>
<div class="form-group row">
<label for="username" class="col-sm-2 offset-sm-2 col-form-label">手机号码</label>
<div class="col-sm-6">
<input name="username" type="text" class="form-control" id="phonenumber1" placeholder="请输入手机号" required>
<small id="passwordHelpInline" class="form-text text-muted">
手机号必须是未注册过的.
</small>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 offset-sm-2 col-form-label">密码</label>
<div class="col-sm-6">
<input name="pwd" type="password" class="form-control" id="password" placeholder="请输入密码" required>
<small id="passwordHelpInline" class="form-text text-muted">
密码必须是6-16位
</small>
</div>
</div>
<div class="form-group row">
<label for="rePassword" class="col-sm-2 offset-sm-2 col-form-label">确认密码</label>
<div class="col-sm-6">
<input name="rePwd" type="password" class="form-control" id="rePassword" placeholder="请输入重复密码" required>
<div class="invalid-feedback">
两次密码不一致
</div>
</div>
</div>
<div class="form-group row">
<label for="emailText" class="col-sm-2 offset-sm-2 col-form-label">邮箱</label>
<div class="col-sm-6">
<input name="text" type="email" class="form-control" id="emailText" placeholder="请输入邮箱" required>
<div class="invalid-feedback">
邮箱不符合格式
</div>
</div>
</div>
<div class="form-group row">
<!-- -->
<div class="col-sm-4 offset-sm-4 center_btn">
<button type="submit" class="btn btn-primary">确定</button>
</div>
</div>
</form>
</body>
</html>