Twitter bootstrap
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Twitter bootstrap

on

  • 1,990 views

 

Statistics

Views

Total Views
1,990
Views on SlideShare
1,989
Embed Views
1

Actions

Likes
0
Downloads
58
Comments
0

1 Embed 1

https://duckduckgo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Twitter bootstrap Presentation 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