Downloading and Setup
Create an MVC 4/Internet application, BS1, use Nuget to download Twitter Bootstrap
Look at the HTML and see the layout:
How the bootstrap button is made:
And the larger button
btn-large: make the button large
You can use different button classes to achieve different look:
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.
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
You get the header text:
Now place a temp image in the first column (span8)
You see this:
After some adjustment, you get this:
A key part of responsive design is that it provides CSS rules to keep images from overflowing the with of their containers, such as:
This is a thumbnail
06:05pm, 01/26/2013, Page 26
Creating a Products Page
Copy about.html to products.html.
Customizing the Nav Bar
TB’s main navigation is organized in the navbar. Composed of divs, links and lists.
To make the nav bar stay on top, you need to pad the body in the header section:
This (Brand) is the site name – click and takes you to the home page.
Update these links: