Downloaded 10 times
Uploaded byKuldeep Singh
Bootstrap tutorial
The document discusses Bootstrap, an open-source front-end toolkit created by Twitter to provide a consistent design experience across applications. It highlights Bootstrap's features including its small footprint, extensive design patterns, a flexible grid system, and JavaScript plugins, making it easy to use in real-world scenarios. The document also outlines future improvements and encourages feedback through GitHub.
More Related Content
Similar to Bootstrap tutorial
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=640&height=640&fit=bounds)
Bootstrap tutorial
- 1. Bootstrap Twitter Front-end Summit September27, 2011 Wednesday, September 28, 2011
- 2. Oh hai, I’mOtto. Designer at Twitter since 2010 Love HTML and CSS Been at it for 10+ years Find me online: twitter.com/mdo github.com/markdotto Wednesday, September 28, 2011
- 3. Let’s talk about Bootstrap. Stats Whatis it Why we made it What’s awesome about it How to use it Future plans Wednesday, September 28, 2011
- 4. Stats 7,000+ watchers 1,000+ forks 418,500+page views (since mid August) 250+ issues closed Wednesday, September 28, 2011
- 5. What is it? Open-sourcefrontend toolkit HTML, CSS, and now JS Super small footprint (CSS is ~7kb) Supported in IE7 and up Designed as a complete styleguide Boatload of design patterns Built on Less CSS Wednesday, September 28, 2011
- 6. Bootstrap was created tosolve a real problem. Our tools didn’t look or behave consistently and were difficult to develop. Wednesday, September 28, 2011
- 7. What about usingthose other feature complete toolkits out there? Wednesday, September 28, 2011
- 8. Turns out manytoolkits are built to provide value at only the base level: scaffolding. Wednesday, September 28, 2011
- 9.
- 10.
- 11. Others have adifferent problem: no visibility into exactly what the toolkit provides. Wednesday, September 28, 2011
- 12.
- 13.
- 14. So Bootstrap wasborn as a fresh take on an existing idea. Build a toolkit based on a complete styleguide. Wednesday, September 28, 2011
- 15.
- 16. But, that’s lookinglike the other toolkits. Well, let’s look again... Wednesday, September 28, 2011
- 17.
- 18.
- 19. So, in whatways does Bootstrap stand out? Well, to name a few... Wednesday, September 28, 2011
- 20. A boatload ofdesign patterns Scaffolding Grid system Fixed-width layout Fluid-width layout Typography Headings Body text Blockquotes Lists Code Inline labels Wednesday, September 28, 2011 Misc components Media thumbnails Tables Forms Buttons Navigation Fixed topbar Tab nav Pill nav Breadcrumbs Pagination Alerts Basic alert messages Block messages Dialogs Modals Popovers Tooltips
- 21. Made with variablesin Less 1 2 3 // Links @linkColor: @linkColorHover: #0069d6; darken(@linkColor, 15); 4 5 6 7 8 // Grays @black: @grayDark: @gray: #000; lighten(@black, 25%); lighten(@black, 50%); 9 10 11 12 13 @grayLight: @white: lighten(@black, 75%); #fff; // Baseline grid @basefont: 13px; 14 @baseline: 18px; Wednesday, September 28, 2011
- 22. Reusable mixins viaLess 1 2 3 // Border Radius .border-radius(@radius: 5px) { -webkit-border-radius: @radius; 4 5 6 7 8 -moz-border-radius: @radius; border-radius: @radius; } 9 10 11 12 13 .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: @size; font-weight: @weight; line-height: @lineHeight; 14 } // Font stacks Wednesday, September 28, 2011
- 23. Includes flexible gridsystem 16 column grid (support up to 24) Customizable variables via LESS 1 2 3 @gridColumns: @gridColumnWidth: @gridGutterWidth: Wednesday, September 28, 2011 16; 40px; 20px;
- 24.
- 25. New javascript plugins Includedplugins... Modals Popovers Alert messages Dropdown menus Scrollspy for nav Tabbed content Twipsy tooltips Compatible with jQuery and Ender Comes with extensive docs and examples Wednesday, September 28, 2011
- 26. But what's agreat framework without ease of use in the real world? Wednesday, September 28, 2011
- 27. Hotlink like aboss 1 2 <!-- Le styles --> <link href="http://twitter.github.com/bootstrap/1.3.0/ bootstrap.min.css" rel="stylesheet"> Download and use locally 1 2 <!-- Le styles --> <link href="css/bootstrap/1.3.0/bootstrap.min.css" rel="stylesheet"> 3 <link href="css/yours/style.css" rel="stylesheet"> Wednesday, September 28, 2011
- 28. Compile Less inthe browser 1 2 <!-- Le styles --> <link href="path/to/bootstrap.less" rel="stylesheet/less"> <!-- Le javascripts --> 3 <script src="path/to/less.js"/></script> Compile via Node or Terminal $ $ npm install less make $ lessc ./lib/bootstrap.less > bootstrap.css Wednesday, September 28, 2011
- 29. Sounds great. What’s comingnext? Wednesday, September 28, 2011
- 30. On our roadmap MoreHTML5 elements HTML5 forms Additional table styles Alternate topbar styles for fixed or relative display Media queries Sidebar nav for fluid layout Fullscreen layout Growl style alerts Rounded buttons Module components Additional blockquote styles Anything else? File an issue on GitHub! Wednesday, September 28, 2011 Custom skins Toggle buttons Fluid grid system Font-face mixins
- 31.