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
<link href="../../dist/css/bootstrap.css" rel="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
<link href="../examples/theme/theme.css" rel="stylesheet">
<link href="../examples/carousel/carousel.css” rel="stylesheet">
<link href="../examples/jumbotron/jumbotron.css" rel="stylesheet">
<link href="../examples/sticky-footer-navbar/sticky-footer-navbar.css"
rel="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)
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
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
<div class="navbar navbar-default navbar-fixed-top">
To
<div class="navbar navbar-inverse navbar-fixed-top">
Make The Following
Adjustments 2
Change the navigation to a fixed-top
Add ‘navbar-fixed-top’ to the navbar div class:
<div class="navbar navbar-inverse navbar-fixed-top">
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 (</ul>)
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Search" class="span3">
<button type="button" >Submit</button>
</div>
</form>
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
<link href=”../dist/css/bootstrap.css" rel="stylesheet">
Change form method to POST and call the checklogin.php file we
created last session
<form class="form-signin" method="POST"
action="checklogin.php”>
Upload to Web Folder
Copy the entire bootstrap folder to your campus web storage