Summer 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Responsive Image
An image can be set to automatically resize itself to fit the size of its container.
All you have to do is set the image width to 100%:
Resize the browser window to see the effect.
Responsive Table
| First Name | Last Name | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.
Resize the screen to see the effect.
Displaying Quotes
The w3-panel class can be used to display quotes:
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.
Dynamic Progress Bar with Labels
Label outside of the progress bar:
Added 0 of 10 photos
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Tabbed Image Gallery
Click on the images below:
×
×
×
×
Tabs in a Grid
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Navigation Bar Sizes
Add the w3-small, w3-large, w3-xlarge or w3-xxlarge to change the size of the navigation (will change the font-size of each link).
Default:
w3-large:
w3-xlarge:
w3-xxlarge:
If you want more space between each link, instead of increasing the font-size, you could add the w3-padding-classes to each link:
No comments:
Post a Comment