Share bootstrap learning notes (components and attributes) and bootstrap learning notes

Share bootstrap learning notes (components and attributes) and bootstrap learning notes

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

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

For more information about bootstrap downloading and documentation, visit www.bootcss.com.

So what are the advantages of using bootstrap? First, it facilitates the development of responsive websites to solve compatibility issues with different devices. Second, it improves the website development speed and development efficiency.

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

The Bootstrap learning series uses the Bootstrap Typeahead component to implement the Baidu drop-down effect

This article summarizes common components and their attributes.

1.1 Grid System

1. The raster system is a layout composed of rows and columns. As the screen resolution increases, up to 12 columns can be displayed.

PC end:

PAD:

Mobile Terminal:

2. grid parameters:

Col-lg-* :( screen> = pixel px) PC
Col-md-* :( 992px-0000px)
Col-sm-* :( 768px-992px) small flat
Col-xs-* (smaller than 768px) mobile phone

3. Sample Code:

<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 ">  
1.2 auxiliary classes
1. text color:
<Span style = "white-space: pre "> </span> 

2. Background color:
<Span style = "white-space: pre "> </span> 

3. Close button & triangle icon:
<Span style = "white-space: pre"> </span> <! -- Close button --> <button class = "close"> <span> × </span> </button> <! -- Triangle icon --> <span class = "caret"> </span>
4. Fast floating:
Left floating: pull-left
Right floating: pull-right clear floating: clearfix
Floating will convert block elements into elements in a line
<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. Center block elements and text:
<! -- Vertically center block elements --> <style> # div2 {position: absolute; left: 50%; top: 50%; transform: translate (-50%,-50% ); // translation} </style> <span style = "white-space: pre"> </span> <! -- Implement horizontal center of block elements --> <div id = "div1" class = "center-block text-center" style = "width: 500px; border: 1px solid red; "> horizontal center of block elements </div> <! -- Implement vertical center of block elements --> <div id = "div2" class = "center-block text-center" style = "width: 500px; border: 1px solid red; "> vertical center of block elements </div>
1.3 table
1. Table color: active, warning, danger, info, danger
2. Mouse hover effect: table-hover
3. table with borders: table-bordered
4. color change of each row: table-striped
<Table class = "table-striped table-hover table-bordered"> <! -- Line-by-line 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 San </td> <td> male </td> <td> 23 </ td> </tr> <td> Zhang San </td> <td> male </td> <td> 23 </td> </tr> <tr> <td> Zhang San </td> <td> male </td> <td> 23 </td> </tr> </tbody> </table>
1.4 list:
Class Attribute: ul: list-group
Li: list-group-item badge: span: badge

Color of the list item: list-group-item-(success/warning/danger)
<Ul class = "list-group"> <li class = "list-group-item"> reliable research institute <! -- List badges --> <span class = "badge"> 10 </span> </li> <li class = "list-group-item-success"> IT Institute </li> <li class = "list-group-item-warning"> Institute of Food </li> <li class = "list-group -item list-group-item-info "> beauty institute </li> </ul>
1.5 form:
Form group: form-group
Form item: (input/span/textarea): form-control
<Style>. container {width: pixel PX; 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 ">