Share bootstrap study notes of components and their attributes

Bootstrap is an web framework, which is a popular front-end framework based on HTML, CSS and JS.

Bootstrap contains a wealth of components, according to the components provided, developers can build their favorite websites more quickly and conveniently. It usually includes the following common components: drop-down menu, button group, button drop-down menu, navigation, navigation bar, paging, typesetting, thumbnail, warning dialog box, progress bar, media object and so on. In addition, bootstrap also includes many jQuery plug-ins: Motel Bureau, tabs, scroll bars, pop-up boxes and so on.

Downloads and documents about bootstrap can be found on bootstrap Chinese website: www. bootcss. com.

So what are the advantages of using bootstrap? First, it is beneficial to develop responsive websites to solve the compatibility problems of different devices. Second, it improves the development speed and efficiency of the website.

Reference: How to customize the alert, confirm, and modal dialog boxes using the modal component of Bootstrap

Using Bootstrap Typeahead component to realize Baidu drop-down effect in Bootstrap learning series

This article summarizes common components and their properties.

1.1 Grid System

1. A grid system is a layout of 1 row and 1 column. As the screen resolution increases, up to 12 columns can be displayed.

PC End:

PAD end:

Mobile terminal:

2. Grid parameters:

col-lg-*: (Screen > =1200px) PC
col-md-*: (992px-1200px)
col-sm-*: (768px-992px) Small Plate
col-xs-*: (less than 768px) Mobile

3. Code example:

<div class="container" style="border:1px solid red;"> 
 <div class="row"> 
  <div class="col-lg-3 col-sm-4 col- xs-6"> 
   <div class="thumbnail"> 
    <img src="img/codeguide.png"> 
    <h2> Reliable Institute </h2> 
    <p> Our slogan is: Reliable, interesting and informative </p> 
   </div> 
  </div> 
  <div class="col-lg-3 col-sm-4 col- xs-6"> 
   <div class="thumbnail"> 
    <img src="img/codeguide.png"> 
    <h2> Reliable Institute </h2> 
    <p> Our slogan is: Reliable, interesting and informative </p> 
   </div> 
  </div> 
 </div>  
 </div> 

1.2 Auxiliary classes

1. Text color:

<span style="white-space:pre"> </span> <h1 class="text-primary">text-primary Reliable Institute </h1> 
  <h1 class="text-success">text-success Reliable Institute </h1> 
  <h1 class="text-warning">text-warning Reliable Institute </h1> 
  <h1 class="text-danger">text-danger Reliable Institute </h1> 
  <h1 class="text-info">text-info Reliable Institute </h1> 
  <h1 class="text-muted">text-muted Reliable Institute </h1> 

2. Background color:

<span style="white-space:pre"> </span> <h1 class="bg-primary">text-primary Reliable Institute </h1> 
  <h1 class="bg-success">text-success Reliable Institute </h1> 
  <h1 class="bg-warning">text-warning Reliable Institute </h1> 
  <h1 class="bg-danger">text-danger Reliable Institute </h1> 
  <h1 class="bg-info">text-info Reliable Institute </h1> 
  <h1 class="bg-muted">text-muted Reliable Institute </h1> 

3. Close button & 3 corner icons:

<span style="white-space:pre"> </span> <!-- Close button --> 
  <button class="close"><span> × </span></button> 
  <!--3 Corner icon --> 
  <span class="caret"></span> 

4. Quick float:

Left float: pull-left

Right Float: pull-right Clear Float: clearfix

Floating converts block elements into inline elements

<div class="pull-left bg-primary"> This is the content on the left </div> 
 <div class="pull-right bg-danger"> This is the content on the right </div> 

5. Block element is centered and text is centered:

<!-- Block element is vertically centered --> 
 <style> 
  #div2{ 
  position:absolute; 
  left:50%; 
  top:50%; 
  transform:translate(-50%,-50%);// Translation  
  } 
 </style> 
<span style="white-space:pre"> </span><!-- Implement horizontal centering of block elements --> 
 <div id="div1" class="center-block text-center" style="width:500px;border:1px solid red;"> Block element is horizontally centered </div> 
 <!-- Implement vertical centering of block elements --> 
 <div id="div2" class="center-block text-center" style="width:500px;border:1px solid red;"> Block element is vertically centered </div> 

1.3 Forms

1. Table colors: active, warning, danger, info, danger

2. Mouse hover effect: table-hover

3. Form with border: table-bordered

4. Color change of each row: table-striped

<table class="table table-striped table-hover table-bordered"><!-- Interlaced color change, mouse hover, table border --> 
   <thead> 
    <tr class="danger"><!-- Table color --> 
     <th> Name: </th> 
     <th> Gender: </th> 
     <th> Age: </th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td> Zhang 3</td> 
     <td> Male </td> 
     <td>23</td> 
    </tr> 
    <tr> 
     <td> Zhang 3</td> 
     <td> Male </td> 
     <td>23</td> 
    </tr> 
    <tr> 
     <td> Zhang 3</td> 
     <td> Male </td> 
     <td>23</td> 
    </tr> 
   </tbody> 
  </table> 

1.4 List:

class Properties: ul: list-group

li: list-group-item Badge: span: badge

List Item Color: list-group-item-(success/warning/danger)

 <ul class="list-group"> 
 <li class="list-group-item"> 
  Reliable Institute  
 <!-- List badge --><span class="badge">10</span> 
 </li> 
 <li class="list-group-item list-group-item-success">IT Institute </li> 
 <li class="list-group-item list-group-item-warning"> Food Institute </li> 
 <li class="list-group-item list-group-item-info"> Institute of Beauty and Cosmetics </li> 
</ul> 

1.5 Forms:

Form grouping: form-group

Form item: (input/span/textarea): form-control

<style> 
 .container{ 
  width:450px; 
  height:300px; 
  background:#ffffff; 
  position:absolute; 
  left:50%; 
  top:50%; 
  transform:translate(-50%,-50%); 
  border-radius:20px; 
 } 
 </style> 
<span style="white-space:pre"> </span><form role="form"> 
   <h3 class="text-center"> Background management system of reliable research institute </h3> 
   <div class="form-group has-success has-feedback"> 
    <label for="user"> User name </label> 
    <input type="text" id="user" placeholder=" Please enter a user name " class="form-control"> 
    <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
   </div> 
   <div class="form-group has-error has-feedback"> 
    <label for="pass"> Password </label> 
    <input type="text" id="pass" placeholder=" Please enter your password " class="form-control"> 
    <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
   </div> 
   <div class="checkbox"> 
    <label> 
     <input type="checkbox"> Please remember me  
    </label> 
   </div> 
   <button type="submit" class="btn btn-success btn-block"> Submit </button> 
  </form>