Bootstrap learning notes

1. Concept

  • Is a front-end development framework
  • Bootstrap is based on HTML, CSS and JAVASCRIPT. It is simple and flexible, making Web development faster.
  • Many css styles and js plug-ins are defined. Developers can directly use these styles and plug-ins to get rich page effects
  • Framework: a semi-finished software. Developers can develop and simplify the code on the basis of the framework.
  • Responsive layout: the same set of pages can be compatible with devices with different resolutions

2. Standard formwork

<!doctype html>
<html lang="zh-CN">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above three meta label*must*Put it at the top, anything else*must*Follow! -->

    <!--    BootstrapCDN    -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery  -->
    <script src="" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- load Bootstrap All JavaScript plug-in unit -->
    <script src="" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>



3. Responsive layout

3.1 grid system


  • Divide a row into 12 grids on average. You can specify how many grids the elements occupy.
  • There are 12 grids on devices with different frequency division rates, but the responsive layout can be realized by specifying the number of grids occupied by each element on different devices


  • Define the container, which is equivalent to the table in the table

    • Two container classes cannot be nested with each other.

    • container: there is blank space on both sides (a little smaller than 100% width)

    • Container fluid: each device is 100% wide (fully occupied)

      <div class="container">
      <div class="container-fluid">
  • Define the row, which is equivalent to tr in the table

    • Style: row

      <div class="container-fluid">
          <div class="row">
  • Define the element and specify the number of grids occupied by the element on different devices.

    • Style: col - Equipment Code - number of grids

        border: 1px solid red;

<div class="container-fluid">
     <div class="row">
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>
         <div class="col-lg-1 col-sm-2 inner">grid</div>

be careful

  • If the number of cells in a row exceeds 12, the excess part will wrap
  • Grid class properties can be upward compatible. The grid class is applicable to real devices whose screen width is greater than or equal to the size of the dividing point
  • If the real device width is less than the minimum value of the device code that sets the grid class attribute, an element will fill a whole line

4. Global CSS Style

Official documents

4.1 buttons

  • btn btn style

    <!-- Standard button -->
    <button type="button" class="btn btn-default">((default style) Default</button>
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">((preferences) Primary</button>
    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">((successful) Success</button>
    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">((general information) Info</button>
    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">((warning) Warning</button>
    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">((danger) Danger</button>
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">((link) Link</button>
  • Size: buttons of different sizes can be obtained by using BTN LG, BTN SM and BTN XS.

    <button type="button" class="btn btn-primary btn-lg">((large button) Large button</button>
    <button type="button" class="btn btn-default btn-lg">((large button) Large button</button>
  • Activation status: by adding active

    <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
  • disabled status: disabled

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

4.2 pictures

  • class = "img responsive": pictures account for 100% of any size (they can be scaled by themselves)

  • Picture shape

 <!-- square -->
<img src="..." alt="..." class="img-rounded">

 <!-- circular -->
<img src="..." alt="..." class="img-circle">

 <!-- Photo frame -->
<img src="..." alt="..." class="img-thumbnail">

4.3 forms

  • table: basic style
  • Table striped: striped table
  • Table bordered: a table with borders
  • Table hover: mouse over
  • Table condensed: Condensed table
  • State class
    • active
    • success
    • info
    • warning
    • danger

4.4 forms

  • form-control
  • See more official documents

5. Components

Official documents

5.1 navigation bar

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <!--    Hamburger button    -->
            <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>
            <a class="navbar-brand" href="#">Brand</a>

        <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>
                <!--    Drop down box    -->
                <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">
                        <!--Drop down item-->
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>

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

            <form class="navbar-form navbar-left">
                <div class="form-group">
                <!--    Search box     -->
                    <input type="text" class="form-control" placeholder="Search">
                <!--    Submit button    -->
                <button type="submit" class="btn btn-default">Submit</button>

5.2 paging bar

<nav aria-label="Page navigation">
  <ul class="pagination">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
    <li><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>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>

6. Plug in

Official documents

6.1 rotation chart

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">

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

Keywords: css bootstrap

Added by woodplease on Wed, 16 Feb 2022 10:52:49 +0200