Twitter Bootstrap Web Development How-to (1)

Downloading and Setup
Create an MVC 4/Internet application, BS1, use Nuget to download Twitter Bootstrap
image
After installation
image
Go to Bootstrap Github and download a sample html page – Basic marketing (hero.html). Rename to index.html. Update the path to CSS and javascript and image. You will see this:
image
Look at the HTML and see the layout:
image
How the bootstrap button is made:
image
image
And the larger button
image
btn-primary: blue
btn-large: make the button large
image
You can use different button classes to achieve different look:
image
image

Layout
Create a copy of index.html and name it layout.html
TB uses a 12-column grid system, so as long as the total is 12, it will fit perfectly on one line. E.g., 6 + 3 + 3, 4 + 4 + 4, 2 + 4 + 6 etc. for each row.
image
Benefits: responsive design – will adapt to different browser screen sizes.
TB: Time-tested principles of progressive enhancement ad graceful degradation.
Creating an About Page
make a copy of index.html and rename to about.html
Change the ‘hero-unit’ class to ‘page-header’, and remove the 2 <p> tag
image
You get the header text:
image
Now place a temp image in the first column (span8)
image
You see this:
image
After some adjustment, you get this:
image

A key part of responsive design is that it provides CSS rules to keep images from overflowing the with of their containers, such as:
img{
   max-width: 100%….

image
Thumbnail
This is a thumbnail
image
With this:
image
You get:
image
06:05pm, 01/26/2013, Page 26
Creating a Products Page
Copy about.html to products.html.
image
You get:
image
Customizing the Nav Bar
TB’s main navigation is organized in the navbar. Composed of divs, links and lists.
image
To make the nav bar stay on top, you need to pad the body in the header section:
image
image
Customizing:
This (Brand) is the site name – click and takes you to the home page.
image
You get:
image
Update these links:
image
You see:
image

Dropdown menu:
image
You get:
image
if you do a pull-right,
image
You get:
image
TABS
Page 36, 01:1am, 01/2/2013
Still trying to find out how tab link can link to static contents on the same page.

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