html bootstrap workshop
DESCRIPTION
TRANSCRIPT
Advanced HTML / CSS
Recap from last time
HTML CSS<p class=“foo”>Hello</p> .foo {
background: white; color: blue; margin-left: 20px; }
HTML objects are styled using CSS!
HTML CSS• Markup language • .html file extension • Contains actual content
• Style sheets • .css file extension • Contains no content, only styling
1. Create a project folder 2. Create a file called index.html 3. Write a basic “Hello World” page (don’t forget title, header and body!)
1. Create a stylesheet style.css 2. Link to your stylesheet <link href=“” rel=“stylesheet”>
3. Give your title a color.
1. Create two more files about.html & contact.html
2. Create a list of links from index.html 3. Copy the content from index to the
other two pages
We have a basic website!
Now let’s add some styling…
http://www.getbootstrap.com
Navbar
• Copy-paste Basic Navbar into top of HMTL body • Inspect element with Chrome or Firefox Firebug!• Remove stuff we don’t need • Put a paragraph ( <p>! ) below the header
Grid• Skeleton for modern Websites • 12 columns with total span width of 960px (width container) • Should be placed within container ( <div class=“container”> ) • Coluns should be placed within row !=> Make two rows; 1 with 2 columns and one with 3
Buttons
• Bootstrap gives several colours AND sizes! • They are classes, so they an be applied to links too! • Add a large “succcess” button below your tagline
Icons• Used as span class: <span class="glyphicon glyphicon-star”></span> !
• They size with the element they span! • Add a large “succcess” button below your tagline • Put a star icon before all your three banner elements
Overruling Bootstrap styling
• The lowest css file gets priority over the ones declared before • Good site for colors: flatuicolors.com • Nested elements get priority:
<div class=“jumbotron”>!! <h1>Foo</h1>!</div>
h1 {!! color: green;!}
.jumbotron h1 {!! color: blue;!}
You can change this by using !important
Javascript• Introduced in 1996 by Netscape • Originally meant to manipulate Document Object Model (DOM) !!!!• Always activate JS itself and JS libraries you use at the bottom
of your Webpage for better performance:
• Let’s activate a Javascript Modal / Layover
Final Result
We have a live website!
http://getbootstrap.com/getting-started/#examples
Some nice examples