Introduction of the bootstrap

What is Bootstrap?

  • Bootstrap comes from Twitter and is currently the most popular responsive front-end framework.
  • Bootstrap is simple and flexible based on HTML, CSS, and JavaScript, making Web development faster.

Why Bootstrap?

  • Mobile first: since Bootstrap3, the framework has included mobile first styles throughout the library.
    • Rather than simply adding some optional styles for mobile devices, they were incorporated directly into the framework’s core.
    • That is, styles for mobile devices are integrated into every corner of the framework, rather than adding an extra file.
  • Browser support: Bootstrap is supported by all major browsers.
  • Easy to get started: Once you have a basic knowledge of HTML and CSS, you can start learning Bootstrap.
  • Responsive design: Bootstrap’s responsive CSS ADAPTS to desktops, tablets, and mobile phones.
  • It provides a concise and unified solution for developers to create interfaces.
  • It contains powerful built-in components that are easy to customize.
  • It also provides web-based customization.
  • It’s open source.

Download and Use

Chinese official website: www.bootcss.com/ English official website: getBootstrap.com

The use of Bootstrap

form

Tags are richer, more semantic, and more aesthetically pleasing than previous tables

Rich labels

  • adds a base style for the table
  • Table header row container element ()
  • < tBody > Container element for table rows in the body of the table ()
  • < tr > table row
  • < TD > The default table cell.
  • Special table cells, (centered and bold effects). Must be used within .
  • A description or summary of what the table stores.

Scene style

  • .table adds basic styles for any <\table> (only horizontal delimiters)
  • Table -striped adds a striped striped striped top to (not supported by IE8), and the striped top changes color once in a row
  • .table-bordered adds borders to cells of all tables
  • .table-hover status is enabled on any line within and hover status is highlighted
  • . Table-condensed make your table more compact

Response form

Suitable for <th>, <tr>, < TD >

  • Active Activate effect (Hover color)
  • .success indicates a successful or positive action
  • Info Indicates common prompt information or action
  • . Warning Indicates a warning or requires user attention
  • Danger is a dangerous or potentially dangerous action

The form

The parent element of the table is set to be reactive, less than 768px, with a border

<table class="table table-responsive"> 
    <caption>Business Products</caption> 
    <thead> 
        <tr>
            <th>product</th> 
            <th>Date of payment</th> 
            <th>state</th> 
        </tr> 
    </thead>
    <tbody> 
        <tr class="info"> 
            <td>Product 1</td> 
            <td>The 2020-1-1</td> 
            <td>To send the goods</td> 
        </tr> 
        <tr class="active"> 
            <td>Product 2</td> 
            <td>The 2020-1-2</td> 
            <td>Has been shipped</td> 
        </tr> 
        <tr class="success"> 
            <td>Product 3</td> 
            <td>The 2020-1-3</td> 
            <td>Not paying</td> 
        </tr> 
        <tr class="warning"> 
            <td>The product of 4</td> 
            <td>The 2020-1-4</td> 
            <td>Have to return</td> 
        </tr> 
        <tr class="danger"> 
            <td>Product 5</td> 
            <td>The 2020-1-5</td> 
            <td>Have a refund</td> 
        </tr> 
    </tbody> 
</table>
Copy the code

The form layout

The default layout

<body style="padding:100px;"> 
    <form>
        <div class="form-group"> 
            <label>email</label> 
            <input type="email" class="form-control" placeholder="Please enter email address"> 
        </div> 
        <div class="form-group"> 
            <label>password</label>
            <input type="passowd" class="form-control" placeholder="Please enter your password"> 
        </div> 
        <div class="form-group"> 
            <button class="btn btn-primary">submit</button> 
        </div> 
    </form> 
</body>
Copy the code

Inline layout

  • Keep all form elements on one line
  • Note: When less than 768px, it will automatically revert to mobile style.
<form class="form-inline">
Copy the code

The form controls

Input box

<form>
    <div class="form-group"> 
        <label for="">Input box</label> 
        <input type="text" class="form-control" placeholder="Please enter text..."> 
    </div> 
</form>
Copy the code

The text box

