Boot Strap

What is Twitter Bootstrap?

Twitter Bootstrap is the most popular front end frameworks currently. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and JavaScript.
This tutorial will teach you basics of Bootstrap Framework using which you can create web projects with ease. Tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins.
More Reasons to Use Twitter Bootstrap :

1. Save Time
2. Customization
3. Factor in the design (Grid System. SASS, JavaScript )
4. Responsiveness
5. Browser support
6. integration.

Download Bootstrap :

You can download the latest version of Bootstrap from http://getbootstrap.com/.  after download the file structure looking like below 

Bootstrap File Structure :

 bootstrap/
  ├── css/
     ├── bootstrap.css
     ├── bootstrap.min.css
  ├── js/
     ├── bootstrap.js
     ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png
List of components in Bootstrap:



  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

12-column grid

Bootstrap provides a 12-column grid system. Your webpage layout depends on the grid classes that you apply to your divs.

For a simple two column layout, we are going to create a row [div with .row (or .row-fluid) class]. Then, add the desired number of columns [tags with appropriate .span* classes]. Note that numbers in .span* should always add up to 12 for each row (or the number of columns in the parent tag).

Basic HTML template
Now, here's a look at a typical HTML file:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. </head>
  7. <body>
  8. <h1>Hello, world!</h1>
  9. <script src="http://code.jquery.com/jquery.js"></script>
  10. </body>
  11. </html>


To make this a Bootstrapped template, just include the appropriate CSS and JS files:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <!-- Bootstrap -->
  7. <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8. </head>
  9. <body>
  10. <h1>Hello, world!</h1>
  11. <script src="http://code.jquery.com/jquery.js"></script>
  12. <script src="js/bootstrap.min.js"></script>
  13. </body>
  14. </html>
Previous
Next Post »