際際滷

際際滷Share a Scribd company logo

Bootstrap tutorial

Kuldeep Singh
Kuldeep Singh

Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

1 of 31
Downloaded 10 times
Bootstrap Twitter Front-end Summit September 27, 2011 Wednesday, September 28, 2011
Oh hai, Im Otto. 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
Lets talk about Bootstrap. Stats What is it Why we made it Whats awesome about it How to use it Future plans Wednesday, September 28, 2011
Stats 7,000+ watchers 1,000+ forks 418,500+ page views (since mid August) 250+ issues closed Wednesday, September 28, 2011
What is it? Open-source frontend 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
Bootstrap was created to solve a real problem. Our tools didnt look or behave consistently and were dif鍖cult to develop. Wednesday, September 28, 2011
What about using those other feature complete toolkits out there? Wednesday, September 28, 2011
Turns out many toolkits are built to provide value at only the base level: scaffolding. Wednesday, September 28, 2011
Wednesday, September 28, 2011
Wednesday, September 28, 2011
Others have a different problem: no visibility into exactly what the toolkit provides. Wednesday, September 28, 2011
Wednesday, September 28, 2011
Wednesday, September 28, 2011
So Bootstrap was born as a fresh take on an existing idea. Build a toolkit based on a complete styleguide. Wednesday, September 28, 2011
Wednesday, September 28, 2011
But, thats looking like the other toolkits. Well, lets look again... Wednesday, September 28, 2011
Wednesday, September 28, 2011
Wednesday, September 28, 2011
So, in what ways does Bootstrap stand out? Well, to name a few... Wednesday, September 28, 2011
A boatload of design 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
Made with variables in 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
Reusable mixins via Less 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
Includes 鍖exible grid system 16 column grid (support up to 24) Customizable variables via LESS 1 2 3 @gridColumns: @gridColumnWidth: @gridGutterWidth: Wednesday, September 28, 2011 16; 40px; 20px;
Awesome documentation Wednesday, September 28, 2011
New javascript plugins Included plugins... 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
But what's a great framework without ease of use in the real world? Wednesday, September 28, 2011
Hotlink like a boss 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
Compile Less in the browser 1 2 <!-- Le styles --> <link href="path/to/bootstrap.less" rel="stylesheet/less"> <!-- Le javascripts --> 3 <script src=/knitkuldeep/kuldeep-28479749/"path/to/less.js"/></script> Compile via Node or Terminal $ $ npm install less make $ lessc ./lib/bootstrap.less > bootstrap.css Wednesday, September 28, 2011
Sounds great. Whats coming next? Wednesday, September 28, 2011
On our roadmap More HTML5 elements HTML5 forms Additional table styles Alternate topbar styles for 鍖xed or relative display Media queries Sidebar nav for 鍖uid 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
Thanks! twitter.github.com/bootstrap Find us online: twitter.com/TwBootstrap twitter.com/mdo twitter.com/fat github.com/twitter/bootstrap Wednesday, September 28, 2011

More Related Content

Bootstrap tutorial

  • 1. Bootstrap Twitter Front-end Summit September 27, 2011 Wednesday, September 28, 2011
  • 2. Oh hai, Im Otto. 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. Lets talk about Bootstrap. Stats What is it Why we made it Whats 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-source frontend 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 to solve a real problem. Our tools didnt look or behave consistently and were dif鍖cult to develop. Wednesday, September 28, 2011
  • 7. What about using those other feature complete toolkits out there? Wednesday, September 28, 2011
  • 8. Turns out many toolkits are built to provide value at only the base level: scaffolding. Wednesday, September 28, 2011
  • 11. Others have a different problem: no visibility into exactly what the toolkit provides. Wednesday, September 28, 2011
  • 14. So Bootstrap was born as a fresh take on an existing idea. Build a toolkit based on a complete styleguide. Wednesday, September 28, 2011
  • 16. But, thats looking like the other toolkits. Well, lets look again... Wednesday, September 28, 2011
  • 19. So, in what ways does Bootstrap stand out? Well, to name a few... Wednesday, September 28, 2011
  • 20. A boatload of design 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 variables in 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 via Less 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 鍖exible grid system 16 column grid (support up to 24) Customizable variables via LESS 1 2 3 @gridColumns: @gridColumnWidth: @gridGutterWidth: Wednesday, September 28, 2011 16; 40px; 20px;
  • 25. New javascript plugins Included plugins... 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 a great framework without ease of use in the real world? Wednesday, September 28, 2011
  • 27. Hotlink like a boss 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 in the browser 1 2 <!-- Le styles --> <link href="path/to/bootstrap.less" rel="stylesheet/less"> <!-- Le javascripts --> 3 <script src=/knitkuldeep/kuldeep-28479749/"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. Whats coming next? Wednesday, September 28, 2011
  • 30. On our roadmap More HTML5 elements HTML5 forms Additional table styles Alternate topbar styles for 鍖xed or relative display Media queries Sidebar nav for 鍖uid 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