Twitter bootstrap

Responsive design with Twitter
Bootstrap
Dennis De Cock

Who am I
• Dennis De Cock
Independent consultant :: Business Owner
• Programming PHP sinds 2003
• PHP / Zend Framework / Drupal / Magento

What to expect?
• Introduction
• Installation
• The basics
• Components
• Custom jQuery plugins
• Integration

Introduction
I’m a coder, not a designer.. So
help is appreciated…

Introduction
• Sleek, intuitive, and powerful front-end framework
for faster and easier web development.
• Quickly to set up
• IE7 support out of the box 

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 

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

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

Installation
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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>

Example layouts
• 8 starting layouts available on
http://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 columns
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">

</div>
<div class="span10">

</div>
</div>
</div>

• Offsetting columns
<div class="row">
<div class="span4">...</div>
<div class="span3 offset2">...</div>
</div>

• 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>

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">

The basics :: utility classes
• Quickly hide and show media query layout
items

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 …

The basics :: buttons
Add classes to the following
elements 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-hover
– .table-condensed

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-medium">

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 to
an <img> element:
– img-rounded
– img-circle
– img-polaroid

Components
BUTTON GROUP – DROPDOWNS –
NAVIGATIONAL TABS – PILLS – LISTS –
NAVBAR – LABELS – BADGES – HEADERS –
HERO UNIT – THUMBNAILS – ALERTS –
PROGRESS BARS – MODALS – DROPDOWNS –
TOOLTIPS – POPOVERS – ACCORDION –
CAROUSEL - TYPEAHEAD

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>

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>

• Fixed to the top: .navbar-fixed-top
• Fixed to the bottom: .navbar-fixed-bottom
• Place items on the right side: .pull-right

• Responsive navbar

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
</a>

<div class="nav-collapse collapse">

</div>

• Inverted version
<div class="navbar navbar-inverse">
...
</div>

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

Example plugin :: Tooltip
<a href="#" data-toggle="tooltip" title="first tooltip">hover over
me</a>
<script>
$(document).ready(function()
{
$(‘a*rel=tooltip+’).tooltip()
});
</script>

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 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

Thank you!
Dennis De Cock
dennis@decockict.be
Twitter: dennis_dc

Twitter bootstrap

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Twitter bootstrap

Similar to Twitter bootstrap (20)

Recently uploaded

Recently uploaded (20)

Twitter bootstrap