0
Responsive design with TwitterBootstrapDennis De Cock
Who am I• Dennis De CockIndependent consultant :: Business Owner• Programming PHP sinds 2003• PHP / Zend Framework / Drupa...
Thank you
What to expect?• Introduction• Installation• The basics• Components• Custom jQuery plugins• Integration
Introduction
IntroductionI’m a coder, not a designer.. Sohelp is appreciated…
Introduction• Sleek, intuitive, and powerful front-end frameworkfor faster and easier web development.• Quickly to set up•...
Introduction• Sleek, intuitive, and powerful front-end frameworkfor faster and easier web development design.• Quickly to ...
Introduction• Open source• Compiled via Node.js• Responsive out of the box(includes tablet and smartphones)• Customizable ...
Installation• Download from https://github.com/twitter/bootstrapor use the compiled version directly fromhttp://twitter.gi...
Installation<!DOCTYPE html><html><head><title>Bootstrap 101 Template</title><meta name="viewport" content="width=device-wi...
Example layouts• 8 starting layouts available onhttp://twitter.github.io/bootstrap/getting-started.html#examples
The basics• Grid system• Responsive features• Utility classes• Icons• Buttons• Tables• Forms• Images
The basics :: grid system• 12 column grid• 940px fixed or fluid• Fully responsive
• Usage columnsThe basics :: grid system<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar...
The basics :: grid system• Offsetting columns<div class="row"><div class="span4">...</div><div class="span3 offset2">...</...
The basics :: grid system• Nesting columns<div class="row"><div class="span12">Level 1 column<div class="row"><div class="...
The basics :: responsive features• Enable with:<meta name="viewport" content="width=device-width, initial-scale=1.0”><link...
The basics :: utility classes• Quickly hide and show media query layoutitems
The basics :: icons• Free sample library of glyphiconsfull version is very good, available from glyphicons.com/• Simple us...
The basics :: buttonsAdd classes to the followingelements to quickly create buttons:– <a>– <button>– <input>
The basics :: tables• A set of different classes to style your tables:– .table– .table-striped– .table-bordered– .table-ho...
The basics :: tables• Extend your styling with optional row classes:
The basics :: forms• Quickly change sizes with relative sizing:<input class="input-medium" type="text" placeholder=".input...
The basics :: forms• Or with grid sizing:<input class="span2" type="text" placeholder=".span2">
The basics :: images• Quicly style your images by adding the following classes toan <img> element:– img-rounded– img-circl...
ComponentsBUTTON GROUP – DROPDOWNS –NAVIGATIONAL TABS – PILLS – LISTS –NAVBAR – LABELS – BADGES – HEADERS –HERO UNIT – THU...
Components :: button group<div class="btn-group"><button class="btn">Left</button><button class="btn">Middle</button><butt...
Components :: navbar<div class="navbar"><div class="navbar-inner"><a class="brand" href="#">Title</a><ul class="nav"><li c...
Components :: navbar• Fixed to the top: .navbar-fixed-top• Fixed to the bottom: .navbar-fixed-bottom• Place items on the r...
Components :: navbar• Responsive navbar<!-- .btn-navbar is used as the toggle for collapsed navbar content --><a class="bt...
Components :: navbar• Inverted version<div class="navbar navbar-inverse">...</div>
Custom jQuery plugins• Plugins can be included individually or all atonce• Both bootstrap.js and bootstrap.min.jscontain a...
Example plugin :: Tooltip<a href="#" data-toggle="tooltip" title="first tooltip">hover overme</a><script>$(document).ready...
Example plugin :: typeahead• With javascript:$(.typeahead).typeahead()• Works like jQuery autocomplete• Autocomplete = off
Integration• Use module for ZF2• Tweme for Drupal• Magento: DIY• Symfony: http://bootstrap.braincrafted.com/
Theme’s• Free theme’s available at bootswatch.com• Paid themes available from wrapbootstrap.com
Useful links• Full glyphicons in csshttps://github.com/ericzhang-cn/full-glyphicons• Zend Framework integration modulehttp...
Questions?
Thank you!Dennis De Cockdennis@decockict.beTwitter: dennis_dc
Upcoming SlideShare
Loading in...5
×

Twitter bootstrap