<div class="form-group"> 
    <label for="">The text box</label> 
    <textarea class="form-control" cols="30" rows="5"></textarea> 
</div>
Copy the code

Check box

  • The checkbox by default
  • The checkbox – the inline inline
<div class="checkbox"> 
    <label> 
        <input type="checkbox">smoking</label> 
</div> 
<div class="checkbox"> 
    <label> 
        <input type="checkbox">drinking</label> 
</div>
    <hr> 
<div class="checkbox-inline"> 
    <label> 
        <input type="checkbox">Take a shower</label> 
</div> 
<div class="checkbox-inline"> 
    <label> 
        <input type="checkbox">Permed hair</label> 
</div>
Copy the code

Check button

<form>
    <div class="btn-group" data-toggle="buttons"> 
        <label class="btn btn-primary"> 
            <input type="checkbox">music</label> 
        <label class="btn btn-primary"> 
            <input type="checkbox">sports</label> 
        <label class="btn btn-primary"> 
            <input type="checkbox">The fine arts</label> 
        <label class="btn btn-primary"> 
            <input type="checkbox">The computer</label>
    </div> 
</form> 

<script src="Js/jquery - 3.3.1. Min. Js." "></script> 
<script src="js/bootstrap.min.js"></script>
Copy the code

Radio buttons

<label class="radio"> 
<input type="radio" name="sex"> 男 
</label> 
<label class="radio"> 
<input type="radio" name="sex"> 女 
</label> 
<hr> 
<label class="radio-inline"> 
<input type="radio" name="gender"> 耕 
</label> 
<label class="radio-inline"> 
<input type="radio" name="gender"> 织 
</label> 

<script src="Js/jquery - 3.3.1. Min. Js." "></script> 
<script src="js/bootstrap.min.js"></script>
Copy the code

The radio button

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
        <input type="radio" name="gender"> 男 
    </label> 
    <label class="btn btn-primary"> 
        <input type="radio" name="gender"> 女 
    </label> 
</div> 

<script src="Js/jquery - 3.3.1. Min. Js." "></script> 
<script src="js/bootstrap.min.js"></script>
Copy the code

button

<button class="btn btn-default">The default button</button> 
<button class="btn btn-primary">The main button</button> 
<button class="btn btn-success">Successful button</button> 
<button class="btn btn-info">Information button</button> 
<button class="btn btn-warning">The warning button</button> 
<button class="btn btn-danger">Dangerous button</button> 
<button class="btn btn-link">Connect button</button>
Copy the code
  • Size of the button
<button class="btn btn-primary btn-lg">Large button (HD large screen desktop)</button> 
<button class="btn btn-primary">Big button (laptop screen)</button> 
<button class="btn btn-primary btn-sm">Small button (tablet)</button> 
<button class="btn btn-primary btn-xs">Super small button (mobile phone)</button>
Copy the code
  • Button state
    • Active state: The button appears as it is pressed when activated (dark background, dark border, shadow);
    • Disabled: When you disable a button, its color becomes 50% lighter and it loses gradient;
<button class="btn btn-default">The default button</button> 
<button class="btn btn-default active">The activation button</button> 
<button class="btn btn-default" disabled>Disable the button</button>
Copy the code

The picture

  • Img-rounded: add border-radius:6px for rounded corners.
  • Img-circle: add border-radius:50% to make the whole image round.
  • Img-thumbnail: Add some padding and a gray border
<img src="img/1.jpg" class="img-rounded" width="33%"> 
<img src="img/1.jpg" class="img-circle" width="33%"> 
<img src="img/1.jpg" class="img-thumbnail" width="33%">
Copy the code

Responsive picture

<img src="img/1.jpg" class="img-responsive">
Copy the code

Drop-down menu components

<div class="dropdown"> 
    <button class="btn btn-primary" data-toggle="dropdown">Pull hook education<span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
        <li><a href="#">Cutting-edge technology</a></li> 
        <li><a href="#">Teacher made</a></li> 
        <li><a href="#">24 hour tutor</a></li> 
    </ul> 
</div> 

