Your SlideShare is downloading. ×

Introduction to Twitter's Bootstrap 2

•

Nov. 11, 2012

• •

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Introduction to Twitter’s
Bootstrap

 by @julienrenaux @eBay

What is Bootstrap?
 UI framework (set of JavaScript, CSS, and images)
 Open Source project
 Supports HTML5 and CS...

What is Bootstrap?
 Creators

 Figures (November 2012)
 39,912 star
 9,808 fork
 5,571 close...

Bootstrap Features: Grid System

 960 Grid System http://960.gs/
 Blue Print CSS http://www.blueprintcss.org/
 ...

Bootstrap Features: Grid System
 Examples

Bootstrap Features: Components (CSS)
 Buttons:

 Tabs:

 Breadcrumb:

 Pagination:

 Alerts:

 Progress ...

Bootstrap Features: JavaScript

Bootstrap Features: Customization
 CSS Components

Bootstrap Features: Customization
 JavaScript (JQuery)

 JavaScript (Mootools)
http://anutron.github.com/moot...

Bootstrap Features: Customization
 CSS variables (Less)

 http://lesscss.org

Bootstrap Features: Customization

Bootstrap Features: Customization

Bootstrap Features: Customization

Why using Bootstrap?: Great Features
 Grid System
 Dozens of CSS components
 JavaScript plugins
 Web-based Cus...

Why using Bootstrap?: Live mockups

Why using Bootstrap?: Live mockups

Why using Bootstrap?: Live mockups

Why using Bootstrap?: Live mockups
 Easy creation of proof of concept
 Ability to gather alpha testers feedbacks ear...

Why using Bootstrap?: Responsive Design
 What is it?

Why using Bootstrap?: Responsive Design
 Multi platform support (Mobile phones, Tablets,
laptops large screens)
 ...

Why using Bootstrap?: Summary
 Great Features
 Responsive Design
 Live mockups
 Big community

Built with Bootstrap: Joomla 3.0

Built with Bootstrap: Viadeo

Built with Bootstrap: SlideShare

 http://www.slideshare.net/julienrenaux

Thanks

Questions?

 Bootstrap repository: http://github.com/twitter/bootstrap
 Bootstrap showcase: http://twitter....

Introduction to Twitter's Bootstrap 2

Introduction to Twitter's Bootstrap 2

Introduction to Twitter's Bootstrap 2

Next SlideShares

Upcoming SlideShare

Bootstrap Introduction

Bootstrap Introduction

Loading in …3

×

Check these out next

Introduction to Bootstrap

Introduction to Bootstrap: Design for Developers

Bootstrap 4 n00bz

Laurence Bradford

Bootstrap 3 + responsive

Building a Moodle theme with bootstrap

Introduction to Bootstrap

Collaboration Technologies

Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step

Bootstrap Creative

Introduction to Twitter's Bootstrap 2

Nov. 11, 2012

• •

Download to read offline

Presentation I made @eBay Shanghai.
1. Bootstrap Features
2. Why using Bootstrap
3. Built with Bootstrap

Software Engineer at Toptal

Presentation I made @eBay Shanghai.
1. Bootstrap Features
2. Why using Bootstrap
3. Built with Bootstrap

More Related Content

Introduction to Bootstrap

Introduction to Bootstrap: Design for Developers

Bootstrap 4 n00bz

Laurence Bradford

Bootstrap 3 + responsive

Building a Moodle theme with bootstrap

Introduction to Bootstrap

Collaboration Technologies

Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step

Bootstrap Creative

Responsive Web Design with Bootstrap

Bootstrap [part 1]

Ghanshyam Patel

Twitter bootstrap

Introduction To Bootstrap

Bootstrap tutorial

Refreshing Your UI with HTML5, Bootstrap and CSS3

Introduce Bootstrap 3 to Develop Responsive Design Application

Bootstrap 5 whats new

Twitter bootstrap tutorial

What is New in Bootstrap 5?

Bootstrap PPT by Mukesh

Introduction to Bootstrap

Introduction to Bootstrap: Design for Developers

Bootstrap 4 n00bz

Laurence Bradford

Bootstrap 3 + responsive

Building a Moodle theme with bootstrap

Introduction to Bootstrap

Collaboration Technologies

Bootstrap 3 training

Design for Developers: Introduction to Bootstrap 3

Bootstrap 3 Basic - Bangkok WordPress Meetup

Woratana Perth Ngarmtrakulchol

Efficient, maintainable CSS

Twitter Bootstrap for web UI development

Infinity Levels Studio

Twitter bootstrap (css, components and javascript)

NexThoughts Technologies

Presentation on Bootstrap Course

Bapu Graphics India

Bootstrap Study Share

Bootstrap grids

Webtech Learning

HTML5 Quick Start

Microsoft Developer Network (MSDN) - Belgium and Luxembourg

