OVERVIEW
Twitter Bootstrap is a wildly popular HTML and CSS framework for building websites and web applications. It is the number 1 project on GitHub. Bootstrap supports responsive web design, allowing the layout of your page to adapt to the device (desktop, tablet, mobile). This talk will introduce you to the basics of using Bootstrap and show you how to build responsive web layouts to build your own app.
TARGET AUDIENCE
Beginner web developers
ASSUMED AUDIENCE KNOWLEDGE
Working knowledge of HTML5 and CSS3.
OBJECTIVE
Learn how to use Twitter Bootstrap to quickly build a beautiful, responsive web app.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Twitter Bootstrap basics
Bootstrap CSS basics
Bootstrap responsive layouts
Bootstrap components
JavaScript Bootstrap plugins
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
FITC - Bootstrap Unleashed
1. Rami Sayar - @ramisayar
Technical Evangelist
Microsoft Canada
2. • Bootstrap Layout and CSS Basics
• Responsive Web Design and Bootstrap
• Bootstrap Components, Themes
• Favorite Add-ons
• LOTS OF DEMOS!
3. • Working knowledge of HTML5 and CSS3.
Note: Slides and code will be made available on @ramisayar.
4.
5.
6. • Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile first projects on the web.
• Designed for everyone, everywhere.
• Open Source!
• It's made for folks of all skill levels, SUPER EASY TO GET
STARTED.
• Developed by Mark Otto and Jacob Thornton at Twitter.
7. • Currently v3.2.0
• Supports Internet Explorer 8-11, Chrome, Firefox, Opera, Safari.
• Designed for the mobile-first, responsive Web
8. • Building new websites and mobile web apps
• Need a quick and easy way to prettify your website/tool
• Looking to develop over a stable CSS framework with a large
community. -> Bootstrap is for you.
• Do not use Bootstrap if you want a truly unique design and
style.
9.
10. • Huge community!
• Most popular project on GitHub
• 71,893 stars
• 26,883 forks
• 581 contributors
12. Bootstrap is mobile first.
<meta name="viewport" content="width=device-width, initial-scale=1">
Disabling mobile zoom (don’t do it).
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
13. • Bootstrap sets basic global display, typography and link styles.
(You can see this in scaffolding.less)
• Bootstrap also normalizes basic browser rendering using
Normalize.css
14.
15. • Responsive web design is a design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading
and navigation with a minimum of resizing, panning, and
scrolling—across a wide range of devices (from mobile phones
to desktop computer monitors). Wikipedia
16. • Thinking of the user’s needs instead of ours.
• Adapt to various device capabilities instead of configurations.
• Help future-proof our sites.
17.
18. • A flexible, grid-based layout,
• Flexible images and media, and
• CSS3 media queries.
19. • Bootstrap includes a responsive, mobile first fluid grid system
that scales 12 column units to the device width size.
• The MOST IMPORTANT part of this presentation.
• Grids must be placed within a container. The container type
changes behavior and sizing.
33. • Includes 200 glyphs from Glyphicon Halflings.
• Don’t mix with other components.
• Only for use on empty elements that have no child elements.
<span class="glyphicon glyphicon-search"></span>
40. • To customize Bootstrap, you can customize Less.
• Bootstrap uses Grunt for its build system.
• grunt dist - compile CSS and JavaScript
• grunt watch - watch directory
• grunt test – run tests
• grunt – build everything and run tests
41. • Lots of themes are available for free.
• Take a look: bootswatch.com or wrapbootstrap.com
44. • I was using Visual Studio 2013, you can get it for free here:
• http://www.visualstudio.com/en-us/products/visual-studio-express-
vs.aspx
• And Visual Studio Web Essentials: http://vswebessentials.com/
• Includes Bootstrap Support:
• Intellisense and Code Completion
• Error Detection
45. • Bootstrap Layout Basics
• CSS Basics
• Using Bootstrap for Responsive Web Design
• Bootstrap Components
• My favorite plugins