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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Twitter bootstrap

Semelhante a Twitter bootstrap (20)

Último

Último (20)

Twitter bootstrap