Design patterns revisited with PHP 5.3

Fabien Potencier

Bootstrap Framework

Yaowaluck Promdee

HTML & CSS #10 : Bootstrap

Object Oriented CSS

Nicole Sullivan

Bootstrap 3 vs. bootstrap 4

Ahmad Awsaf-uz-zaman

Responsive Design

Bootstrap 3 training

Design for Developers: Introduction to Bootstrap 3

Bootstrap 3 Basic - Bangkok WordPress Meetup

Woratana Perth Ngarmtrakulchol

Efficient, maintainable CSS

Twitter Bootstrap for web UI development

Infinity Levels Studio

Twitter bootstrap (css, components and javascript)

NexThoughts Technologies

Sindh Madresatul Islam University

Twitter Bootstrap Presentation

Twitter Bootstrap

BootStrap_1_Introduction

Gausvami Divyeshpuri Vallabhpuri

State of modern web technologies: an introduction

Bootstrap for Beginners

Presentation of bootstrap

Front End Development for Back End Developers - vJUG24 2017

Front End Development for Back End Java Developers - NYJavaSIG 2019

Create Responsive Website Design with Bootstrap 3

RWD - Bootstrap

Jasvinder Singh

Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)

Guust Nieuwenhuis

HTML5 and Joomla! 2.5 Template

Marvelic Engine Co., Ltd.

Front End Development for Backend Developers - GIDS 2019

The A to Z of Building a Responsive SharePoint Site with Bootstrap

AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?

Andrew Barickman

FITC - Bootstrap Unleashed

Bootstrap vs Foundation version 4

Bootstrap seminar presentation

PratikDoiphode1

Workshop HTML5+PhoneGap by Ivano Malavolta

Commit University

Sindh Madresatul Islam University

Twitter Bootstrap Presentation

Twitter Bootstrap

BootStrap_1_Introduction

Gausvami Divyeshpuri Vallabhpuri

State of modern web technologies: an introduction

Bootstrap for Beginners

SHOPEE CATALOGUE AUTOMATOR.pptx

Python - Basic Introduction

Osvaldo Santana Neto

Commitments and Chaos

Anna Marie Clifton

How To Automate a Cloud Compliance Platform_.pdf

Azure Synapse LInk

CISSP (Updated)_Certificate of Achievement.pdf

Oracle Integration Cloud – Pragmatic approach to integrations

Google Sites and Digital Portfolios.pptx

Aj Kritsada Sriphaew

online-systems-functions-and-platforms.pptx

IldioIncioTsambo

ASUS ProArt Studiobook 16 OLED

5G The Quick Guide I need.pdf

Abari Rasheed O (ITIL)

Logo and Business Card Feedback

Dare To Be Presentation

intro to git github.pdf

DikshantSharma63

TharinduNirushan

BoilingFrogs - Rozterki i decyzje. Czego się nauczyliśmy projektując API Syliusa

Łukasz Chruściel

БИМПРО - создание информационных моделей BIM

Adiwijaya for SNTIKI UIN SUSKA 26 Oktober 2022 .pdf

ELSAHARMANIOLASISTEM

RFID in libraries

Benefits of android app development.pdf

Seasia Infotech

SHOPEE CATALOGUE AUTOMATOR.pptx

Python - Basic Introduction

Osvaldo Santana Neto

Commitments and Chaos

Anna Marie Clifton

How To Automate a Cloud Compliance Platform_.pdf

Azure Synapse LInk

CISSP (Updated)_Certificate of Achievement.pdf

Introduction to Twitter's Bootstrap 2

1. Introduction to Twitter’s Bootstrap  by @julienrenaux @eBay
2. What is Bootstrap?  UI framework (set of JavaScript, CSS, and images)  Open Source project  Supports HTML5 and CSS3  Supported by all major browsers (even IE7!!!)  Released in August 2011
3. What is Bootstrap?  Creators  Figures (November 2012)  39,912 star  9,808 fork  5,571 closed issues
4. Bootstrap Features: Grid System  960 Grid System http://960.gs/  Blue Print CSS http://www.blueprintcss.org/  Golden Grid System http://goldengridsystem.com/
5. Bootstrap Features: Grid System  Examples
6. Bootstrap Features: Components (CSS)  Buttons:  Tabs:  Breadcrumb:  Pagination:  Alerts:  Progress bar:
7. Bootstrap Features: JavaScript
8. Bootstrap Features: Customization  CSS Components
9. Bootstrap Features: Customization  JavaScript (JQuery)  JavaScript (Mootools) http://anutron.github.com/mootools-bootstrap
10. Bootstrap Features: Customization  CSS variables (Less)  http://lesscss.org
11. Bootstrap Features: Customization
12. Bootstrap Features: Customization
13. Bootstrap Features: Customization
14. Why using Bootstrap?: Great Features  Grid System  Dozens of CSS components  JavaScript plugins  Web-based Customizer
15. Why using Bootstrap?: Live mockups
16. Why using Bootstrap?: Live mockups
17. Why using Bootstrap?: Live mockups
18. Why using Bootstrap?: Live mockups  Easy creation of proof of concept  Ability to gather alpha testers feedbacks early in the project without doing any code (Agile)  HTML scaffolding ready to use by developers (copy – past)
19. Why using Bootstrap?: Responsive Design  What is it?
20. Why using Bootstrap?: Responsive Design  Multi platform support (Mobile phones, Tablets, laptops large screens)  100% CSS (using Media Types: @media)
21. Why using Bootstrap?: Summary  Great Features  Responsive Design  Live mockups  Big community
22. Built with Bootstrap: Joomla 3.0
23. Built with Bootstrap: Viadeo
24. Built with Bootstrap: SlideShare  http://www.slideshare.net/julienrenaux
25. Thanks Questions?  Bootstrap repository: http://github.com/twitter/bootstrap  Bootstrap showcase: http://twitter.github.com/bootstrap

