146
Twitter Bootstrap SIMPLIFYING WEB UI DESIGN MARK GU

Twitter Bootstrap 2.3.2

  • Upload
    mark-gu

  • View
    124

  • Download
    2

Embed Size (px)

DESCRIPTION

Mark Gu from SunGard is going to provide a quick introduction on Twitter Bootstrap (v2.3.2) and how it can be used to simplify web UI design, especially at the project startup time and during prototyping. He is also going to share his experience on using Twitter Bootstrap in conjunction with ASP.NET MVC components in real-world web applications.

Citation preview

Page 1: Twitter Bootstrap 2.3.2

Twitter BootstrapSIMPLIFYING WEB UI DESIGN

M A R K G U

Page 2: Twitter Bootstrap 2.3.2

What is Bootstrap?

Sleek, intuitive, and powerful front-end framework for faster and easier web development

Page 3: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 4: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Page 5: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<p>..</p>

font-size: 14pxline-height: 20px

Global Defaults

Page 6: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<p class=“lead”>..</p>

Page 7: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<small>..</small>

Page 8: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<strong>..</strong>

Page 9: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<em>..</em>

Page 10: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<p class=“text-left”>..</p>

Page 11: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<p class=“text-center”>..</p>

Page 12: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<p class=“text-right”>..</p>

Page 13: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<abbr>..</abbr>

Page 14: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<abbr class=“initialism”>..</abbr>

Page 15: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<address>..</address>

Page 16: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<blockquote>..</blockquote>

Page 17: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<ul> <li>..</li></ul>

Page 18: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<ol> <li>..</li></ol>

Page 19: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<ul class=“unstyled”> <li>..</li></ul>

Page 20: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<dl> <dt>..</dt> <dd>..</dd></dl>

Page 21: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<dl class=“dl-horizontal”> <dt>..</dt> <dd>..</dd></dl>

Page 22: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<code>..</code>

Page 23: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<pre>..</pre>

Page 24: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<table class=“table”>..</table>

Page 25: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<table class=“table table-striped”>..</table>

Page 26: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<table class=“table table-condensed”>..</table>

Page 27: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<table class=“table table-bordered”>..</table>

Page 28: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<input type=“text” placeholder=“Type something...”>

Page 29: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<select><option>...</option></select>

Page 30: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<textarea rows=“3”></textarea>

Page 31: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<label class=“checkbox”><input type=“checkbox” value=“”>...</label>

Page 32: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<label class=“radio”><input type=“radio” ...>...</label>

Page 33: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 34: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 35: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 36: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 37: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 38: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 39: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 40: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 41: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 42: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 43: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 44: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 45: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 46: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 47: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 48: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn”>..</button>

Page 49: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-primary”>..</button>

Page 50: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-info”>..</button>

Page 51: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-success”>..</button>

Page 52: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-warning”>..</button>

Page 53: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-danger”>..</button>

Page 54: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-inverse”>..</button>

Page 55: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-link”>..</button>

Page 56: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn disabled”>..</button>

Page 57: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-large”>..</button>

Page 58: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-small”>..</button>

Page 59: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<button class=“btn btn-mini”>..</button>

Page 60: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<a class=“btn”>..</a>

Page 61: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<input class=“btn” type=“button”>..</input>

Page 62: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<img class=“img-rounded”>

Page 63: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<img class=“img-circle”>

Page 64: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<img class=“img-polaroid”>

Page 65: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<i class=“icon-search”></i>

Page 66: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<i class=“icon-user”></i>

Page 67: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

<i class=“icon-star”></i>

Page 68: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 69: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 70: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

140 icons in sprite form, in dark gray and white

Page 71: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 72: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 73: Twitter Bootstrap 2.3.2

Basic CSS Typography

Code

Tables

Forms

Buttons

Images

Icons

Page 74: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 75: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 76: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 77: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 78: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 79: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 80: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 81: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 82: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 83: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 84: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 85: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 86: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 87: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 88: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 89: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 90: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 91: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 92: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 93: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 94: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 95: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 96: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

<span class="label">

<span class="label label-success">

<span class="label label-warning">

<span class="label label-important">

<span class="label label-info">

<span class="label label-inverse">

Page 97: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

<span class=“badge">

<span class="badge badge-success">

<span class="badge badge-warning">

<span class="badge badge-important">

<span class="badge badge-info">

<span class="badge badge-inverse">

Page 98: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 99: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 100: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 101: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 102: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 103: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 104: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 105: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

Page 106: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

<div class=“well">..</div>

Page 107: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

<button class=“close">&times;</button>

Page 108: Twitter Bootstrap 2.3.2

Components Button Groups

Dropdowns

Navs

Navbar & Breadcrumbs

Pagination

Labels & Badges

Thumbnails

Alerts

Progress Bars

Media Object

Misc

class=“pull-left" class=“pull-right"

class=“clear-fix"

Page 109: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 110: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 111: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 112: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 113: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 114: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 115: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 116: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 117: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 118: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 119: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 120: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 121: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 122: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 123: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 124: Twitter Bootstrap 2.3.2

JavaScript Transitions

Modal

Scrollspy

Tooltip

Popover

Button

Collapse

Carousel

Typeahead

Affix

Page 125: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 126: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 127: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 128: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 129: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 130: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 131: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Fluid Grid System uses % instead of px

Difference?

Page 132: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 133: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 134: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 135: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 136: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 137: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 138: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 139: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 140: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 141: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 142: Twitter Bootstrap 2.3.2

Scaffolding Grid System

Fluid Grid System

Layout

Responsive Design

Page 143: Twitter Bootstrap 2.3.2

Customization Bootstrap website allows you to choose or customize:

◦ components◦ jQuery plugins◦ accent colors◦ column widths for grid system◦ base font size, font family, and line height◦ basic control paddings, margins, backgrounds◦ etc.

You may also try various 3rd party theme rollers for Bootstrap

Page 144: Twitter Bootstrap 2.3.2

Bootstrap with ASP.NET MVC Bootstrap offers a large number of CSS classes

Developers may abuse some Bootstrap classes to solve style issues

It’s difficult to ensure style consistency in a large project

Use Display and Editor templates to wrap form controls and labels

Use HtmlHelper to create additional helpers for buttons, tables, alerts, etc.

Use Knockout.JS to create custom bindings that wrap jQuery plugins, e.g. modals, typeahead

Page 145: Twitter Bootstrap 2.3.2

http://getbootstrap.com/2.3.2

Page 146: Twitter Bootstrap 2.3.2

Questions?