An introduction to bootstrap
- 1. An Introduction To Bootstrap By: Jai Shrivastav
- 2. Topics • Bootstrap Introduction • Scaffolding • CSS • Layout Component 2
- 3. Bootstrap Introduction • Bootstrap was released in August 2011 by Twitter. • It is an open source product, developed by Mark Otto and Jacob Thornton. • It was developed to standardize the frontend toolsets of engineers across the company. • Most exciting feature of bootstrap is that it allows to build responsive web designs. • The websites like Toyota.com,Appsetter, Quicklinkr & many more are designed using bootstrap. 3
- 4. Bootstrap Scaffolding • File Structure • Grid System • Layout • Responsive Design 4
- 5. File Structure • File Structure of Bootstrap: – bootstrap/ – css/ » bootstrap.css » bootstrap.min.css – js/ » bootstrap.js » bootstrap.min.js – img/ » glyphicons-halflings.png » glyphicons-halflings-white.png – README.md 5
- 6. • To use bootstrap we include the link to the CSS stylesheet and the JavaScript: <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> 6
- 7. Grid System • Grid can be of two types: – Fixed Grid – Fluid Grid • The default (fixed) Bootstrap grid system utilizes 12 columns, making for a 940px-wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px or 1170px wide, depending on your viewport. • An example of the 12 possible columns is in below given figure. 7
- 8. • To create a simple layout, create a container with a <div> that has a class of .row and add the appropriate amount of .span* columns. Since we have a 12-column grid, we just need the amount of .span* columns to equal 12. 8
- 9. <div class="row"> <div class="span8">...</div> <div class="span4">...</div> </div> • Nesting Columns: To nest your content with the default grid, inside of a .span*, simply add a new .row with enough .span* that it equals the number of spans of the parent container 9
- 10. <div class="row"> <div class="span9"> Level 1 of column <div class="row"> <div class="span6">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div> 10
- 11. • Fluid Grid System: The fluid grid system uses percentages instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices. You can make any row “fluid” by changing .row to .row-fluid. • Nesting Fluid Grid: It is slightly different <div class="row-fluid"> <div class="span8"> <div class="row"> <div class="span6">...</div> <div class="span6">...</div> </div> </div> </div> 11
- 12. Container Layouts • To add a fixed-width, centered layout to your page, simply wrap the content in <div class="container">...</div>. • If you would like to use a fluid layout but want to wrap everything in a container, use the following: <div class="container-fluid">...</div>. 12
- 13. Responsive Design • Responsive design is a method for taking all of the existing content that is on the page and optimizing it for the device that is viewing it. • To target these different widths, Bootstrap uses CSS media queries to measure the width of the browser viewport and then, using conditionals, changes which parts of the stylesheets are loaded. Using the width of the browser viewport, Bootstrap can then optimize the content using a combination of ratios or widths, but it mostly relies on min-width and max-width properties. 13
- 14. • To turn on the responsive features of Bootstrap, you need to add a <meta> tag to the <head> of your web page. If you haven’t downloaded the compiled source, you will also need to add the responsive CSS file. An example of required files looks like this: <!DOCTYPE html> <html> <head> <title>My amazing Bootstrap site!</title> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <link href="/css/bootstrap.css" rel="stylesheet"> <link href="/css/bootstrap-responsive.css" rel="stylesheet"> </head> 14
- 15. Bootstrap CSS • It provide styles for common HTML elements like typography, code, tables, forms, buttons & plus includes Glyphicons, icon set. • For example, it provide four classes to style a table: .table-striped, .table-bordered, .table-hover, and .table- condensed. 15
- 16. Bootstrap Layout Component • Bootstrap provides a toolkit of flexible components that can be used in designing application interfaces, web features, and more. • Dropdown Menus: The following code creates a basic dropdown menu: <ul class="dropdown-menu" role="menu" aria- labelledby ="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> 16
- 17. • Button Groups: class=‘btn-group’ • Navigation Elements : class=‘nav’ • Pagination: class=‘pagination’. 17