1: Introduction to Bootstrap
Boostrap is a very popular front-end development framework that greatly improves the development efficiency of front-end teams. Bootstrap completes the common CSS layout components and JavaScript plugins, making it easy for developers to use. Use Bootstrap to quickly create beautifully responsive pages and are compatible with mobile devices.
Two: Bootstrap features
Provide a complete set of CSS plug-ins, rich predefined style sheets, a set of jQuery-based JS plug-in tables. Flexible responsive grid deleting system. Mobile first-based development based on Less and Sass.
Three: Use Bootstrap
1. Step 1:
Download the latest bootstrap at http://www.bootcss.com/. After decompression, there are three folders, which place css, js and fonts respectively. There is a compressed version of CSS and JavaScript files, and you can choose a version according to your needs. Uncompressed version is used during development and compressed version is used during release.
2. Fixed template code display
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- IE=edge tells IE to use the latest engine to render web pages, and Chrome=1 can activate Chrome Frame --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above three meta tags *must* be placed in the front, and any other content *must* follow them! --><title>Bootstrap template style</title><!-- Introducing Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- Introducing HTML5 framework and respond.js to support IE8 and IE9. IE 8 requires the cooperation of Respond.js to achieve support for media queries. Respond.js can no longer run under file:// path file:// --><!-- [if lt IE 9] means that it takes effect in browsers below IE9--><!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--> </head><body><h1>Hello, world! </h1><!--Cite the jquery plugin at the bottom to achieve bootstrap dynamic effects --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!--Introducing bootsrp scripts --><script src="js/bootstrap.min.js"></script></body></html>
3. Basic usage:
3.1 Overall Framework-12 Grid System
The core of bootstrap is a 12-raster system. The 12 grid system divides the content area of the web page into 12 copies according to the width. Web developers can freely combine it in portions, which facilitates the layout of the web page and makes the layout look neat and standardized.
bootstarp provides a style container called container. container is an auto-centered, highly adaptive style. Using .container as the outermost div style of web page content can easily implement 12 grid web page layout. Moreover, this 12-grid system is adaptive to the screen size, and the .container will automatically adjust the total width and the average width of the grid according to the screen size.
col-lg-n Maximum column width 95px In case of >=1200px pixels, divide .container12 equally with width 95px per portion. The width of the rest is 100%
col-md-n Maximum width 78px; divide .container12 equally with >=992px pixels remaining 100%
col-sm-n Maximum column width 60px In case of >=768px pixels, divide .container12 equally with the rest of the cases 100%
col-xs-n column width is equal to the viewport size 12. Container 12 equal to the screen of any size
3.2 Basic styles
(1) Bootstrap's h1-h6 style has been cancelled bolding, and the upper and lower margins are redefined h1-h3 margin-top:20px; margin-bottom-10px; H3-h6 margin-top:10px; margin-bottom-10px;
(2) Define four alignment styles, namely .text-left, .text-center, .text-right, .text-justify .text-justify Both ends of English letters
(3) Bootstrap provides five default color styles, -primary key blue, -success success green, -info information blue-warning warning orange, -danger dangerous red
3.3btn component +btn-group
<button type="button" class="btn btn-primary">key button</button> alert component<div class="alert" class="alert alert-danger">danger warning</div>
General components have four sizes: ultra-small xs, small sm, ordinary, and large lg. Use the method is component name-size <button type="button" class="btn btn-lg">Ultra-large button</button> Different types of buttons of the same component can be used in combination.
<button type="button" class="btn btn-primary btn-lg">Ultra-large key button</button><!--btn-group--><div><button>Home</button><button>Second page</button><button>Page 2</button><button>Last page</button><div><button type="button" data-toggle="dropdown">Product list<span></span></button><ul><li>Lenovo</li><li>Asus</li><li>Apple</li></ul></div>
3.4table table style:
Add a div parent element to the table element, add class="table-responsive" to this div Create a corresponding table. When the viewport pixel is less than 768px, a horizontal scroll bar will appear.
<!--table, there are spaced colors between table-striped lists, table-responsive table adaptive--><div><table><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td><td>2</td></tr><tr><td>2</td></tr><tr><td>3</td><td>3</td><td>3</td></tr></table></div>
3.5Badge badge
<!--Badges Badges--><br/><a href="#" >Special care<span>42</span></a><br/>
3.6 Navigation bar
(1) Capsule navigation bar
<ul ><li><a href="#">Dynamic<span>42</span></a></li><li><a href="#">Profile</a></li><li><a href="#">Private message<span>3</span></a></li></ul>
(2) Label navigation bar
<!--Tag navigation menu--><ul><li><a href="#news1" data-toggle="tab">Company News</a></li><li><a href="#news2" data-toggle="tab">Industry News</a></li><li><a href="#news3" data-toggle="tab">Notices</a></li></ul><div><div id="news1"><ul><li>Company News</li></ul></div><div id="news2"><ul><li>Industry News</li></li></div><div id="news3"><ul><li>Notice Announcement</li><li>Notice Announcement</li><li>Notice Announcement</li></ul></div></div>
3.7 input-group
<!--input+button combination--><div><input type="text"><span><button>Search</button></span></div>
3.8 carousel
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap template style</title><link href="../css/bootstrap.min.css" rel="stylesheet"><style>body{background: #eee}.item{position: relative; height: 400px}.item img{ position: relative; width: 100%; height: 400px}.item p{position: absolute; top: 40%; width: 100%; color: #fff; }.item h1{position: absolute; top: 20%; width: 100%; color: #fff; text-align: center}@media (max-width: 768px) {.slide{ width: 100%}}</style><!--[if lt IE 9]><script src="../js/html5shiv.min.js"></script><script src="../js/respond.min.js"></script><![endif]--><script src="../js/jquery.min.js"></script><script src="../js/bootstrap.min.js"></script></head><body><div><div id="myCarousel" data-ride="carousel" ><!--Slide Navigation--><ol><li data-target="#myCarousel" data-slide-to="0"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><div style="height: 400px"><!--First slide --><div style="height: 400px" ><img data-holder-rendered="true" src="../images/Icon1.png" ><h1>Title content</h1><p>Paragraph content</p><!--Slide title--><div>Title 1</div></div><!--Second slide --><div ><img data-holder-rendered="true" src="../images/icon2.png"><div>Title2</div></div><!--Third slide--><div><img data-holder-rendered="true" src="../images/icon3.png"><div>Title3</div></div><!--Live-right navigation--><a href="#myCarousel" data-slide="prev"><span aria-hidden="true"></span><span>Previous</span></a><a href="#myCarousel" data-slide="next"><span aria-hidden="true"></span><span>Next</span></a></div></div><script>$(function(){$('#myCarousel').on('slide.bs.carousel', function () {// alert("callback function");});});</script></body></html>3.9 panel-group
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap instance- Tab page (Tab) plugin</title><link rel="stylesheet" href="../css/bootstrap.min.css"><script src="../js/jquery.min.js"></script><script src="../js/bootstrap.min.js"></script><body><div id="panel-group"><!--Panel content close--><div><div><h4><a data-toggle="collapse" data-parent="#panel-group" href="#collapseOne">panel title</a></h4></div><div id="collapseOne"><div>panel content</div></div><!--panel content open--><div><div><h4><a data-toggle="collapse" data-parent="#panel-group" href="#collapseTwo">panel title</a></h4></div><div id="collapseTwo"><div>panel content</div></div></div></body>
3.10 Media Query
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><title>Media query</title><style>div {width: 100%;height: 200px;background-color: red;}/*When the maximum palatable width is 980px, that is, the palatable <=980px internal style takes effect*/@media (max-width: 320px) {div {font-size: 10px;background: yellow;}}</style></head><body><div>Media Query</div></body><script>window.onresize = function (){var mydiv = document.getElementsByTagName("div")[0];mydiv.innerHTML = document.documentElement.clientWidth;}</script></html>Four: Things to note
1. container, col - - (raster), needs to be wrapped in a separate div, and then define other contents in it.
2. If you want to set the class or id that cannot be defined for the media query cannot be defined for the element and write the class or id of the definition col - - (raster) into a div,
Medio is the way to write class errors for defining media queries <div >aa</div>
The correct way to write it is
<div> <div >aa</div> </div>
3. If you use container to achieve height adaptation, you cannot add height to the element, and you should set overflow-hidden for its parent element.
4. After setting Position positioning for the element, the width of the element is 0. If you want the element to be centered, you need to add width:100%; text-align:center;
5. When using the input tag, if col - - (raster) is defined for its parent class, you can add form-control to input to set the size of the input as large as the parent class.