Bootstrap 4.0
Responsive, mobile-first framework
What you need today:
- Directions - https://getbootstrap.com/
- Browser - Chrome today please
- Text Editor - https://atom.io/
It's all about the phones.
Got Bootstrap?
-
Provides all the basics
Translation: "Quick start"
-
Popular
Translation: "Huge support network"
-
Project Jumpstarter
Translation: "Especially useful for projects that will need to exist outside of your CMS"
Framework
Responsive
Mobile-First
Flexible grid
- 12 columns
- Columns adjust to fit within the responsive framework
-
because hand-coding columns sucks
Responsive
-
Media queries with mobile, tablet, laptop and desktop breaks
-
Images set to width: 100%;
will change size with the grid
- Encourages design to be built as the mobile version first, then increase in complexity for wider designs
Common components
& functionality
- Drop-down Navigation
- Buttons
- Pop-ups
- Slideshow / carousel
- Font icons
Also try "Font Awesome"
Alternatives to Bootstrap
Foundation
An alternate to Bootstrap
-
Foundation provides core functionality - no extras
-
Smaller community
-
Mobile first / SASS
UI Kit
Lightweight
-
Requires jQuery
-
Minimalist look & feel
-
Pro version to build WP and Joomla sites
Let's get started.
http://getbootstrap.com/
Bootstrap Workshop
By Erika Lee
Bootstrap Workshop
Getting started with Bootstrap: an HTML5, responsive, mobile-first framework.
