Twitter bootstrap

  • 1,463 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,463
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
58
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Responsive design with TwitterBootstrapDennis De Cock
  • 2. Who am I• Dennis De CockIndependent consultant :: Business Owner• Programming PHP sinds 2003• PHP / Zend Framework / Drupal / Magento
  • 3. Thank you
  • 4. What to expect?• Introduction• Installation• The basics• Components• Custom jQuery plugins• Integration
  • 5. Introduction
  • 6. IntroductionI’m a coder, not a designer.. Sohelp is appreciated…
  • 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. 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. 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/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. 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. Example layouts• 8 starting layouts available onhttp://twitter.github.io/bootstrap/getting-started.html#examples
  • 13. The basics• Grid system• Responsive features• Utility classes• Icons• Buttons• Tables• Forms• Images
  • 14. The basics :: grid system• 12 column grid• 940px fixed or fluid• Fully responsive
  • 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. The basics :: grid system• Offsetting columns<div class="row"><div class="span4">...</div><div class="span3 offset2">...</div></div>
  • 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. 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 layoutitems
  • 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. The basics :: buttonsAdd classes to the followingelements 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 toan <img> element:– img-rounded– img-circle– img-polaroid
  • 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. 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. 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. 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>
  • 32. Components :: navbar• Inverted version<div class="navbar navbar-inverse">...</div>
  • 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. Example plugin :: Tooltip<a href="#" data-toggle="tooltip" title="first tooltip">hover overme</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 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. Questions?
  • 40. Thank you!Dennis De Cockdennis@decockict.beTwitter: dennis_dc