Post on 27-Jan-2015
description
Twitter BootstrapSIMPLIFYING WEB UI DESIGN
M A R K G U
What is Bootstrap?
Sleek, intuitive, and powerful front-end framework for faster and easier web development
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<p>..</p>
font-size: 14pxline-height: 20px
Global Defaults
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<p class=“lead”>..</p>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<small>..</small>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<strong>..</strong>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<em>..</em>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<p class=“text-left”>..</p>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<p class=“text-center”>..</p>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<p class=“text-right”>..</p>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<abbr>..</abbr>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<abbr class=“initialism”>..</abbr>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<address>..</address>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<blockquote>..</blockquote>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<ul> <li>..</li></ul>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<ol> <li>..</li></ol>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<ul class=“unstyled”> <li>..</li></ul>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<dl> <dt>..</dt> <dd>..</dd></dl>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<dl class=“dl-horizontal”> <dt>..</dt> <dd>..</dd></dl>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<code>..</code>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<pre>..</pre>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<table class=“table”>..</table>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<table class=“table table-striped”>..</table>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<table class=“table table-condensed”>..</table>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<table class=“table table-bordered”>..</table>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<input type=“text” placeholder=“Type something...”>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<select><option>...</option></select>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<textarea rows=“3”></textarea>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<label class=“checkbox”><input type=“checkbox” value=“”>...</label>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<label class=“radio”><input type=“radio” ...>...</label>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-primary”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-info”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-success”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-warning”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-danger”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-inverse”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-link”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn disabled”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-large”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-small”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<button class=“btn btn-mini”>..</button>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<a class=“btn”>..</a>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<input class=“btn” type=“button”>..</input>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<img class=“img-rounded”>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<img class=“img-circle”>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<img class=“img-polaroid”>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<i class=“icon-search”></i>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<i class=“icon-user”></i>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
<i class=“icon-star”></i>
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
140 icons in sprite form, in dark gray and white
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Basic CSS Typography
Code
Tables
Forms
Buttons
Images
Icons
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
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">
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">
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
<div class=“well">..</div>
Components Button Groups
Dropdowns
Navs
Navbar & Breadcrumbs
Pagination
Labels & Badges
Thumbnails
Alerts
Progress Bars
Media Object
Misc
<button class=“close">×</button>
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"
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
JavaScript Transitions
Modal
Scrollspy
Tooltip
Popover
Button
Collapse
Carousel
Typeahead
Affix
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Fluid Grid System uses % instead of px
Difference?
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
Scaffolding Grid System
Fluid Grid System
Layout
Responsive Design
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
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
Questions?