【2020Python修煉記】前端開發之 前端框架Bootstrap

時間  2020-06-10
標籤 2020Python修煉記 前端 開發 框架 bootstrap 欄目 Bootstarp 简体版
原文   原文鏈接

 

1、簡介

該框架已經幫你寫好了不少頁面樣式，你若是須要使用，只須要下載它對應文件，以後直接cv拷貝便可

在使用Bootstrap的時候全部的頁面樣式都只須要你經過class來調節便可

版本選擇建議使用v3版本：https://v3.bootcss.com/

【注意】

bootstrap的js代碼是依賴於jQuery的，也就意味着你在開發項目時，使用Bootstrap動態效果的時候，必定要導入jQuery。

方法一： 利用CDN 導入（須要有網絡才能夠）javascript

<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>

 

2、特點框架功能

佈局容器

<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-width: 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="width: 10%">

  </div>
</div>
<button id="d1" class="btn btn-danger">跑起來</button>


<script>
    function func(i){
        let tempWidth = 'width:' + 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 是世界上最流行的、移動設備優先的、響應式前端開發框架。 css

https://v3.bootcss.com/html

 

全局 CSS 樣式 · Bootstrap v3 中文文檔前端

【CSS】java

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

【組件】git

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

【JavaScript 插件】bootstrap

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

 

前端資源彙總：

http://www.javashuo.com/article/p-fgzfuarw-gv.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程