1: Introduce the structure of BootStrap

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>
Copy the code

2: Basic template

<! DOCTYPEhtml>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <! Render the page as the latest version of Internet Explorer (EDGE).
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <! -- Responsive, mobile device support -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <! The above 3 meta tags must come first, and everything else must come after them! -->
    <title>Bootstrap 101 Template</title>

    <! -- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <! HTML5 shim and responder.js are designed to allow IE8 to support HTML5 elements and media queries -->
    <! -- warning: responder.js does not work when accessing a page using the file:// protocol (that is, dragging and dropping HTML pages directly into the browser) -->
    <! -- [if lt IE 9] > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js" > < / script > <! [endif]-->
  </head>
  <body>
    <h1>Hello world!</h1>

    <! -- jQuery (all JavaScript plug-ins for Bootstrap rely on jQuery and must be placed first) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <! Load all JavaScript plugins for Bootstrap. You can also load individual plug-ins as needed. -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>
Copy the code

3. Container-fluid

  • The fluid container changes with the size of the page window and always takes up the entire width of the screen.
  • The fluid container equals width=100%
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container-fluid {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        test
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>
Copy the code

4: Secure the container (.container)

  • The width of the fixed container is fixed and does not change with the screen size.
  • Fixed containers have three thresholds, as shown below (1170px when the screen width is 1200px or greater)



5: Grid system

  • A row is divided into 12 columns in a grid system
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            background-color: aqua;
        }
        div[class |= col] {
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-10">col-lg-10</div>
            <div class="col-lg-2">col-lg-2</div>
        </div>
        <div class="row">
            <div class="col-lg-2">col-lg-2</div>
            <div class="col-lg-10">col-lg-10</div>
        </div>
        <div class="row">
            <div class="col-lg-6">col-lg-6</div>
            <div class="col-lg-6">col-lg-6</div>
        </div>
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>
Copy the code

5.1 the effect

5.2 Threshold Division of Columns (meaning of LG, MD, SM and XS)

5.3 Controlled by two columns

10 columns when the screen is lg, 2 columns when the screen is MD size, 6 columns, 6 columns evenly split.

When the screen is in the SM state, the first takes up 6 columns, the second takes up 6 columns, and the second takes up 6 columns because the second COL-XS-6 is upward-compatible.

5.4 column offset

  • Shift one column to the right.

6: Title tag

  • Add.h1 to.h6 to create the following effect

7: Common labels

7.1 the alignment

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Copy the code

7.2 Changing Case

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Copy the code

7.3 Querying urls using Common Labels

V3.bootcss.com/css/#overvi…

8. Table

  • Template code
<div class="container table-responsive">
        <table class="table table-bordered table-striped table-hover ">
            <tr class="success">
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
            </tr>
            <tr>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
            </tr>
            <tr>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
            </tr>
        </table>
    </div>
Copy the code
  • How to use: form

8.1 Turn tables into responsive tables

  • Add table-responsive to the div where the container resides

9: button

9.1 Button Templates

<div class="container">
        <a class="btn btn-default" href="#" role="button">Link</a>
        <! -- Use button on navigation and navigation bar -->
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
        <button type="button" class="btn btn-success">A) Success b) Success C) Success D) Success</button>
        <button type="button" class="btn btn-primary btn-block btn-lg">A Large button</button>
        <button type="button" class="btn btn-success btn-lg">A Large button</button>

        <! Change button to block element -->
        <button class="btn btn-success btn-block btn-md">Full of the container</button>
        <! Make the button active -->
        <button class="btn btn-success btn-block btn-md active">Full of the container</button>
        <! -- Make the button unavailable -->
        <button class="btn btn-success btn-block btn-md disabled">Full of the container</button>
    </div>
Copy the code

9.2 Template Effect

Picture 10:

The name of the class role
img-responsive Enable responsive layout of images
center-block Center the image
img-rounded Make the image appear as a rounded rectangle
img-circle Make the picture appear circular
img-thumbnail Let the image appear as a rectangle with an album frame

10.1 Sample Code

<div class="container">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-rounded">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-circle">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-thumbnail">
    </div>
Copy the code

10.2 Effect Display

11: Auxiliary classes

11.1 Closing Symbol

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Copy the code

11.2 Triangular symbols

<span class="caret"></span>
Copy the code

11.3 Quick Floating

The name of the class role
pull-left Quick left float
pull-right Quick right float

11.4 Center the content block

The name of the class role
center-block The content block is centered
text-center Center the text in the div

