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
-
地址：https://code.z01.com/v4/bootstrap-4.4.1-dist.zip
-
目录结构：目录结构 · 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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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
-
<!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>
)
