Bootstrap3 Get Started
Bootstrap3
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Originally, twitter inc. developed. This is useful to add design for web developer.
Get Started
Download
Download from Bootstrap web site and decompress.
This is composed of css, fonts, javascript
jQuery
bootstrap works with jquery.
You need to download jquery web site.
1.x, and 2.x works too.
And main sources are jqeury, bootstrap.js and bootstrap.min.css
<link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
CDN
Several servers in the world have javascript(jQuery, bootstrap etc…)
Google, MaxCDN, Microsoft Ajax content Delivery Network
You can use bootstrap and jquery of hosting version.
Container
This is template of bootstrap
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="ID=edge"> <meta name="viewport" content="width=devide-width, initial-scale=1.0"> <link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" style="border:dotted 1px #000"> <p>Contents</p> </div> <script src="bootstrap-3.2.0-dist/js/jquery-2.1.1.min.js"></script> <script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script> </body> </html>
I put jquery source in same directory as bootstrap.min.js
With Rails
The ref is other entry Bootstrap
Customization and Other Info
Bootstrap Customization
Less : Less
Sass : Sass, Github
Just Apply
This example is no container and no special setting.
Just only reading bootstrap related
<h1>h1<h1> <h2>h2<h2> <h3>h3<h3> <h4>h4<h4> <h5>h5<h5> <h6>h6<h6> <p>Body</p> <pre>Test</pre> <blockquote>Quote</blockquote> <code>printf("Hello!");</code>
Jumbotron
Jumbotron is one of theme in Bootstrap.
This is example bootstrap
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="ID=edge"> <meta name="viewport" content="width=devide-width, initial-scale=1.0"> <link href="../bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="jumbotron"> <h1><span class="glyphicon glyphicon-book"></span>First bootstrap3</h1> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert" ario-hidden="true">×</button> <p>Bootstrap3 Test</p> </div> </div> <script src="../bootstrap-3.2.0-dist/js/jquery-2.1.1.min.js"></script> <script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script> </body> </html>