• 【2020Python修炼记】前端开发之 前端框架Bootstrap


    一、简介

    该框架已经帮你写好了很多页面样式,你如果需要使用,只需要下载它对应文件,之后直接cv拷贝即可

    在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

    版本选择建议使用v3版本:https://v3.bootcss.com/

    【注意】

    bootstrap的js代码是依赖于jQuery的,也就意味着你在开发项目时,使用Bootstrap动态效果的时候,一定要导入jQuery。

    方法一: 利用CDN 导入(需要有网络才可以)

    <head>  
        ……
    
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
         ……
    
    </head>

     方法二:下载文件到本地,将文件夹加入所在项目中,直接引用--例如 引入 弹框插件

     <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
     <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>

     【注意】

    导入CSS 文件 使用  <link rel="stylesheet" href=" CSS 文件路径 ">

    导入 JS 文件 使用 <script src=" js 文件路径 / CDN地址 "></script>

    二、特色框架功能

    布局容器

    <div class="container">
            左右两侧有留白
    </div>
    
    <div class="container-fluid">
                左右两侧没有留白
    </div>

    # 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            .c1 {
                background-color: red;
                height: 100px;
            }
        </style>
    </head>
    <body>
    <div class="container c1">
    
    </div>
    <br>
    <div class="container-fluid c1"></div>
    </body>
    </html>
    View Code

    栅格系统

    <div class="row"></div>
    写一个row 就是将所在的区域划分成 12 份
    
    <div class="col-md-6 ">  获取你所要的份数
    # 在使用bootstrap的时候 脑子里面一定要做12的加减法

    栅格参数

    .col-xs-    .col-sm-    .col-md-    .col-lg-
    # 针对不同的显示器 bootstrap会自动选择对应的参数
    # 如果你想要兼容所有的显示器 你就全部加上即可
    
    
    # 在一行如何移动位置
    <div class="col-md-8 c1 col-md-offset-2"></div>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            .c1 {
                background-color: red;
                height: 100px;
                border: 5px solid black;
            }
    
            @media screen and (max- 600px) {
                .c1 {
                background-color: greenyellow;
                height: 100px;
                border: 5px solid black;
            }
            }
    
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 c1 col-xs-6">
            </div>
            <div class="col-md-6 c1 col-xs-6"></div>
            <br>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <div class="col-md-1  c1"></div>
            <br>
            <div class="col-md-3 c1 "></div>
            <div class="col-md-9 c1 "></div>
            <br>
            <div class="col-md-2 c1"></div>
            <div class="col-md-8 c1"></div>
            <div class="col-md-2 c1"></div>
            <br>
            <div class="col-md-8 c1"></div>
            <div class="col-md-4 c1"></div>
            <br>
            <div class="col-md-8 c1 col-md-offset-2"></div>
        </div>
    </div>
    </body>
    </html>
    View Code

    排版

    bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式

    效果一样,但是标签表达的意思不一样(语义)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <h1>脱产14期 <small>最牛逼</small></h1>
    <p class="lead text-center">撒娇的卡即将开机看见的撒娇的卡即将开机 lead看见的撒娇的卡即将开机看见的撒娇的卡即将开机看见的</p>
    <abbr title="详细的解释">小朋友 你是啥子</abbr>
    
    <blockquote class="blockquote-reverse">
      <p>撒娇的卡即将开机看见的撒娇的卡即将开机</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
    </body>
    </html>
    View Code

    表格

    <table class="table table-hover table-striped table-bordered">
            
    <tr class="success">
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
    </tr>
    
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-hover table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th class="text-center">username</th>
                <th>password</th>
                <th>hobby</th>
    
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
            </tr>
            <tr class="warning">
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
            </tr>
         <tr class="danger">
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
            </tr>
         <tr class="info">
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
            </tr>
         <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
            </tr> <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
            </tr>
    
        </tbody>
    </table>
        </div>
    </div>
    
    </body>
    </html>
    View Code

    表单

    <div class="container">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">登陆页面</h2>
            <form action="">
                <p>username:<input type="text" class="form-control"></p>
                <p>password:<input type="text" class="form-control"></p>
                <p>
                    <select name="" id="" class="form-control">
                        <option value="">111</option>
                        <option value="">222</option>
                        <option value="">333</option>
                    </select>
                </p>
                <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
                <input type="submit">
            </form>
        </div>
    </div>
    
    # 针对表单标签 加样式就用form-control
        class="form-control"
    """
    <input type="checkbox">222
    <input type="radio">333
    checkbox和radio我们一般不会给它加form-control,直接使用原生的即可
    """
    
    # 针对报错信息 可以加has-error(input的父标签加)
    <p class="has-error">
        username:
      <input type="text" class="form-control">
    </p>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            span {
                color: greenyellow;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
            <form action="">
                <p class="has-error"> <span class="glyphicon glyphicon-heart"></span>username:<input type="text" class="form-control"></p>
                <p><span class="glyphicon glyphicon-heart"></span>password:<input type="text" class="form-control"></p>
    <!--            <p>-->
    <!--                <select name="" id="" class="form-control">-->
    <!--                    <option value="">111</option>-->
    <!--                    <option value="">222</option>-->
    <!--                    <option value="">333</option>-->
    <!--                </select>-->
    <!--            </p>-->
    <!--            <p>-->
    <!--                <input type="checkbox" >111-->
    <!--                <input type="checkbox">222-->
    <!--                <input type="radio">333-->
    <!--            </p>-->
    <!--            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>-->
                <input type="submit" class="btn btn-primary btn-block">
            </form>
        </div>
    </div>
    </body>
    </html>
    View Code

    按钮

    <a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
    <button class="btn btn-danger">按我</button>
    <button class="btn btn-default">按我</button>
    <button class="btn btn-success">按我</button>
    <button class="btn btn-info">按我</button>
    <button class="btn btn-warning">按我</button>
    
    
    <button class="btn btn-warning btn-lg">按我</button>
    <button class="btn btn-warning btn-sm">按我</button>
    <button class="btn btn-warning btn-xs">按我</button>
    <input type="submit" class="btn btn-primary btn-block">  
    通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
    <button class="btn btn-danger">按我</button>
    <button class="btn btn-default">按我</button>
    <button class="btn btn-success">按我</button>
    <button class="btn btn-info">按我</button>
    <button class="btn btn-warning">按我</button>
    <button class="btn btn-warning btn-lg">按我</button>
    <button class="btn btn-warning btn-sm">按我</button>
    <button class="btn btn-warning btn-xs">按我</button>
    <input type="submit" class="btn btn-primary btn-block">
    
    
    </body>
    </html>
    View Code

    图标—— <span class="图标名"></span>

    <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
    
    
        <style>
            span {
                color: greenyellow;
            }
        </style>
    
    # 扩展
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <i class="fa fa-binoculars" aria-hidden="true"></i>
    <div class="list-group">
      <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
      <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
      <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
      <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>
    
    </div>
    
    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
    
    <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
    
    <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
    
    <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
    
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
    </body>
    </html>
    View Code

    图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-rounded">
                <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-circle">
                <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-thumbnail">
            </div>
        </div>
    </div>
    </body>
    </html>
    View Code

    导航条

    <nav class="navbar navbar-inverse">
    <nav class="navbar navbar-default">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <nav class="navbar navbar-inverse ">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
        <h1>亚洲最大的线上赌场开业了 <small>快来体验哦</small></h1>
        <div class="row">
            <div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
        </div>
        <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
             <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
             <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
             <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
      ...
    </div>
        <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
             <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
             <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
             <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2971348996,3395851350&fm=26&gp=0.jpg" alt="...">
        </a>
      </div>
      ...
    </div>
    
        <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1998860851,82672002&fm=26&gp=0.jpg" alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>
    </div>
    </body>
    </html>
    View Code

    分页器

    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

    多页内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
        <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>
    </head>
    <body>
    <div>
    
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>
    
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            20号技师
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            21号技师
        </div>
        <div role="tabpanel" class="tab-pane" id="messages">
            22号技师
        </div>
        <div role="tabpanel" class="tab-pane" id="settings">
            23号技师
        </div>
      </div>
    
    </div>
    </body>
    </html>
    View Code

    进度条

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="progress">
      <div id='d2' class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 10%">
    
      </div>
    </div>
    <button id="d1" class="btn btn-danger">跑起来</button>
    
    
    <script>
        function func(i){
            let tempWidth = '' + i + '%'  // style
            let contentText = i + '%'   // 文本
            $('#d2').attr('style',tempWidth).text(contentText)
        }
        $('#d1').click(function () {
            for(let i=0;i<101;i++){
                setInterval(func(i),5000)
            }
        })
    </script>
    </body>
    </html>
    View Code

    弹框

    https://lipis.github.io/bootstrap-sweetalert/

      
      
    swal('你还好吗?')
    undefined
    swal('你还好吗?')
    undefined
    swal('你还好吗?','我不好,想你了!')
    undefined
    swal('你还好吗?','我不好,想你了!','success')
    undefined
    swal('你还好吗?','我不好,想你了!','warning')
    undefined
    swal('你还好吗?','我不好,想你了!','error')
    undefined
    swal('你还好吗?','我不好,想你了!','info')
    undefined
    # 我们在后面的课程中 还会涉及到该部分内容

    更多精彩:

    Bootstrap 中文文档 ·——Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。

    https://v3.bootcss.com/

    全局 CSS 样式 · Bootstrap v3 中文文档

    【CSS】

    https://v3.bootcss.com/css/

    【组件】

    https://v3.bootcss.com/components/

    【JavaScript 插件】

    https://v3.bootcss.com/javascript/

    前端资源汇总:

    https://www.cnblogs.com/bigorangecc/p/12874459.html

  • 相关阅读:
    jquery $.ajax $.get $.post的区别
    浅析JQuery中的html(),text(),val()区别
    单词统计续
    第一阶段意见评论
    学习进度9
    第一阶段SCRUM冲刺10
    第一阶段SCRUM冲刺09
    单词统计
    第一阶段SCRUM冲刺08
    学习进度8
  • 原文地址:https://www.cnblogs.com/bigorangecc/p/12932617.html
Copyright © 2020-2023  润新知