Twitter Bootstrap is a cutting edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the single page site or splash page. We have already covered a bit of design theory in our “Z” design post, and we will be using many of the same techniques.
If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in our part 1 of our series.
- Check Out The Whole Series!
- Twitter Bootstrap Part 1: What is Bootstrap Anyway?
- Twitter Bootstrap Part 2: Design a Responsive Homepage
- Twitter Bootstrap: Build A Stunning Two Column Blog
- Twitter Bootstrap Part 3: Design a Responsive Contact Page
Let’s Get Started
Let’s take a look at what we will be building today.
Here, we have what is considered a fairly “best practice” example of a “Z” design layout homepage. As such, our image features the Bootstrap navigation bar, a featured content carousel or slider, a standard call to action with an accented button color as well as three columns of content.
We should take note at this point that in no way is this a set-in-stone required layout for your next project. Inherently, this is the real beauty of using a front end framework. Would you like to achieve a different layout? Go for it, with a little bit of math (including the ability to count to twelve) you can achieve any number of layouts.
Take it From the Top:
Set Up The Navigation
The Navigation portion of our site is relativly easy to integrate. However, one should take note that the default navigation style included with Bootstrap is “Fixed” to the top of your page. This allows for the navbar to stay within the view of users as they navigate your site.
Call To Action
Footer & Finishing Up
I hope you have enjoyed this tutorial. Twitter Bootstrap is a fantastic tool that will allow for faster development and more user satisfaction in any project. Do you have a web design or development question for us? Drop us a note on our contact page, and we will get back with you as soon as possible.