Bootstrap 3

Table of Content

1. Setup Frameworks:
   • Download / Install Bootstrap
   • Download / Install jQuery
   • Download / Create Images
   • Create HTML Framework
   • Link CSS / JavaScript Files
2. Setup NavBar:
   • Create Fixed Top NavBar
   • Create Elements For NavBar
   • Create Top Level Menus
   • Create Drop Down For Menu
   • Add Icons To Menus (OPTIONAL)
   • Add Color To Icons (OPTIONAL)
3. Setup Header:
• Create Jumbotron
4. Setup Main Content:
   • Create A Responsive Grid (Theory)
   • Create Row 1 with 4 columns
   • Create Secondary Menu (OPTIONAL)
   • Create Row 2 with 2 columns
5. Setup Footer:
   • Create Fixed Bottom NavBar
   • Create Content For Foooter
   • Clear Footer
     

• BONUSES: JS PLUG-INS
  
• Basic:
  • Button / Alert
  • Tooltip / Popover
• Collapsible / Accordion
• Tab
• Dropdown
• Advanced:
  • Modal
  • TypeAhead
  • Affix (NavBar / Menu)
  • Scrollspy (NavBar / Menu)
  • Carousel

Why Use Bootstrap

It is an easy-to-use free framework that is used to create responsive designs that automatically scale to look great on all devices (e.g., phones, tablets and desktops). It includes HTML and CSS templates for typography, form, navigation and other elements as well as optional JavaScript plug-ins. It supports mobile first methodology and it is compatible with all modern browsers.

While easy to implement, you will discover that Bootstrap used a lot of:

• Classes (e.g., class = "nav navbar-default")
• Attributes (e.g., data-toggle)
• Div tags (e.g., <div>  <div>...</div>  </div>)
• Containers (e.g., fixed and fluid)
• Rows / Columns

Objective

We will create a four column web site that will fill the screen horizontally (in columns) on a large screen but will convert to vertical (or stacked) on smaller screens.

Optional sections and steps can either be skipped altogether or done later.

Real Content

Once you have completed this tutorial, you can go back and replace the text, URLs, buttons, etc. with your own content.

1. Select the dummy text in the columns and replace it with real content.
2. Change the dummy links (#) to real links to pages that you want them to go to.
   CAUTION: Do not add a URL to a drop down menu (e.g., Training).
   
3. CHECK POINT: Save the file and preview it in a browser. You should see YOUR content displayed.
4. Scale the page to see how it responds to different sizes.
5. Create as many pages as you need.
6. Make any necessary changes and test as you go.
7. Enhance site with custom CSS styles.

Resource Links