First contact with the Magic Bootstrap basic typography _javascript skills

Bootstrap is a simple, flexible, HTML5 and CSS3 set of HTML, CSS, and JavaScript tools for building Web front-end pages based on Twitter. Has a friendly learning curve, excellent compatibility, responsive design, 12 grid, Style wizard documents, custom jquery plug-ins, complete class library, based on less features. Bootstrap makes web development faster and simpler.

1.Bootstrap Download

Official website: http://getbootstrap.com/Beginner: http://getbootstrap.com/getting-started/

We can download to Bootstrap,bootstrap's source code in the official website, if do not want to download, also can use Bootstrap to provide CDN.

2.BOOTSTRAP file Structure
bootstrap/
├──css/
│├──bootstrap.css
│├──bootstrap.css.map
│├──bootstrap.min.css
│├──bootstrap.min.css.map
│├──bootstrap-theme.css
│├──bootstrap-theme.css.map
│├──bootstrap-theme.min.css
│└──bootstrap-theme.min.css.map
├──js/
│├──bootstrap.js
│└──bootstrap.min.js
└──fonts/
├──glyphicons-halflings-regular.eot
├──glyphicons-halflings-regular.svg
├──glyphicons-halflings-regular.ttf
├──glyphicons-halflings-regular.woff
└──glyphicons-halflings-regular.woff2

3.Bootstrap HTML Standard template

<!  DOCTYPE html>  

Title of 4.Bootstrap

As with normal HTML pages, the bootstrap definition title is also used to H1 to H6, except that Bootstrap overrides its default style so that it displays the same effect in all browsers, with specific rules defined as shown in the following table:

<!--bootstrap title-->
 
 

Note: the subtitle row height is 1,font-weight not bold, color is gray (#999), h1~h3 subtitle, 65%,h4~h6 subtitle size title, size 75% , see line No. 407 ~ No. 443 of the Bootstrap.css file for detailed code.

5.Bootstrap of content

1) Emphasis on content

In the actual project, for some important text, the part that you want to highlight will do another style processing. Bootstrap has also done some lightweight processing on this part.

By adding the class name ". Lead" to let a paragraph p highlight, its role is to increase the text font size, bold text, and the row height and margin also do the corresponding processing. Usage is as follows:

<p> Plain Text </p>
<p class= "Lead" > Accent text </p>

2) by color to express emphasis

For example:
<!--plain text below is brown-->
<p class= "Text-danger" > Plain text </p>

3 Bold and italic

Bold is implemented using a B tag or a strong tag, and italic is implemented using an EM tag or an I tag.

<!--bold-->
<p> Plain text <b> bold </b> plain text </p>
<p> general text <strong> Bold </ Strong> Plain Text </p>

<!--italic-->
<p> Plain text <em> italic </em> normal text </p>
<p > Plain Text <i> italic </i> Plain Text </p>

4) Text alignment

Bootstrap controls the alignment style of text by defining four class names:

<p class= "Text-left" > I left </p>
<p class= "Text-center" > I center </p>
<p class= " Text-right "> I ju right </p>
<p class=" text-justify "> I justify </p>

List of 6.Bootstrap

Bootstrap provides a list of six forms based on the usual usage: a plain list, an ordered list, a list of points, an inline list, a definition list, and a horizontal definition list.

1) General List

<!--plain list-->
<ul>
 <li> plain list 1</li>
 <li> plain list 2</li>
</ul >

2) ordered list

<!--sequence table-->
<ol>
 <li> sequence table 1</li>
 <li> sequence table 2</li>
</ol>
<!--ordered list nesting-->
<ol>
 <li> sequence table 1</li>
 <li> sequence table 2
 <ol>
 <li> sequence table 2.1</li>
 <li> sequential table 2.2</li>
 </ol>
 </li>
 <li> Sequential table 3</li>
</ol>

3) Go to the point list

Add a class name ". List-unstyled" to the unordered list so that you can remove the default style of the list style.

<ol class= "list-unstyled" >
 <li> Sequential table 1</li>
 <li> sequential table 2</li>
</ol >

4 Inline list (for making horizontal navigation)

Like going to a point list, you can implement an inline list by adding the class name ". List-inline", replacing the vertical list with a horizontal list, and dropping the bullets (numbers) to keep the horizontal display.

<ul class= "List-inline" >
 <li> navigation bar entry 1</li>
 <li> navigation bar entry 2</li>
</ul >

5) Definition List

The bootstrap definition list just adjusts the line spacing, the outer margin, and the font bold effect.

<dl>
 <dt> Beijing </dt>
 <dd> China's capital. </dd>
 <dt> Shanghai </dt>
 <dd> National Center City, Super Big city. </dd>
</dl>

6) Horizontal Definition list

The horizontal definition list is like an inline list, and bootstrap can add the class name ". Dl-horizontal" to the DL tag to achieve a horizontal display of the definition list.

<DL class= "Dl-horizontal" >
 <dt> Beijing </dt>
 <dd> China's capital. </dd>
 <dt> Shanghai </dt>
 <dd> National Center City, Super Big city. </dd>
</dl>

7.Bootstrap of Table

Bootstrap provides 1 basic styles and 4 additional styles and 1 support-responsive tables for tables. Specifically as follows:

<! DOCTYPE html>  

This part of the code contains the bootstrap tables that are commonly used, as shown in the following illustration:

Bootstrap also provides five different class names for the row element tr for the table (for the source code, see line 1484th ~ 1583th in the Bootstrap.css file), each class name controls the different background colors of the row, as shown in the following table:

It is very simple to use, just add the corresponding class name to the table in the element to achieve the effect:

<TR class= "Active" ><td>...</td></tr>

Attention:
1. To achieve the suspension state, you need to add the Table-hover class to the <table> label.
2. In addition to ". Active", the other four class names and ". Table-hover" are used in conjunction with the bootstrap style settings for these styles, so if you need to add additional color styles to the TR element, in the. table-hover "The table should also be adjusted accordingly."

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

Series of articles:

First contact with the magical bootstrap grid system http://www.jb51.net/article/89333.htm

First contact with the magical bootstrap form http://www.jb51.net/article/89330.htm

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.