Twitter Bootstrap Web Development How-To [Instant] — Save 50%
A hands-on introduction to building websites with Twitter Bootstrap's powerful front-end development framework with this book and ebook.
(For more resources related to this topic, see here.)
Twitter Bootstrap is more than a set of code. It is an online community. To get started, you will do well to familiarize yourself with Twitter Bootstrap's home base:
Here you'll find the following:
The documentation: If this is your first visit, grab a cup of coffee and spend some time perusing the pages, scanning the components, reading the details, and soaking it in. (You'll see this is going to be fun.)
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
How to do it…
Whatever your experience level, as promised, I'll walk you through all the necessary steps. Here goes!
Go to the Bootstrap homepage: http://twitter.github.com/bootstrap/
Click on the large Download Bootstrap button.
Locate the download file and unzip or extract it. You should get a folder named simply bootstrap. Inside this folder you should find the folders and files shown in the
From the homepage, click on the main navigation item: Get started.
Scroll down, or use the secondary navigation, to navigate to the heading: Examples. The direct link is:
Right-click and download the leftmost example, labeled Basic Marketing Site. You'll see that it is an HTML file, named hero.html
Save (or move) it to your main bootstrap folder, right alongside the folders named css, img, and js.
Rename the file index.html (a standard name for what will become our homepage).
You should now see something similar to the following screenshot:
Next, we need to update the links to the stylesheets
Why? When you downloaded the starter template file, you changed the relationship between the file and its stylesheets. We need to let it know where to find the stylesheets in this new file structure.
Open index.html (formerly, hero.html) in your code editor.
Need a code editor?
- Windows users: You might try Notepad++ (http://notepadplus-plus.org/download/)
- Mac users: Consider TextWrangler (http://www. barebones.com/products/textwrangler/)
Find these lines near the top of the file (lines 11-18 in version 2.0.2):
Update the href attributes in both link tags to read as follows:
Save your changes!
You're set to go!
Open it up in your browser! (Double-click on index.html.)
You should see something like this:
Congratulations! Your first Bootstrap site is underway.
Problems? Don't worry. If your page doesn't look like this yet, let me help you spot the problem. Revisit the steps above and double-check a couple of things:
- Are your folders and files in the right relationship? (see step 3 as detailed previosuly)
- In your index.html, did you update the href attributes in both stylesheet links? (These should be lines 11 and 18 as of Twitter Bootstrap version 2.1.0.)
Thus, whereas others might have a path to a background image such as this:
In the organization scheme I've recommended it will be shorter:
This article gave us a quick introduction to the Twitter Bootstrap. We've got a fair idea as to how to download and set up our Bootstrap. By following these simple steps, we can easily create our first Bootstrap site.
Resources for Article :
- Starting Up Tomcat 6: Part 1 [Article]
- Build your own Application to access Twitter using Java and NetBeans: Part 2 [Article]
- Integrating Twitter with Magento [Article]
About the Author :
David Cochran is Associate Professor of Communication at Oklahoma Wesleyan University. He and his students have a fondness for envisioning and producing exciting projects, with well-built standards-compliant websites playing a central role in them. David frequently publishes online tutorials to share insights gained in the course of those projects. In recent months, Twitter Bootstrap has been a key topic. You'll find a number of these tutorials at Webdesign.tutsplus.com and at his blog, aLittleCode.com.