Bootstrap is a simple and flexible HTML5 and CSS3-based HTML5 and CSS3-based HTML, CSS, and JavaScript toolset for building WEB front-end pages. It has friendly learning curve, excellent compatibility, responsive design, 12 grid grids, style wizard documentation, custom JQuery plug-in, complete class library, based on Less and other features. Bootstrap makes web development faster and easier.
1.Bootstrap download
Official website: http://getbootstrap.com/; Getting started with beginners: http://getbootstrap.com/getting-started/
We can download Bootstrap and Bootstrap source code from the official website. If you don’t want to download, you can also use the CDN provided by Bootstrap.
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
└── glyphics-halflings-regular.woff2
3.Bootstrap's HTML standard template
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <!-- Run the latest rendering mode in IE --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Initialize mobile browsing display, width=device-width width is equal to the width of the mobile device, initial-scale=1 set the scaling scale--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap's HTML standard template</title> <!-- Introduce Bootstrap's core CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-- Your own style file --> <link href="css/your-style.css" rel="stylesheet"> <!-- The following two plugins are used to support HTML5 element and media queries in IE8 and below browsers. If you don't need it, you can remove it --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- Place it at the end of the document to make the page load faster--> <!-- If you want to use the js plugin of Bootstrap, you must first call jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- Including all js plugins for bootstrap or js plugins that can be used as needed --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>
4. Bootstrap title
Like ordinary HTML pages, Bootstrap defines titles using tags h1 to h6, but Bootstrap overrides its default style so that the effect it displays in all browsers is the same. The specific rules of the definition are shown in the following table:
<!--Title in Bootstrap --><h1>Title 1</h1><h2>Title 2</h2><!--Bootstrap uses the <small> tag to create subtitles --><h1>Title 1<small>Subtitle </small></h1><h2>Title 2<small>Subtitle </small></h2><!--Bootstrap allows non-title elements and titles to use the same style --><div>Title 1</div><div>Title 2</div><div>Title 3</div>
Note: The subtitle line heights are 1, font-weight is not bold, the color is gray (#999); the subtitles of h1~h3 are 65% of the title, and the subtitles of h4~h6 are 75% of the title; please refer to lines 407~443 in the bootstrap.css file for details.
5.Bootstrap content
1) Emphasize content
In actual projects, for some important texts, the parts that are expected to be highlighted will be treated in another style. Bootstrap also made some lightweight processing on this part.
By adding the class name ".lead" to highlight a paragraph p, its function is to increase the text font size, bold the text, and also deal with the line height and margin accordingly. The usage is as follows:
<p>Normal text</p>
<p>Empress text</p>
2) Express emphasis through color
For example:
<!--The normal text below is brown-->
<p>Normal text</p>
3) Bold and italics
Bold is used to use b-label or strong label; italic is used to use em-label or i-label.
<!--Bold--><p>Normal text<b>Bold</b>Normal text</p><p>Normal text<strong>Bold</strong>Normal text</p><!--Italic--><p>Normal text<em>Italic</em>Normal text</p><p>Normal text<i>Italic</i>Normal text</p>Normal text</p>
4) Text Alignment
Bootstrap controls the alignment style of text by defining four class names:
<p>I am on the left</p><p>I am on the center</p><p>I am on the right</p><p>I am aligned at both ends</p>
6.Bootstrap list
Bootstrap provides six forms of listing according to its usual usage: ordinary list, ordered list, point-description list, inline list, definition list, and horizontal definition list.
1) Normal list
<!--Normal List--><ul> <li>Normal List 1</li> <li>Normal List 2</li></ul>
2) Ordered list
<!--Sorted List--><ol> <li>Sorted List 1</li> <li>Sorted List 2</li></ol><!--Sorted List Nested--><ol> <li>Sorted List 1</li> <li>Sorted List 2 <ol> <li>Sorted List 2.1</li> <li>Sorted List 2.2</li> </li> </li> <li>Sorted List 3</li></ol>
3) Go to the list
Add a class name ".list-unstyled" to the unordered list, so that the default list style can be removed.
<ol> <li>Sorted List 1</li> <li>Sorted List 2</li></ol>
4) Inline list (born for making horizontal navigation)
Just like destined list, the inline list is implemented by adding the class name ".list-inline", swap the vertical list with a horizontal list, and remove the bullets (numbers) to maintain the horizontal display.
<ul> <li>Navigation bar entry 1</li> <li>Navigation bar entry 2</li></ul>
5) Definition list
The Bootstrap definition list simply adjusts the line spacing, margins and font bolding effects.
<dl> <dt>Beijing</dt> <dd>The capital of China. </dd> <dt>Shanghai</dt> <dd>National central city, megacity. </dd></dl>
6) Horizontal definition list
The horizontal definition list is like an inline list. Bootstrap can add the class name ".dl-horizontal" to the dl tag to achieve horizontal display effect.
<dl> <dt>Beijing</dt> <dd>The capital of China. </dd> <dt>Shanghai</dt> <dd>National central city, megacity. </dd></dl>
7.Bootstrap's table
Bootstrap provides tables with 1 basic style and 4 additional styles and a responsive table. The details are as follows:
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Basic Table</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body> <h3>Basic Table</h3> <!-- Main source code to view bootstrap.css file line 1402~line 1441--> <table> <thead> <tr><th>Table Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </table> <h3>Zebra Crossing Table</h3> <!-- Main Source Code View Bootstrap.css File Line 1465~Line 1468--> <table> <thead> <tr><th>Table Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </tbody> <tbody> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </table> <h3>Table with Border</h3> <!-- Main source code to view bootstrap.css file line 1450~line 1464--> <table> <thead> <tr><th>Table Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td></tr> </tr> </tbody> </tbody> <tr><td>Table Cell</td><td>Table Cell</td></tr> <tr><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </table> <h3>Mouse suspends the highlighted table</h3> <!-- Main source code to view bootstrap.css file line 1469~line 1472--> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th><th>Table title</th></tr> </tbody> <tbody> <tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table cell</td><td>Table cell</td></tr> </tbody> </table> <h3>Compact table</h3> <!-- The main source code sees the bootstrap.css file line 1442~line 1449--> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th></tr> </thead> <tbody> <ttr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> </tbody> </table> <h3>Responsive table</h3> <!-- Bootstrap provides a container with the class name .table-responsive. The table placed in this container has a responsive effect--> <div> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th></tr> </thead> <tbody> <ttr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table cell</td><td>Table cell</td></tr> </tbody> </table> </div></body></html>
This part of the code contains the commonly used tables in Bootstrap, and the renderings are as follows:
Bootstrap also provides five different class names for the row element tr of the table (for the corresponding source code, please check line 1484 to line 1583 in the bootstrap.css file). Each class name controls the different background colors of the rows. The specific description is shown in the following table:
It is very simple to use. You only need to add the corresponding class name of the above table to the element to achieve the effect:
<tr><td>…</td></tr>
Notice:
1. To achieve a suspended state, you need to add the table-hover class to the <table> tag.
2. In addition to ".active", when using the other four class names and ".table-hover", Bootstrap also makes corresponding style settings for these styles in the floating state. Therefore, if you need to add other color styles to the tr element, you must also make corresponding adjustments in the ".table-hover" table.
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
Series of articles:
The first time I came into contact with the magical Bootstrap grid system //www.VeVB.COM/article/89333.htm
The first time I came into contact with the magical Bootstrap form //www.VeVB.COM/article/89330.htm
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.