This document provides an overview and introduction to using Twitter Bootstrap, an open source front-end web development framework. It discusses installing Bootstrap, the basic grid system and components it provides like buttons, forms, tables and navigation bars. It also covers customizing Bootstrap with themes and integrating it into various platforms like Drupal, Magento, Symfony and more. Useful links are provided for additional Bootstrap plugins, themes and integration modules.
7. Introduction
• Sleek, intuitive, and powerful front-end framework
for faster and easier web development.
• Quickly to set up
• IE7 support out of the box
8. Introduction
• Sleek, intuitive, and powerful front-end framework
for faster and easier web development design.
• Quickly to set up
• IE7 support out of the box
9. Introduction
• Open source
• Compiled via Node.js
• Responsive out of the box
(includes tablet and smartphones)
• Customizable in download
• Customizable with a theme roller
• Button generator
10. Installation
• Download from https://github.com/twitter/bootstrap
or use the compiled version directly from
http://twitter.github.io/bootstrap/assets/bootstrap.zip
or update composer.json with and run composer update
twitter/bootstrap
{
"require": {
"twitter/bootstrap": "2.3.*”
}
}
• Unzip the compressed folder into your project
• Link CSS and JS into your template / html page
18. The basics :: responsive features
• Enable with:
<meta name="viewport" content="width=device-width, initial-scale=1.0”>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
19. The basics :: utility classes
• Quickly hide and show media query layout
items
20. The basics :: icons
• Free sample library of glyphicons
full version is very good, available from glyphicons.com/
• Simple usage: add icon name to an <i> tag
• Can be used in combination with buttons, navbars …
21. The basics :: buttons
Add classes to the following
elements to quickly create buttons:
– <a>
– <button>
– <input>
22. The basics :: tables
• A set of different classes to style your tables:
– .table
– .table-striped
– .table-bordered
– .table-hover
– .table-condensed
23. The basics :: tables
• Extend your styling with optional row classes:
24. The basics :: forms
• Quickly change sizes with relative sizing:
<input class="input-medium" type="text" placeholder=".input-medium">
25. The basics :: forms
• Or with grid sizing:
<input class="span2" type="text" placeholder=".span2">
26. The basics :: images
• Quicly style your images by adding the following classes to
an <img> element:
– img-rounded
– img-circle
– img-polaroid
30. Components :: navbar
• Fixed to the top: .navbar-fixed-top
• Fixed to the bottom: .navbar-fixed-bottom
• Place items on the right side: .pull-right
31. Components :: navbar
• Responsive navbar
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
33. Custom jQuery plugins
• Plugins can be included individually or all at
once
• Both bootstrap.js and bootstrap.min.js
contain all plugins in a single file
34. Example plugin :: Tooltip
<a href="#" data-toggle="tooltip" title="first tooltip">hover over
me</a>
<script>
$(document).ready(function()
{
$(‘a*rel=tooltip+’).tooltip()
});
</script>
35. Example plugin :: typeahead
• With javascript:
$('.typeahead').typeahead()
• Works like jQuery autocomplete
• Autocomplete = off
36. Integration
• Use module for ZF2
• Tweme for Drupal
• Magento: DIY
• Symfony: http://bootstrap.braincrafted.com/
37. Theme’s
• Free theme’s available at bootswatch.com
• Paid themes available from wrapbootstrap.com
38. Useful links
• Full glyphicons in css
https://github.com/ericzhang-cn/full-glyphicons
• Zend Framework integration module
https://github.com/neilime/zf2-twb-bundle
• Integration with rails (slideshare)
http://www.slideshare.net/darbyfrey/twitter-bootstrap-
12087796