Twitter Bootstrap Web Development How-to (2)

BT Tabs (nav-tabs, or nav-pills)
image
Tab —
image
Pills —
image
Home page carousel
There are many TB plug-ins, one of them carousel.
Download 5 images (jpg) that are 1200×480 and save in /Images folder. Copy index.html to hero.html.
In index.html first remove the whole “hero-unit” div.
image
Then add images and tags:
image
image
You get:
image
Mouse over the image will pause the carousel.
Add the “slide” animation:
image
Add arrow to carousel
image
You see this arrow on the left and right:
image
Add a image title (lower left corner)
image
You see:
image
It adds a shade/background
image
12:40pm, 01/27/2013

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s