1. Twitter Bootstrap Paul Frederickson

2. Tonight’s Objectives Learn how to set up a bootstrap based site Become familiar with bootstrap syntax Create a framework for a site that can be finished later

3. What is Bootstrap? Front-end web design framework Serves as a template for a page layout (column width) Includes many examples and templates for navbars, buttons, etc. http://getbootstrap.comhttp://getbootstrap.com - Free Download http://getbootstrap.com

4. How to set up Bootstrap Download the latest version and unzip the folder Create a new index.html file in a new folder named ‘SOWD’

5. Elements of Bootstrap Link to stylesheet *Always know what folder the bootstrap.css file is located in and allocate ‘../’ as needed if the directory path changes Theme specific stylesheets needed for this demo

6. Navigation Templates Navbar http://getbootstrap.com/examples/navbar/ http://getbootstrap.com/examples/navbar/ Navbar-fixed-top Nav stays visible when scrolling Nav stays visible when scrolling http://getbootstrap.com/examples/navbar-fixed-top/ Navbar-static-top Scrolls with page http://getbootstrap.com/examples/navbar-static-top/

7. Navigation Code (copied from template.html) Project name Project name Home Home About About Contact Contact Dropdown Dropdown Action Action Another action Another action Something else here Something else here Nav header Nav header Separated link Separated link One more separated link One more separated link Default Default Static top Static top Fixed top Fixed top

8. Navigation Open the examples folder in the bootstrap Open the sticky-footer-navbar folder Open index.html and copy and paste nav and footer code to your SOWD index.html

9. Make The Following Adjustments To

10. Make The Following Adjustments 2 Change the navigation to a fixed-top Add ‘navbar-fixed-top’ to the navbar div class: Change the navbar links to reflect your site

11. Make The Following Adjustments 3 Add a right-aligned search bar after the link’s ending tag ( ) Submit Submit

12. Add A Carousel From the carousel template

13. Add Content From the jumbotron template

14. Add A Members Page Use the signin template Copy/Paste code to a new page (login.html) and link the CSS Change form method to POST and call the checklogin.php file we created last session

15. Upload to Web Folder Copy the entire bootstrap folder to your campus web storage