1. Build a bootstrap development environment
1. Download bootstrap, http://www.bootcss.com/
2. Download jquery and access http://code.jquery.com/jquery-2.0.3.min.js directly through IE
3. Import bootstrap and jquery's js, css files, and .viewport's <meta> tags in the html page. This tag can be modified to display on most mobile devices, such as if lt IE 9..., for compatibility below ie9.
The template is as follows
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport" /><title>Insert title here</title><link href="css/bootstrap.min.css" rel="stylesheet" media="screen"><!--[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.3.0/respond.min.js"></script> <![endif]--><script src="js/jquery-2.0.3.min.js"></script><script src="js/bootstrap.min.js"></script></head><body> <div> </div></body></html>
II. Grid system
1. boostrap separates the desktop into a table with 12 rows * n columns for layout, which is the core of boostrap.
2. .row is used to divide the row-level and must be included under .container.
3. col-xx-* perform column-level division, as shown in the figure below
<div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </div> </div> </div> </div> </div> </div>
4. Column offset, implemented through col-xx-offset-*
<div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div>5</div> <div>6</div> <div>7</div> </div> </div> </div> </div> </div> </div>
5. Column sorting can be achieved by .col-xx-push-* and .col-xx-pull-* to implement left or right sorting of columns.
<div> <div> <div>1</div> <div>2</div> <div>3</div> </div> <div> <div>5</div> <div>6</div> <div>7</div> </div> </div> </div> </div> </div> </div>
6. Nesting columns and nest row in col.
<div> <div>1</div> <div>2</div> <div>3</div> <div> <div> <div> <div>5</div> <div>6</div> <div>7</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
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
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.