Twitter bootstrap

1,807
-1

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,807
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
64
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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.

×