Twitter bootstrap1


Published on

Twitter Bootstrap

Published in: Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Twitter bootstrap1

  1. 1. TWITTER BOOTSTRAP Presented By:
  2. 2. What is Twitter Bootstrap?Twitter Bootstrap is a Sleek, intuitive, and powerfulfront-end framework for faster and easier webdevelopment. Twitter Bootstrap is a toolkit todevelop web apps and sites fast. It includes basicCSS and HTML for creating Grids, Layouts,Typography, Tables, Forms, Navigation, Alerts,Popovers etc.
  3. 3. Features• Bootstrap is open source and available on GitHub• Set of user interface elements, layouts, and javascript tools• Support HTML5 and CSS3• Compatible with all major browsers• Supports Responsive Design• Provides well built set of jQuery plugins
  4. 4. Origin• Developed by Mark Otto and Jacob Thornton at Twitter• In August, 2011 Twitter released Bootstrap as open- source• In February 2012, it became the most popular GitHub development project.
  5. 5. Structure• Grid System• Fluid Grid System• Layouts• Responsive Design
  6. 6. Grid SystemThe default Bootstrap grid system utilizes 12columns, making for a 940px wide container withoutresponsive features enabled. With the responsive CSSfile added, the grid adapts to be 724px and 1170pxwide depending on your viewport. Below 767pxviewports, the columns become fluid and stackvertically.
  7. 7. Fluid Grid SystemThe fluid grid system uses percents instead of pixelsfor column widths. It has the same responsivecapabilities as our fixed grid system, ensuring properproportions for key screen resolutions and devices.
  8. 8. Layouts• Fixed Layout Provides a common fixed-width (and optionally responsive) layout with only <div class="container">required.• Fluid Layout Create a fluid, two-column page with <div class="container- fluid">—great for applications and docs.
  9. 9. Responsive DesignResponsive Web Design is an idea of providing theuser with best viewing experience of a website acrossdevices of various sizes. For responsive web deign towork, you need to create a CSS which comprises ofstyles suitable for various devices sizes, or better to sayfor various device size ranges. Once the page is aboutto load on a specific device, using various font end webdevelopment techniques like Media Queries, the sizeof the viewport of the device is detected, then thestyles specific to the device is loaded.
  10. 10. Supported DevicesBootstrap supports a handful of media queries in a single file tohelp make your projects more appropriate on different devicesand screen resolutions.Label Layout width Column width Gutter widthLarge display 1200px and up 70px 30pxDefault 980px and up 60px 20pxPortrait tablets 768px and above 42px 20pxPhones to 767px and below Fluid columns, no fixed widthstabletsPhones 480px and Fluid columns, no fixed widths below
  11. 11. ComponentsDozens of reusable components built to providenavigation, alerts, popovers, and more. • Dropdowns • Labels and Badges • Button Groups • Typography • Button dropdowns • Thumbnails • Navs • Alerts • Navbars • Progress Bars • Breadcrumbs • Media Objects • Pagination • Miscellaneous
  12. 12. JavascriptThe JavaScript components of Bootstrap are based on thejQuery JavaScript library. Plugins are accordingly found in the jQuerytoolkit plugins. They provide additional user-interface elements such asdialog, tooltips and carousels. They also extend the functionality of someexisting interface elements, including for example an auto-completefunction for input fields. Supported JavaScript Plugins: • Modal • Button • Dropdown • Tooltip • Scrollspy • Collapse • Tab • Carousel • Tooltip • Typeahead • Popover • Affix • Alert
  13. 13. Reasons to Use Bootstrap• Save Time The Bootstrap libraries offer readymade pieces of code that can pump life into a website.• Customizable It lets you factor in your own needs and tailor your development project accordingly.• Factor in the Design o Grid System o CSS Components o Javascript Plugins• Consistency Since it works with a central set of development code, Bootstrap’s results are uniform across platforms.• Updates Bootstrap is ever-evolving with updates coming out on a much more regular and constant basis.
  14. 14. Reasons to Use Bootstrap• Integration Integration is simple, fast and easy to accomplish and once done you can play with your design to your heart’s content.• Responsiveness Bootstrap adapts to the change in platforms with super speed and efficiency.• Future Compatibility Bootstrap Comes equipped with many elements that are being considered the future of design itself. For example HTML5 and CSS3.• The docs Talk Bootstrap gives you a head start because you don’t have to play with everything to learn and instead can find information on just about anything through the documentation.
  15. 15. Sites Built With Twitter Bootstrap
  16. 16. NETGAINS AMERICA LLC87 Wolfs Lane, 2nd Floor,Pelham, New York – 10803Office: +1 (917) 779-0480Toll Free: +1 (866) 693-5132W: www.netgainsamerica.comE: