[2020Python cultivation] Bootstrap, a front-end framework for front-end development

1, Introduction

The framework has written many page styles for you. If you need to use it, you only need to download its corresponding file, and then directly copy cv

When using Bootstrap, all page styles need to be adjusted by class

v3 is recommended for version selection: https://v3.bootcss.com/

[note]

The js code of bootstrap depends on jQuery, which means that you must import jQuery when using the dynamic effect of bootstrap when developing a project.

Method 1: import with CDN (only with network)

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

Method 2: download the file locally, add the folder to the project, and reference directly -- for example, introduce the pop-up plug-in

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

[note]

Importing CSS files using < link rel = "stylesheet" href = "CSS file path" >

Import JS file using < script SRC = "JS file path / CDN address" > < / script >

 

2, Feature framework function

Layout container

<div class="container">
        Left and right blank
</div>

<div class="container-fluid">
            Left and right sides are not left blank
</div>

#Later, when using bootstrap as a page, write a div class=container first, and then write the page inside the 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>

 

grid system

<div class="row"></div>
To write a row is to divide the area into 12 parts

< div class = "col-md-6" > get the number of copies you want
#When using bootstrap, you must do 12 addition and subtraction in your mind

Grid Params

.col-xs-    .col-sm-    .col-md-    .col-lg-
# bootstrap will automatically select corresponding parameters for different displays
# If you want to be compatible with all monitors, you can add them all


# How to move position in a row
<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>

 

Typesetting

bootstrap unifies the text fonts of all native HTML tags to a style acceptable to the naked eye

The effect is the same, but the meaning of the label is different

<!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>Phase 14 <small>The best</small></h1>
<p class="lead text-center">Coquettish card is about to be turned on see coquettish card is about to be turned on lead See the coquettish card about to turn on see the coquettish card about to turn on see</p>
<abbr title="Detailed explanation">What are you, kid</abbr>

<blockquote class="blockquote-reverse">
  <p>Coquettish card is about to be turned on see coquettish card is about to be turned on</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</body>
</html>

 

form

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

 

form

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">Landing page</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>

# Use form control to style form labels
    class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox and radio We don't usually add it form-control,Just use the native
"""

# You can add has error (the parent tag of input) to the error message
<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">Landing page <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>

 

Button

<a href=" https://www.mzitu.com/ "Class =" BTN BTN primary "> Click me</a>
< button class = "BTN BTN danger" > press me < / button >
< button class = "BTN BTN default" > press me < / button >
< button class = "BTN BTN success" > press me < / button >
< button class = "BTN BTN info" > press me < / button >
< button class = "BTN BTN warning" > press me < / button >


< button class = "BTN BTN warning BTN LG" > press me < / button >
< button class = "BTN BTN warning BTN SM" > press me < / button >
< button class = "BTN BTN warning BTN XS" > press me < / button >
<input type="submit" class="btn btn-primary btn-block">  
By adding a. BTN block class to a button, you can stretch it to 100% of the width of the parent element, and the button becomes a block level element.
<!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">Point me</a>
<button class="btn btn-danger">Press me</button>
<button class="btn btn-default">Press me</button>
<button class="btn btn-success">Press me</button>
<button class="btn btn-info">Press me</button>
<button class="btn btn-warning">Press me</button>
<button class="btn btn-warning btn-lg">Press me</button>
<button class="btn btn-warning btn-sm">Press me</button>
<button class="btn btn-warning btn-xs">Press me</button>
<input type="submit" class="btn btn-primary btn-block">


</body>
</html>

 

Icon - < span class = "icon name" ></span>

<h2 class="text-center">Landing page <span class="glyphicon glyphicon-user"></span></h2>


    <style>
        span {
            color: greenyellow;
        }
    </style>

# extend
<!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; home page</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; About us</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Background application editing</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; System settings</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>

 

picture

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

 

Navigation bar

<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>Asia's largest online casino opened <small>Come and experience</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>

 

Pager

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

Multi page content

<!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 Technician No
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
        21 Technician No
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
        22 Technician No
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
        23 Technician No
    </div>
  </div>

</div>
</body>
</html>

progress bar

<!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">Run up</button>


<script>
    function func(i){
        let tempWidth = 'width:' + i + '%'  // style
        let contentText = i + '%'   // text
        $('#d2').attr('style',tempWidth).text(contentText)
    }
    $('#d1').click(function () {
        for(let i=0;i<101;i++){
            setInterval(func(i),5000)
        }
    })
</script>
</body>
</html>

 

Spring box

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

  
  
swal('Are you all right??')
undefined
swal('Are you all right??')
undefined
swal('Are you all right??','I'm not good. I miss you!')
undefined
swal('Are you all right??','I'm not good. I miss you!','success')
undefined
swal('Are you all right??','I'm not good. I miss you!','warning')
undefined
swal('Are you all right??','I'm not good. I miss you!','error')
undefined
swal('Are you all right??','I'm not good. I miss you!','info')
undefined
# We'll cover that later in the course

 

More exciting:

Bootstrap Chinese document -- bootstrap is the most popular, mobile device first, responsive front-end development framework in the world.

https://v3.bootcss.com/

 

Global CSS style · Bootstrap v3 Chinese document

[CSS]

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

[components]

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

[JavaScript plug in]

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

 

Front end resource summary:

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

 

Tags: Javascript JQuery Mobile network

Posted on Thu, 21 May 2020 08:09:12 -0400 by 3dron