Bootstrap
Twitter's CSS Framework
Robin Victorino
01/07/2015
CSS Framework?
Pre-built usual features
About styling
Responsive
Mobile-first
What it can do
- Positioning
- Responsiveness
- Usual UI / UX actions
What it can't
- Customize your website
- Do your web designer's job
- Make coffee
Module / plug-in
How to install Bootstrap
Step 1
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.5/css/bootstrap.min.css"
/><html>
<head>
</head>
<body>
<p>Welcome on my web page!</p>
[...]
</body>
</html>
Bootstrap CSS file
How to install Bootstrap
Step 2
Just use it.
CSS Grid
12 columns
4 screen sizes
Example
Let's try it!
HTML Elements
Common components:
- Navbar
- Button / forms
- Jumbotron
Example
Let's try it!
Customization?
Bootstrap tool
Thank you!
We did not talk about: JavaScript, dropdowns, progress bars, glyphicons...