01_前端框架之Bootstrap的应用

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="//i2.wp.com/code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="//i2.wp.com/cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="//i2.wp.com/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)

            /* 
                如何判断邮箱地址是否满足条件？
                        [email protected]
                        具体要求：
                                数字和字母开始 +@ +字母 + . + .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>