Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Up and Running with Twitter Bootstrap: Refresh Boston, January 2013

8,949 views

Published on

Bootstrap, a front-end development framework created by two Twitter developers, has enjoyed rapid adoption. Based on HTML5, CSS3, and jQuery, Bootstrap allows you to create responsive websites quickly, while still allowing for plenty of customization of code.

In this session, Jen Kramer will walk you through Bootstrap, including where to get it, how to integrate it into a website, and how to build your first page using Bootstrap tools and techniques.

Key learning points include:

- Understanding what Bootstrap is and why it's being adopted
- Learning how to download and install Bootstrap
- Introducing Bootstrap's responsive, fluid grid system for creating mobile-compatible layouts
- Examining some of the built-in behaviors, including collapsible navigation bars, dropdown menus, image carousels, and more
- Customizing Bootstrap
- Examples of sites built with Bootstrap

Published in: Technology
  • To get professional research papers you must go for experts like ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • vnbb
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Up and Running with Twitter Bootstrap: Refresh Boston, January 2013

  1.  Jen Kramer • Refresh Boston • January 17, 2013
  2.   www.jenkramer.org • jen@jenkramer.org
  3.  Smartphone sales to hit 1bn a year for first time in 2013 “The smartphone is predicted to become a mass market phenomenon this year, with annual shipments soaring to 1bn globally for the first time, although a fifth of the devices will rarely be used to go online.” “In 2013…the number of active phones with either a touch screen or an alphabet keyboard to 2bn by the end of the year.” www.jenkramer.org • jen@jenkramer.org
  4. mashable.com/2013/01/08/tablets-outsell-notebooks/ www.jenkramer.org • jen@jenkramer.org
  5.  Build a separate mobile-compatible website or mobile app (or both) Responsive Design Which is better? It Depends. www.jenkramer.org • jen@jenkramer.org
  6.  Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3) www.alistapart.com/articles/responsive-web-design/ www.jenkramer.org • jen@jenkramer.org
  7.  Twitter Bootstrap is a free collection of tools for creating websites and web applications. It is the most popular project in GitHub and is used by NASA and MSNBC among others.wikipedia.org/wiki/Twitter_Bootstrap www.jenkramer.org • jen@jenkramer.org
  8.  Two grid-based systems, one adaptive, one fully responsive Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc. jQuery-driven components include dropdown menus, tooltips, popovers, alerts, image carousel, accordion panels, etc. www.jenkramer.org • jen@jenkramer.org
  9.  HTML: Can use XHTML or HTML5. CSS: Minified CSS, one or two files. Uses LESS. Javascript: One minified file, plus link to the latest version of jQuery Images: Glyphicons (140 available) as image sprite, light and dark versions Documentation available: getbootstrap.com www.jenkramer.org • jen@jenkramer.org
  10. getbootstrap.com foundation.zurb.com 15 More Responsive CSS Frameworks Worth Considering Framework Fight: Zurb Foundation vs Twitter Bootstrap www.jenkramer.org • jen@jenkramer.org
  11.  Joomla (open source CMS) integrated Bootstrap into version 3. Bootstrap available as 3rd party extension for Joomla 2.5. http://www.joostrap.com/built-with-joomla-bootstrap-website-showcase Bootstrap unofficial showcase A few big names: o State of Kentucky o Breaking News (NBC) o code.NASA (with WordPress) o Pinstagram www.jenkramer.org • jen@jenkramer.org
  12.   www.jenkramer.org • jen@jenkramer.org
  13. Jen Kramer Slides available atWaltham, MA www.slideshare.net/jen4webPhone: 802-257-2657jen@jenkramer.org Code files available at: www.jenkramer.org/refreshboston.zipwww.jenkramer.orgTwitter: @jen4webFacebook: facebook.com/webdesignjen www.jenkramer.org • jen@jenkramer.org

×