Bootstrap table table, grid system, form form style

Introduction to Bootstrapbootstrap 1. What is Bootstrap

A front-end framework developed by two front-end designers (HTML,CSS,JS)

Simplifies the programmer's code for writing CSS

2. Why use bootstrap, what are the characteristics

L learning is relatively simple, with html,css and JS can learn

L Responsive layout, adaptable to a wide range of devices

L Mobile Device First

Bootstrap installation of the use environment

Official Web download Package

To use bootstrap, you must load jquery

Basic template for Bootstrap 1. Type definitions for HTML documents

Bootstrap documents are based on HTML5, so the document type definition (DTD) to use HTML

2. Setting of the character set

<charset= "Utf-8" >

3. Mobile device First

<name= "viewport" content= "width=device-width,initial-scale=1" >

4. Introduction of CSS and JS files

<href= "bootstrap/css/bootstrap.min.css" rel= "stylesheet" > <src= "bootstrap/js/ Jquery-1.10.2.min.js "></script> <src=" Bootstrap/js/bootstrap.min.js "></  Script>

CSS global Style 1. Layout container Style

L. Container fixed-width and responsive

L. container-fluid free width (100%)

<class= "Container" >

3. Style:

H1~h6 style rewrite, almost do compatibility

3. Text Style

1. <b>: Bold

2. <strong>: Bold

3. <i>: Italic

4. <em>: Italic, HTML5 new mark

5. <del>: Strikethrough, HTML5 new tag

6. <s>: Strikethrough

4. Text alignment style

1. Text-left the left alignment

2,. Text-right Text right-aligned

3. Text-center Text Center Alignment

4. Text-justify both ends of the

5. List Style

1,. list-unstyled unsigned

2. List-inline in-line style

6. Table Style

1. Table: Table Global Style (small number of padding and horizontal split lines).

2. table-striped: Striped background Color line (interlaced color)

3. table-boedered: Table with point border

4. Table-hover: Mouse hover effect (put on color change, leave recovery)

5. table-condensed: Compact table (not halved in cells)

6. Row or cell background color:. Active,. Success,. info,. Warning,. Danger

. Active current Style

. Success

. info

. Warning

. Danger

Note You can only add colors to <tr><td>

7. Responsive form

Wrap the. Table element inside the. table-responsive element to create a responsive table

When the screen width is smaller than your table, the table appears with a scroll bar

When the screen width is larger than your table, the table's scrollbar naturally disappears

7. Form Style

1.. form-group Form group style: include <label> and form elements, and you can get a better arrangement.

2.. form-control form elements: commonly used for <input>, <textarea>, <select> elements

Alceholder properties: Add a hint to <input>

3.. form-inline inline form style (for form elements): You can arrange the elements in one row

4.. sr-only: For hiding elements

5. Radio-inline can make a group of radio boxes on the same row

6. Checkbox-inline you can make a set of check boxes on the same row

7. CheckBox check box style

8. Radio single Box style

9. Disable can disable the style of a radio box or check box

10. Help-block Help information (with the above spacing, the font color is lighter)

Introduction to the global style of CSS----raster system grid system

Bootstrap provides a responsive, mobile device-first streaming raster system

Bootstrap divide a container or entire page into 12 columns evenly

Bootstrap grid system consisting of one row (. row) and multiple columns

The grid system creates the layout of the page in the form of rows and columns, putting specific data into the column

Note: The raster system must be placed in the. Container and. Container-fluid

Grid system Parameters

col-xs-* Ultra Small Screen

col-sm-* small Screen

col-md-* Medium Screen

col-lg-* big screen

Simple application of grid system

Note: Columns with more than 12 columns are wrapped automatically

Column offset

This means: How much is a column to the right?

. col-md-offset-*

. col-md-offset-2//Specify bar 2 columns to the right the idea is to add a left margin

Column nesting

Nest a complete grid system in a column

8. Button style:

1, can be used as a BUTTON element:<a>, <input>, <button>

2. BTN: Global style of the button <input type= "button" class= "BTN" >

3. Predefined styles:. Btn-default,. Btn-primary,. Btn-info,. btn-waring,. Btn-danger,. Btn-link

4. Active button activation state,. Disabled button Disable style

5, Button size:. BTN-LG (large button),. BTN-SM (small button),. Btn-xs (small button)

6. Btn-block: Stretches the button to fill the entire parent element

Bootstrap table table, grid system, form form style