SlideShare a Scribd company logo

Twitter Bootstrap Presentation

Download as PPTX, PDF
A
aneeshalidina

Twitter Bootstrap is a powerful open-source front-end framework that simplifies and accelerates web development through a uniform user interface with various built-in components. Developed by a small group from Twitter, it supports all major browsers and includes features like responsive grids, navigation bars, and customizable styles. It is widely used for both website and app development, making it ideal for prototyping and enhancing user experience.

TechnologyDesign
Related topics:
Web Design and Development
1 of 14
Downloaded 129 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Twitter Bootstrap A powerful front-end framework for faster and easier web development and web apps. Aneesh Alidina www.aneesh.co @aneeshalidina
Developed Aug 2011 by small group of Twitter employees (Mark Otto and Jacob Thornton) Most popular Github project on the web Background
Provides a clean and uniform solution for building an interface for developers. User Interface Framework (JS, CSS and Images) Open Source project Supports all major browsers incl. IE7 Supports HTML5 and CSS3 Beautiful and functional built-in components which are easy to customise Why should I use bootstrap?
Twitter Bootstrap can be used to speed up website/app development process. It utilises LESS CSS (http://lesscss.org/) Dropdown menus Buttons Navbars Breadcrumbs Pagination Label and badges Thumbnails Carousel Alerts and more Bootstrap Features
Customise and download http://twitter.github.io/bootstrap/
Bootstrap package whats included Scaffolding – background, link styles, grid system Base CSS files – common style for HTML elements like typography, code, tables, forms and icon set Components – basic styles for common interface, like tabs, navbars, page headers etc. Javascript plugins – interactive components like popovers, modals and more
Bootstrap examples - homepage
Bootstrap examples – landing page
Bootstrap examples – forms
Responsive 12 column grids, layouts and components <div class= “row”> <div class = “span4”>…</div> <div class = “span8”>…</div> </div> Scaffolding: The Grid System
To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content. <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> Using bootstrap Basic Navbar example
Toyota.com NASA (http://code.nasa.gov/) 1000’s websites and it’s also great for prototyping Bootstrap with Joomla 3.0 Personal websites: www.aneesh.co Built with bootstrap – who uses it
Playground for bootstrap: http://www.bootply.com/ Saving the world from default bootstrap: http://www.bootswatch.com Wordpress Bootstrap: http://320press.com/wpbs/ Cool Resources
Questions?

More Related Content

PPTX
Foundation Front-End Framework Overview
valuebound
 
ODP
Word Press
smartcraze
 
PPTX
Molajo - J and Beyond 2011
Molajo
 
PPT
Clean out the cobwebs.. Joomla for Libraries (Oct-2008)
Mark A. Smith
 
PPT
Drupal seminar at DDIT Nadiad
karmraj
 
PPTX
Word press as an example of wcms
Mohammed Sheikh Salem
 
PPT
Bootstrap Components Quick Overview
Perumal N K
 
PPTX
Introduction to Twitter's Bootstrap 2
Julien Renaux
 
Foundation Front-End Framework Overview
valuebound
 
Word Press
smartcraze
 
Molajo - J and Beyond 2011
Molajo
 
Clean out the cobwebs.. Joomla for Libraries (Oct-2008)
Mark A. Smith
 
Drupal seminar at DDIT Nadiad
karmraj
 
Word press as an example of wcms
Mohammed Sheikh Salem
 
Bootstrap Components Quick Overview
Perumal N K
 
Introduction to Twitter's Bootstrap 2
Julien Renaux
 

Similar to Twitter Bootstrap Presentation (20)

PDF
Analyzing bootsrap and foundation font-end frameworks : a comparative study
IJECEIAES
 
PPTX
RWD - Bootstrap
Jasvinder Singh
 
PPTX
The A to Z of Building a Responsive SharePoint Site with Bootstrap
Thomas Daly
 
PPTX
BootStrap_1_Introduction
Gausvami Divyeshpuri Vallabhpuri
 
PDF
Bootstrap seminar presentation
PratikDoiphode1
 
PPTX
Front-End-Development-Basics-and-HTML-Structure.pptx
LateshBabu3
 
PPTX
Twitter Bootstrap
Techizzaa
 
PPT
Know the reason behind choosing bootstrap as css framework
Omkarsoft Bangalore
 
PPTX
Twitter bootstrap-101
Kim Hardie
 
PPTX
Bootstrap
Atul Adhikari
 
PDF
Introduction-to-HTML-CSS-and-Bootstrap.pdf
PetronetGamer
 
PPTX
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
PPTX
Bootstrap 3.1.1
Prasad Parab
 
PPTX
AUSPC 2011: How we did it: NothingButSharePoint.com
Jeremy Thake
 
PPTX
Bootstrap.pptx
vishal choudhary
 
PPTX
Bootstrap.pptx
RaviRazz7
 
PPTX
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
 
PDF
The Ultimate Guide to Bootstrap for Beginners.pdf
webcooks Digital Academy
 
PPTX
Bootstrap how it can help you build better websites
Aidan Technologies Sdn Bhd
 
PPTX
Bootstrap for Beginners
D'arce Hess
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
IJECEIAES
 
RWD - Bootstrap
Jasvinder Singh
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
Thomas Daly
 
BootStrap_1_Introduction
Gausvami Divyeshpuri Vallabhpuri
 
Bootstrap seminar presentation
PratikDoiphode1
 
Front-End-Development-Basics-and-HTML-Structure.pptx
LateshBabu3
 
Twitter Bootstrap
Techizzaa
 
Know the reason behind choosing bootstrap as css framework
Omkarsoft Bangalore
 
Twitter bootstrap-101
Kim Hardie
 
Bootstrap
Atul Adhikari
 
Introduction-to-HTML-CSS-and-Bootstrap.pdf
PetronetGamer
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
Bootstrap 3.1.1
Prasad Parab
 
AUSPC 2011: How we did it: NothingButSharePoint.com
Jeremy Thake
 
Bootstrap.pptx
vishal choudhary
 
Bootstrap.pptx
RaviRazz7
 
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
 
The Ultimate Guide to Bootstrap for Beginners.pdf
webcooks Digital Academy
 
Bootstrap how it can help you build better websites
Aidan Technologies Sdn Bhd
 
Bootstrap for Beginners
D'arce Hess
 
Ad

Recently uploaded (20)

PDF
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
PDF
1 - Historical Antecedents, Social Consideration.pdf
tuazon2030627
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PPTX
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
PDF
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
PDF
Getting Started with Data Integration: FME Form 101
Safe Software
 
PDF
August Patch Tuesday
Ivanti
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
Zenith AI: Advanced Artificial Intelligence
Biz Preneurs
 
PDF
Enhancing emotion recognition model for a student engagement use case through...
IAESIJAI
 
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
PPTX
OMC Textile Division Presentation 2021.pptx
JahangirAlam816069
 
PDF
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PPTX
1. Introduction to Computer Programming.pptx
bonakiduza1024
 
PDF
Accuracy of neural networks in brain wave diagnosis of schizophrenia
IAESIJAI
 
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDCA Consulting
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PPTX
TLE Review Electricity (Electricity).pptx
JayPolicarpio2
 
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
1 - Historical Antecedents, Social Consideration.pdf
tuazon2030627
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
A comparative analysis of optical character recognition models for extracting...
IAESIJAI
 
Getting Started with Data Integration: FME Form 101
Safe Software
 
August Patch Tuesday
Ivanti
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Zenith AI: Advanced Artificial Intelligence
Biz Preneurs
 
Enhancing emotion recognition model for a student engagement use case through...
IAESIJAI
 
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
ssuser28425f
 
OMC Textile Division Presentation 2021.pptx
JahangirAlam816069
 
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
A Presentation on Artificial Intelligence
memembruh336
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
1. Introduction to Computer Programming.pptx
bonakiduza1024
 
Accuracy of neural networks in brain wave diagnosis of schizophrenia
IAESIJAI
 
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDCA Consulting
 
Encapsulation theory and applications.pdf
gurumoop
 
TLE Review Electricity (Electricity).pptx
JayPolicarpio2
 
Ad

Twitter Bootstrap Presentation

  • 1. Twitter Bootstrap A powerful front-end framework for faster and easier web development and web apps. Aneesh Alidina www.aneesh.co @aneeshalidina
  • 2. Developed Aug 2011 by small group of Twitter employees (Mark Otto and Jacob Thornton) Most popular Github project on the web Background
  • 3. Provides a clean and uniform solution for building an interface for developers. User Interface Framework (JS, CSS and Images) Open Source project Supports all major browsers incl. IE7 Supports HTML5 and CSS3 Beautiful and functional built-in components which are easy to customise Why should I use bootstrap?
  • 4. Twitter Bootstrap can be used to speed up website/app development process. It utilises LESS CSS (http://lesscss.org/) Dropdown menus Buttons Navbars Breadcrumbs Pagination Label and badges Thumbnails Carousel Alerts and more Bootstrap Features
  • 6. Bootstrap package whats included Scaffolding – background, link styles, grid system Base CSS files – common style for HTML elements like typography, code, tables, forms and icon set Components – basic styles for common interface, like tabs, navbars, page headers etc. Javascript plugins – interactive components like popovers, modals and more
  • 8. Bootstrap examples – landing page
  • 10. Responsive 12 column grids, layouts and components <div class= “row”> <div class = “span4”>…</div> <div class = “span8”>…</div> </div> Scaffolding: The Grid System
  • 11. To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content. <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> Using bootstrap Basic Navbar example
  • 12. Toyota.com NASA (http://code.nasa.gov/) 1000’s websites and it’s also great for prototyping Bootstrap with Joomla 3.0 Personal websites: www.aneesh.co Built with bootstrap – who uses it
  • 13. Playground for bootstrap: http://www.bootply.com/ Saving the world from default bootstrap: http://www.bootswatch.com Wordpress Bootstrap: http://320press.com/wpbs/ Cool Resources