Editor's Notes

My name is Julien, I am a Software Engineer @eBay and I am here to present an introduction to Twitter’s Bootstrap.
Bootstrap is what we call a UI framework. It contains a set of JavaScript, CSS, and images that helps you create quick, clean and highly usable applications .
Bootstrap is using a grid system base on 12 columns. What is a grid system? A grid system is a way to create a solid foundation to build your project on.If you want your web application to have a left navigation you could design your HTML using row number 3If you do not want any navigation and you want your content to be as wide as possible then you could use row number 5This grid design was popularized by 960 grid system http://960.gs and BluePrint http://www.blueprintcss.org
If you want to implement you application with a left navigation here is the HTML required.You also can nest your columns within columns.
Here is a list of some of the CSS component available. There are dozens of them available with bootstrap.
Bootstrap gives life to its UI by using Jquery plugins. Here are some examples of great Elements. Once again you have access dozens of them for free.
Bootstrap provides a web-based customizer that allow you to generate a CSS file based on your specific needs.
Same for the JavaScript plugins. For Mootools fans you can find a Mootools version here: http://anutron.github.com/mootools-bootstrap
Bootstrap also provides a way to generate a completely unique version of the CSS using LESS. I will not be talking about Less, all you need to know for now is that it compiles a LESS version of your CSS where you can define variables and nest CSS selectors.If you want more information please check http://lesscss.org/ out.
Now that you know about LESS, it is easily understandable that we can create totally different visuals based on the same HTML. Here are some good example
http://bootswatch.com
http://bootswatch.com
Now I will explain why using Bootstrap is a good choice.
Bootstrap has great features. We have just reviewed some of them and I am sure you already feel the potential this project has.Let’s summarize it. Bootstrap:Has Grid System => Allow you to create you web application scaffoldingContains dozens of CSS components => Allow you to create great UIIs powered by JavaScript plugins => Gives life to the CSS UICan be customized by using a web based customizer
Bootstrap is good to create live mockups (prototypes) Here is how mockups used to look like. I am sure some of you here are still using Balsamiqmockups, it a great tool but beside having a proof of concept you cannot do much with it. http://www.balsamiq.com/products/mockups
Here is what a mockup could look like when using Bootstrap.
Easy creation of proof of concept => To answer the question Is it doable?Gather early Feedbacks => To answer the questions: Is it good? Is it Viable? In your project you want to know as early as possible if a idea is not viable or not. If it is not good you want to fail fast (Agile kind of approach)One you have done all the research and the tests you can guide the execution of more sophisticated designs and larger engineering efforts.
It is the ability to resize the content of your web page to any device and screen size.
Bootstrap handle responsive design very well and it is a pretty neat feature to have nowadays with all the Mobile phones, Tablets, laptops and big screens we have available.Something also good to notice is that this responsive design is CSS driven. It used to be handle by JavaScript in some ancient time.
Great Features => Dozens of state of the art featuresResponsive Design => Feat all screensLive mockups => Go Agile!Big community => It is really important for a open source project. Bootstrap has bright future ahead.
Bootstrap is today widely used in the Web. It exists hundreds of templates for famous CMS like Joomla, WordPress and Drupal. One month ago Joomla surprised everybody by using Bootstrap for their latest version 3.0. For those who are interested in Joomla, you will also notice this change is a little revolution in itself. Joomla did not only switch to Bootstrap but also switch to Jquery… As Jquery is more popular and widely used across the web, I think as a Joomla fan that this change was necessary to attract a new community of developers that will give Joomla a brighter future.
Viadeo (the biggest LinkedIn competitor) they do not make it too obvious but they are based on Bootstrap.
I would like to thanks April for the invitation. Questions?