Twitter Bootstrap

Twitter Bootstrap Paul Frederickson

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

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.com - Free Download

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’

Elements of Bootstrap Link to stylesheet

Navigation Templates Navbar http://getbootstrap.com/examples/navbar/ Navbar-fixed-top 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/

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

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

Make The Following Adjustments

To

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

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

Add A Carousel From the carousel template

Add Content From the jumbotron template

Add A Members Page Use the signin template

Copy/Paste code to a new page (login.html) and link the CSS

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