11.5 Clearing a Float

The name of the class role
Clearfix (this class name is added to the parent element) Remove the floating

12: Responsive tools

12.1 Hide or Display Content

  • Hide or show content by adding the following class name (don’t use asterisks)

13: thumbnails

13.1 Imitation BootStrap official website thumbnail source code

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail h3 {
            color: #337ab7;
        }
        .thumbnail small {
            font-size: 65%;
            text-align: center;
            line-height: 1;
            font-weight: 400;
        }
        .thumbnail p {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="Images /BootStrap website instance.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/webpack.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/react.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/typescript.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/svelte.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nextjs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/babeljs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nodejs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

</html>
Copy the code

13.2 Effect

To jump from an image to a page, add an A tag to the IMG tag.

14: BootStrap project recommendation page

14.1 the source code

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail h3 {
            color: #337ab7;
        }
        .thumbnail small {
            font-size: 65%;
            text-align: center;
            line-height: 1;
            font-weight: 400;
        }
        .thumbnail p {
            text-align: center;
        }
        .jumbotron {
            position: relative;
            color: #fff;
            text-align: center;
            background: linear-gradient(45deg.# 020031.#6d3353);
            text-shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%);
        }

        .jumbotron h1 {
            font-size: 90px;
            font-weight: 700;
            line-height: 1;
        }

        .jumbotron h2 {
            font-size: 24px;
            font-weight: 200;
            line-height: 1.25;
        }

        .jumbotron:after {
            content: ' ';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            background: url(./images/bootstrap-bgc.png) repeat 50%;
            position: absolute;
            opacity:.4;
            background-size: 150px 150px;
        }

        .masthead {
            padding: 90px 0 110px;
        }

        .projects-header {
            width: 60%;
            text-align: center;
            font-weight: 200;
            display: block;
            margin: 60px auto 40px;
        }

        .page-header {
            padding-bottom: 9px;
            /* margin: 40px 0 20px; * /
            border-bottom: 1px solid #eee;
        }

        .page-header h2 {
            display: block;
            font-size: 42px;
            letter-spacing: -1px;
            margin-block-start: 0.83 em;
            / * margin - block - end: 0.83 em. * /
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            /* font-weight: bold; * /
        }

        .page-header p {
            margin: 0 0 10px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
    </style>
</head>

<body>
    <div class="jumbotron masthead">
        <div class="container">
            <h1>Bootstrap</h1>
            <h2>Simple, intuitive, powerful front-end development framework, make web development faster and simpler.</h2>
        </div>
    </div>
    <div class="container projects">
        <div class="projects-header page-header">
            <h2>Recommended Bootstrap related quality projects</h2>
            <p>These projects either complement or are based on Bootstrap</p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <a href="http://google.com" target="_blank"><img src="Images /BootStrap website instance.png" alt="..." ></a>
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/webpack.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/react.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/typescript.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/svelte.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nextjs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/babeljs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nodejs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">Optimal station selection<br>
                            <small>Bootstrap Site instance</small></h3>
                        <p>Bootstrap channel is a collection of well-designed and creative websites based on Bootstrap.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
Copy the code

14.2 Implementation Effect

15: the form

15.1 Basic Template

<div class="container">
    <div class="col-md-5">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="username" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</div>
Copy the code

15.2 Effect of The Basic Template

  • See the form for the rest of the form styles

16: Font icon

16.1 Sample code

<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Copy the code

16.2 Example Effect

  • The base class Glyphicon is a must.
  • Just select the class name from the library and add it.
  • By styling the SPAN separately, you can continue to modify the font icon

17: Drop-down menu

  • Jquery and bootstrap.js must be imported before they can be used

17.1 Template Code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Dropdown
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <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>
          </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
Copy the code

17.2 Template Effect

18: button group

18.1 Sample code

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
Copy the code

18.2 Rendering effect

19: input box group

19.1 Sample code

<div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">@example.com</span>
    </div>

    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-addon">00.</span>
    </div>

    <label for="basic-url">Your vanity URL</label>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>
Copy the code

19.2 Effect realization

20: navigation

20.1 Basic Cases

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
        </ul>
    </div>



    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $('.nav-tabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')})</script>
</body>

</html>
Copy the code

Note: in addition to introducing js, add a single script tag and fill it with the code above and below. Don’t forget to change the class name to your navigation class name

$('.nav-tabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
Copy the code

20.2 Case Realization Effect

21: Navigation bar

21.1 Sample code

<div class="container">
<nav class="navbar navbar-default">
   <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>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Copy the code

21.2 Implementation effect

22: paging and turning pages

22.1 Template code

<div class="container">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-lg">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li class="active"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li class="disabled"><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>
    </div>
Copy the code

22.2 Effect

23: the tag

23.1 Template code

<h1>Example heading <span class="label label-default">New</span></h1>
<h1>Example heading <span class="label label-success">New</span></h1>
Copy the code

23.2 Template Effect

24: badge

24.1 Template code

<div class="container">
    <a href="#">Inbox <span class="badge">42</span></a>

    <button class="btn btn-primary" type="button">
        Messages <span class="badge">4</span>
    </button>
    <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
      </ul>
</div>
Copy the code

24.2 Template Effect

25: giant screen

25.1 Template Code

<div class="container">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, sapiente amet tempora veritatis voluptas
            quis temporibus repudiandae ex nam similique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>
Copy the code

25.2 Template Effect

26: header

26.1 Template code

<div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
</div>
Copy the code

26.2 Template Effect

27: Warning box

27.1 Template code

<div class="container">
    <div class="alert alert-success" role="alert">Lorem ipsum dolor sit amet.</div>
    <div class="alert alert-info" role="alert">Lorem ipsum dolor sit amet.</div>
    <div class="alert alert-warning" role="alert">Lorem ipsum dolor sit amet.</div>
    <div class="alert alert-danger" role="alert">Lorem ipsum dolor sit amet.</div>
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-info" role="alert">
        <a href="http://www.baidu.com" class="alert-link">http://www.baidu.com</a>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Copy the code

27.2 Template Effect

28: Progress bar

28.1 Template code

<div class="container">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
            style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
            style="width: 60%;">
            60%
        </div>
    </div>
</div>
Copy the code

28.2 Template Effect

29: media object

29.1 Template code

<div class="container">
    <ul class="media-list">
        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="images/02_64x64.jpg" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
          </div>
        </li>
        <li class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="images/02_64x64.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
            </div>
          </li>
          <li class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="images/02_64x64.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
            </div>
          </li>
          <li class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="images/02_64x64.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
            </div>
          </li>
      </ul>
</div>
<div class="container">
    <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="images/02_64x64.jpg" alt="...">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>.</div>
      </div>
</div>
Copy the code

29.2 Template Effect

30: list group

30.1 Template code

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
        <div class="col-md-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
        <div class="col-md-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
    </div>
</div>
Copy the code

30.2 Template effect

31: panel

31.1 Template code

<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, voluptatum.
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eligendi.
        </div>
      </div>
      
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto facere, eveniet nulla voluptatem qui debitis libero officia error dolor labore quod illum, perferendis quibusdam voluptatum accusamus beatae cumque. Deserunt, laborum! Eum, inventore laudantium soluta voluptatibus, voluptas mollitia facere sint harum ad iste, ex eius ea atque porro iusto rem nostrum.
        </div>
      </div>
      
</div>
<div class="container">
    <div class="panel panel-default">
        <! -- Default panel contents -->
        <div class="panel-heading">Panel heading</div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam quas et quaerat dolorem doloremque maxime sequi sunt optio nam quisquam!</p>
        </div>
      
        <! -- Table -->
        <table class="table table-bordered table-striped table-hover ">
            <tr class="success">
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
            </tr>
            <tr>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
            </tr>
            <tr>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
                <td>Form and content</td>
            </tr>
        </table>
      </div>
</div>
Copy the code

31.2 Template Effect

32: Round-cast chart

32.1 Template code

<div class="container" style="width: 50%;">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <! -- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <! -- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="Images/rotate.jpg" style="width: 100%; height: 100%;">
                <div class="carousel-caption">
                    <h3>The third round cast chart</h3>
                    <p>Here is the introduction of the round - cast graph</p>
                </div>
            </div>
            <div class="item">
                <img src="Images/rotate.jpg" style="width: 100%; height: 100%;">
                <div class="carousel-caption">
                    <h3>The third round cast chart</h3>
                    <p>Here is the introduction of the round - cast graph</p>
                </div>
            </div>
            <div class="item">
                <img src="Images/rotate.jpg" style="width: 100%; height: 100%;">
                <div class="carousel-caption">
                    <h3>The third round cast chart</h3>
                    <p>Here is the introduction of the round - cast graph</p>
                </div>
            </div>
        </div>

        <! -- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Copy the code

32.2 Template Effect