Bootstrap (web front-end CSS framework)

Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster. It is written by the dynamic CSS language less.
Contents of the Bootstrap package

• Basic structure: Bootstrap provides a basic structure with a grid system, a link style, and a background.
• Css:bootstrap comes with the following features: Global CSS settings, defining basic HTML element styles, extensible class, and an advanced grid system.
• Component: Bootstrap contains more than 10 reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, and more.
• JavaScript plugin: Bootstrap contains more than 10 custom JQuery plugins. You can include all of the plugins directly, or you can include them individually.

Bootstrap Grid systems (grid system)

The grid system creates a page layout with a series of rows and columns containing content. The following is a list of how the Bootstrap grid system works:

• The row must be placed within the. Container class to obtain the appropriate alignment (alignment) and padding (padding).
• Use rows to create a horizontal group of columns.
• Content should be placed in a column, and only columns can be direct child elements of the row.
• Predefined grid classes, such as. Row and. Col-xs-4, can be used to quickly create a grid layout. The less hybrid class can be used for more semantic layouts.
• Columns create gaps between column contents by padding (padding). The padding is negative from the margin (margin) on the. Rows, which represents the row offsets for the first and last columns.
• The grid system is created by specifying the 12 available columns that you want to span. For example, to create three equal columns, use three. Col-xs-4.

For example:
<div class= "Container" >
<div class= "Row" >
<div class= "col-*-*" ></div>
<div class= "col-*-*" ></div>
</div>
<div class= "Row" >...</div>
</div>

Offset column

Offset is a useful feature for a more professional layout. They can be used to make more room for the column. For example, the. col-xs=* class does not support offsets, but they can be implemented simply by using an empty cell. In order to use offsets on large-screen displays, use the . col-md-offset-* class. These classes increase the left margin (margin) of a column by the column, where the * range is from 1 to one.

In the following example, we have <div class= "col-md-6"; </div> We will use the . col-md-offset-3 class to center this div:

<div Class="Container"> Hello, world!. <div Class="Row" > <div Class="Col-xs-6 col-md-offset-3" style= "background< Span class= "pun" >-color:  #dedef8; Box-shadow:  inset 1px - 1px 1px  #444, inset-1px 1px 1px #444;  "> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div></div></DIV>        

Nested columns

In order to nest the default grid in the content, add a new . Rowand add a set of . col-md-* columns within an existing . col-md-* column. Rows that are nested should contain a set of columns that cannot exceed 12 (in fact, you do not have to fill 12 columns).

In the following example, the layout has two columns, and the second column is divided into two rows of four boxes:

<div Class="Container"> Hello, world!. <div Class="Row"> <div Class="Col-md-3" Style="Background-Color: #dedef8; Box-shadow:Inset1px -1px 1px #444, inset-1px 1px 1px #444;"> First column <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div Class="Col-md-9" Style="Background-Color: #dedef8; Box-shadow:Inset1px -1px 1px #444, inset-1px 1px 1px #444;"> Second column-Divided into four boxes <div Class="Row"> <div Class="Col-md-6" Style="Background-Color: #B18904;Box-Shadow:Inset1px -1px 1px #444, inset-1px 1px 1px #444;"> <p>Consectetur Art party Tonx culpa semiotics.</p> </div> <div Class="Col-md-6" Style="Background-Color: #B18904;Box-Shadow:Inset1px -1px 1px #444, inset-1px 1px 1px #444;"> <p>sed do eiusmod tempor incididunt ut labore et dolore magna Aliqua.</p> </div> </div> <div Class="Row"> <div Class="Col-md-6" Style="Background-Color: #B18904;Box-Shadow:Inset1px -1px 1px #444, inset-1px 1px 1px #444;"> <p>Quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div Class="Col-md-6" Style="Background-Color:  #B18904;  Box-shadow: inset 1px-1px 1px #444, inset-1px 1px 1px #444;  "> <p>lorem ipsum dolor sit amet</p> </div>  </div> </div>  </div></DIV>    

Bootstrap (web front-end CSS framework)