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文章来源：https://www.toymoban.com/news/detail-818057.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文章来源地址https://www.toymoban.com/news/detail-818057.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>
到了这里，关于01_前端框架之Bootstrap的应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