<script src="Js/jquery - 3.3.1. Min. Js." "></script> 
<script src="js/bootstrap.min.js"></script>
Copy the code

The key core of usage

  1. External containers are wrapped with class=”dropdown”
  2. Internal click button event binding data-toggle=”dropdown”
  3. Use class=”dropdown-menu” for menu elements

The paging component

<ul class="pagination"> 
    <li class="previous"> <a href="#"> &laquo; </a> </li> 
    <li class="active"> <a href="#">1</a> </li> 
    <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> 
    <li class="next"> <a href="#">&raquo;</a> </li> 
</ul>
Copy the code
<ul class="pager">
Copy the code

Grid system

  • Bootstrap’s grid system divides the entire page horizontally into an average of 12 squares
  • When the browser size changes, we can control how many grids the elements occupy per row to achieve a responsive effect
  • Display screen enlargement and shrinkage. Achieve the following effect
<style> 
    .a{ 
        height: 50px; 
        border: 1px solid black; 
        background-color: #eeeeee; 
    }
</style> 
<body>

    <div class="container"> 
        <div class="row">
        
            <! -- col-lg-3 When large screen, one div is 3, one line is 4 div --> 
            <! -- col-mD-4 screen, one div is 4, one line is 3 div --> 
            <! -- col-sm-6 When small screen, one div is 6, display 2 div in a row --> 
            <! -- Small screen, one div in 12, one div in a row, default --> 

            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 

            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
    
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> 
        </div> 
    </div> 
</body>
Copy the code

Thumbnail component

  • With a responsive grid system
<div class="container"> 
    <div class="row"> 
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="thumbnail"> 
                <img src="img/2.jpg"> 
            </div> 
        </div> 
        <! -- Other 3 pictures --> 
        <div class="col-lg-3 col-md-4 col-sm-6"> 
            <div class="thumbnail"> 
                <img src="img/2.jpg"> 
            </div> 
        </div> 
        <div class="col-lg-3 col-md-4 col-sm-6"> 
            <div class="thumbnail"> 
                <img src="img/2.jpg"> 
            </div> 
        </div> 
        <div class="col-lg-3 col-md-4 col-sm-6"> 
            <div class="thumbnail"> 
                <img src="img/2.jpg"> 
            </div> 
        </div> 
    </div> 
</div>
Copy the code
  • Custom content
<div class="container"> 
    <div class="row"> 

        <div class="col-lg-3 col-md-4 col-sm-6"> 
            <div class="thumbnail"> 
                <img src="img/2.jpg"> 
                <div class="caption"> 
                    <h3>Video title</h3> 
                    <p>Video introduction, many beauty...</p> 
                    <p> 
                        <a href="#" class="btn btn-primary">And proved</a> 
                        <a href="#" class="btn btn-warning">buy</a> 
                    </p> 
                </div> 
            </div> 
        </div> 

        <! --> 

    </div> 
</div>
Copy the code

Modal box components

  • Data-toggle =” Modal “Trigger type: Modal box modal
  • Data-target =”#myModal” triggered object
  • Data-rafael =”static” Data-Rafael =”static” Data-Rafael =”static” data-Rafael =”static” data-Rafael =” data-Rafael
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal">bounced</button> 

<! Declare a modal box component --> 
<div class="modal" id="myModal" data-backdrop="static"> 
    <! -- Window declaration --> 
    <div class="modal-dialog"> 
        <! -- Content Statement --> 
        <div class="modal-content"> 
            <! -- 1. Box title --> 
            <div class="modal-header"> 
                <button class="close" data-dismiss="modal"> 
                    <span>&times;</span> 
                </button> 
                <h4 class="modal-title">Helpful hints</h4> 
            </div> 
            <! -- 2. Box information --> 
            <div class="modal-body">Server error, please try again later!<hr> 
                <img src="img/1.jpg" width="200px"> 
                <hr> 
                <input type="text"> 
            </div> 
            <! -- 3. Box button --> 
            <div class="modal-footer"> 
                <button class="btn btn-info">determine</button> 
                <button class="btn btn-default" data-dismiss="modal">cancel</button> 
            </div> 
        </div> 
    </div> 
</div>
Copy the code