01_前端框架之Bootstrap的应用

已于 2024-01-22 07:43:47 修改
阅读量1.8k 收藏 33
点赞数 23
分类专栏： HTML/CSS/JS 文章标签： 前端框架 bootstrap 前端
于 2024-01-22 07:37:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80008556/article/details/135739121
版权

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样式，就可以轻松完成指定效果的实现。

  • 作用：

1.2 什么是响应式布局

  • 响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个 展示版本。此概念专为解决移动互联网浏览而诞生的。

  • 响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开 发维护成本，并且能带给用户更好的体验性。

  • 响应式布局会增加程序员负担以及代码量

  • 未使用响应式开发：

第2章 bootstrap环境搭建

2.1 下载bootstrap

第3章 bootstrap页面布局

3.1 基础入门

  • Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

  • Bootstrap原生带三种container宽度规范：

    • .container, 居中，适配不同的断的 max-width 尺寸。

    • .container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。

超小屏幕 <576px小屏幕 ≥576px中等屏幕 ≥768px大屏幕 ≥992px超大屏幕 ≥1200px
.container100%540px720px960px1140px
.container-sm100%540px720px960px1140px
.container-md100%100%720px960px1140px
.container-lg100%100%100%960px1140px
.container-xl100%100%100%100%1140px
.container-fluid100%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>

励志敲烂键盘
关注
专栏目录
Bootstrap前端开发框架
weixin_57770903的博客
04-24 695
1.Bootstrap前端开发框架 2.1 Bootstrap简介 Bootstrap来自Twitter (推特) ,是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和JAVASCRIPT的，它简洁灵活,使得Web开发更加快捷。 框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案 ,且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。 2.2 Bootstrap使用 在现阶段我们还没有接触JS相关课程,所以我们只..
bootstrap框架应用
weixin_30731305的博客
06-26 204
Bootstrap是什么 就是已经写好的一个html和css的样式组合 Bootstrap下载 官方地址：https://getbootstrap.com 本地引用 具体路径视情况而定 <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> 　　 处理依赖: ...
【前端】Bootstrap：JavaScript 组件与插件
最新发布
2303_80346267的博客
10-13 985
本文将详细介绍 Bootstrap 的常用 JavaScript 组件与插件，包括：模态框（Modal）、工具提示（Tooltip）、弹出框（Popover）、滚动监听（Scrollspy）、折叠（Collapse）、轮播（Carousel）等。
BootStrap的应用
hongcaixia的博客
04-21 565
BootStrap的应用编写商城首页<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Bootstrap应用
mantou_riji的博客
05-11 328
文章目录bootstrap实现导航栏Bootstrap实现轮播图 bootstrap实现导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" conten
BOOtbootstrap框架应用
a2_45688的博客
10-13 435
前端框架
1-4_前端框架BootStrap.pdf
01-19
Bootstrap 框架是目前最流行的前端框架之一，广泛应用于构建响应式、移动优先的WEB应用程序。下面是 Bootstrap 框架的基础知识点： 一、关于 Bootstrap Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的开源前端...
WebUI.zip_bootstrap easyui_easyui框架_miniui_前端框架
09-20
在IT领域，前端框架是构建高效、美观且交互性强的Web应用程序的重要工具。"WebUI.zip"中的资源涉及到了几个知名且广泛使用的前端框架：Bootstrap、EasyUI、EasyUI框架、以及MiniUI。这些框架都有各自的特性和优势，...
zp_adminn-master_zp框架_bootstrap_zp框架下载_
09-29
【描述】提到"采用了现下流行的前端框架bootstrap来开发的一个web网站"，这表明项目的主要特点是其用户界面是用Bootstrap构建的。Bootstrap是Twitter推出的一款开源的前端开发工具，它提供了一套响应式布局、移动...
boot-crm.zip_SSM框架_SSM系统_bootstrap框架_crm_ssm框架crm系统
09-22
这个名为"boot-crm.zip"的压缩包中，包含了一个基于SSM的CRM（客户关系管理）系统，它利用了Bootstrap前端框架来提升用户体验，同时也展现了SSM框架在实际项目中的应用。 首先，SSM框架的整合是Java Web开发中常见...
zui-1.8.0-dist.zip_behavior175_bootstrap_zui_zui datagrid_前端dist
09-15
首先，ZUI是一个响应式和模块化的前端框架，它的核心在于对Bootstrap进行了深度定制，使得开发者能够更便捷地创建符合自身需求的页面布局和交互设计。"behavior175"可能指的是ZUI中特定的行为或者事件处理，这通常...
bootstrap常用的一些应用示例
09-19
bootstrap常用的一些应用示例,这些示例使用很简单，上手容易，包含了一些bootstrap使用的最多的功能，如：表单美化，弹出层，消息框，页面布局等...
BootStrap详细应用-小bai前端框架进阶秘籍
wnw1234的博客
03-27 1119
BootStrap是什么? BootStrap是HTML,CSS,JS框架.主要用于开发响应式布局,移动设备优先的WEB项目. 为什么要使用BootStrap? 1.简洁,直观,强悍的前端开发框架,是HTML,CSS,JavaScript工具集 2.基于H5,C3具有友好的学习曲线,卓越的兼容性,响应式设计,12列网格,样式向导文档 3.自定义JQuery插件,完整的类库.BootStrap3基于Less,BootStrap4基于Sass的CSS预处理技术 4.BootStrap响应式布局设计,
Bootstrap的使用
weixin_73200795的博客
07-23 536
栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中。
BootStrap 基本应用
与你清欢
04-22 324
BootStrap l.引用bootstrap.css 注，使用JQ需要1.11以上比较好 2.加入mate name 的 设备宽高代码全局CSS 布局容器: .container （固定宽度）或 .container-fluid （100% 宽度） 栅格系统：通过row(行),column(列)的方式，自动计算宽高 栅格参数：12列
分享六个基于Bootstrap的实用开发教程和模板演示
GBin1.com
03-27 1393
关于Bootstrap，相信大家一定不陌生，它已经成为现在主流产业的一个重要工具，Bootstrap提供了优雅的HTML和CSS规范，它基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。今天，我们带来6款Bootstrap实现的几款小应用，希望可以对你们有所帮助！ 移动为先的Bootstrap3
Bootstrap基本介绍及运用
m0_62839141的博客
03-31 2821
一，Bootstrap是什么? 一，Bootstrap是什么? 1.1Bootstrap诞生于2011年，来自Twitter公司，是目前最受前端框架 1.2是一个用于快速开发Web应用程序和网站的前端框架 1.3Bootstrap是基于HTML，CSS，JS的，简单灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(pc端，平板，手机)上完美展示的响应式前端框架 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值