1,695

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,695
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
62
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Twitter bootstrap"

  1. 1. Responsive design with TwitterBootstrapDennis De Cock
  2. 2. Who am I• Dennis De CockIndependent consultant :: Business Owner• Programming PHP sinds 2003• PHP / Zend Framework / Drupal / Magento
  3. 3. Thank you
  4. 4. What to expect?• Introduction• Installation• The basics• Components• Custom jQuery plugins• Integration
  5. 5. Introduction
  6. 6. IntroductionI’m a coder, not a designer.. Sohelp is appreciated…
  7. 7. Introduction• Sleek, intuitive, and powerful front-end frameworkfor faster and easier web development.• Quickly to set up• IE7 support out of the box 
  8. 8. Introduction• Sleek, intuitive, and powerful front-end frameworkfor faster and easier web development design.• Quickly to set up• IE7 support out of the box 
  9. 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. 10. Installation• Download from https://github.com/twitter/bootstrapor use the compiled version directly fromhttp://twitter.github.io/bootstrap/assets/bootstrap.zipor update composer.json with and run composer updatetwitter/bootstrap{"require": {"twitter/bootstrap": "2.3.*”}}• Unzip the compressed folder into your project• Link CSS and JS into your template / html page
  11. 11. Installation<!DOCTYPE html><html><head><title>Bootstrap 101 Template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet" media="screen"></head><body><h1>Hello, world!</h1><script src="http://code.jquery.com/jquery.js"></script><script src="js/bootstrap.min.js"></script></body></html>
  12. 12. Example layouts• 8 starting layouts available onhttp://twitter.github.io/bootstrap/getting-started.html#examples
  13. 13. The basics• Grid system• Responsive features• Utility classes• Icons• Buttons• Tables• Forms• Images
  14. 14. The basics :: grid system• 12 column grid• 940px fixed or fluid• Fully responsive
  15. 15. • Usage columnsThe basics :: grid system<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar content--></div><div class="span10"><!--Body content--></div></div></div>
  16. 16. The basics :: grid system• Offsetting columns<div class="row"><div class="span4">...</div><div class="span3 offset2">...</div></div>
  17. 17. The basics :: grid system• Nesting columns<div class="row"><div class="span12">Level 1 column<div class="row"><div class="span10">Level 2</div><div class="span2">Level 2</div></div></div></div>
  18. 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. 19. The basics :: utility classes• Quickly hide and show media query layoutitems
  20. 20. The basics :: icons• Free sample library of glyphiconsfull 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. 21. The basics :: buttonsAdd classes to the followingelements to quickly create buttons:– <a>– <button>– <input>
  22. 22. The basics :: tables• A set of different classes to style your tables:– .table– .table-striped– .table-bordered– .table-hover– .table-condensed
  23. 23. The basics :: tables• Extend your styling with optional row classes:
  24. 24. The basics :: forms• Quickly change sizes with relative sizing:<input class="input-medium" type="text" placeholder=".input-medium">
  25. 25. The basics :: forms• Or with grid sizing:<input class="span2" type="text" placeholder=".span2">
  26. 26. The basics :: images• Quicly style your images by adding the following classes toan <img> element:– img-rounded– img-circle– img-polaroid
  27. 27. ComponentsBUTTON GROUP – DROPDOWNS –NAVIGATIONAL TABS – PILLS – LISTS –NAVBAR – LABELS – BADGES – HEADERS –HERO UNIT – THUMBNAILS – ALERTS –PROGRESS BARS – MODALS – DROPDOWNS –TOOLTIPS – POPOVERS – ACCORDION –CAROUSEL - TYPEAHEAD
  28. 28. Components :: button group<div class="btn-group"><button class="btn">Left</button><button class="btn">Middle</button><button class="btn">Right</button></div><div class="btn-group btn-group-vertical">...</div>
  29. 29. Components :: navbar<div class="navbar"><div class="navbar-inner"><a class="brand" href="#">Title</a><ul class="nav"><li class="active"><a href="#">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul></div></div>
  30. 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. 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>
  32. 32. Components :: navbar• Inverted version<div class="navbar navbar-inverse">...</div>
  33. 33. Custom jQuery plugins• Plugins can be included individually or all atonce• Both bootstrap.js and bootstrap.min.jscontain all plugins in a single file
  34. 34. Example plugin :: Tooltip<a href="#" data-toggle="tooltip" title="first tooltip">hover overme</a><script>$(document).ready(function(){$(‘a*rel=tooltip+’).tooltip()});</script>
  35. 35. Example plugin :: typeahead• With javascript:$(.typeahead).typeahead()• Works like jQuery autocomplete• Autocomplete = off
  36. 36. Integration• Use module for ZF2• Tweme for Drupal• Magento: DIY• Symfony: http://bootstrap.braincrafted.com/
  37. 37. Theme’s• Free theme’s available at bootswatch.com• Paid themes available from wrapbootstrap.com
  38. 38. Useful links• Full glyphicons in csshttps://github.com/ericzhang-cn/full-glyphicons• Zend Framework integration modulehttps://github.com/neilime/zf2-twb-bundle• Integration with rails (slideshare)http://www.slideshare.net/darbyfrey/twitter-bootstrap-12087796
  39. 39. Questions?
  40. 40. Thank you!Dennis De Cockdennis@decockict.beTwitter: dennis_dc
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×