Downloading and setting up Bootstrap

Exclusive offer: get 50% off this eBook here
Twitter Bootstrap Web Development How-To [Instant]

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.

$12.99    $6.50
by David Cochran | January 2013 | Open Source Web Development

This article by David Cochran, author of Twitter Bootstrap Web Development How-To, reveals a few simple steps, so as to build a basic starter site equipped with Twitter Bootstrap's framework of stylesheets, icons, and JavaScript plugins.

(For more resources related to this topic, see here.)

Getting ready

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:

http://twitter.github.com/bootstrap/

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.)

  • The download button: You can get the latest and greatest versions of the Twitter Bootstrap's CSS, JavaScript plugins, and icons, compiled and ready for action, coming to you in a convenient ZIP folder. This is where we'll start.

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!

  1. Go to the Bootstrap homepage: http://twitter.github.com/bootstrap/

  2. Click on the large Download Bootstrap button.

  3. 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
    following screenshot:

  4. From the homepage, click on the main navigation item: Get started.

  5. Scroll down, or use the secondary navigation, to navigate to the heading: Examples. The direct link is:

    http://twitter.github.com/bootstrap/getting-started. html#examples

  6. Right-click and download the leftmost example, labeled Basic Marketing Site. You'll see that it is an HTML file, named hero.html

  7. Save (or move) it to your main bootstrap folder, right alongside the folders named css, img, and js.

  8. Rename the file index.html (a standard name for what will become our homepage).

    You should now see something similar to the following screenshot:

  9. 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.

  10. Open index.html (formerly, hero.html) in your code editor.

    Need a code editor?

     

  11. Find these lines near the top of the file (lines 11-18 in version 2.0.2):

  12. Update the href attributes in both link tags to read as follows:

  13. 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.)

There's more…

Of course, this is not the only way you could organize your files. Some developers prefer to place stylesheets, images, and JavaScript files all within a larger folder named assets or library. The organization method I've presented is recommended by the developers who contribute to the HTML5 Boilerplate. One advantage of this approach is that it reduces the length of the paths to our site assets.

Thus, whereas others might have a path to a background image such as this:

url('assets/img/bg.jpg');

In the organization scheme I've recommended it will be shorter:

url('img/bg.jpg');

This is not a big deal for a single line of code. However, when you consider that there will be many links to stylesheets, JavaScript files, and images running throughout your site files, when we reduce each path a few characters, this can add up. And in a world where speed matters, every bit counts. Shorter paths save characters, reduce file size, and help support faster web browsing.

Summary

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 :


Further resources on this subject:


Twitter Bootstrap Web Development How-To [Instant] A hands-on introduction to building websites with Twitter Bootstrap's powerful front-end development framework with this book and ebook.
Published: November 2012
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


David Cochran

David Cochran serves as an Associate Professor of Communication at Oklahoma Wesleyan University. He has been teaching Interactive Design since 2005. A passion for best practices induced him to avoid shortcuts and hew towards web standards. When Twitter Bootstrap was first released in August 2011, he recognized it as a tool that would speed up development while supporting best practices. Thus, he began folding Bootstrap into his university courses, much to the benefit of his students.

In 2012, David produced a Bootstrap 2.0 tutorial series for webdesign.tutsplus.com. He also published a first short book about Bootstrap, Twitter Bootstrap Web Development How-To , Packt Publishing.

In his spare time, David blogs about web design at alittlecode.com. He also leads a media, design, and strategy company named BitBrilliant.

Books From Packt


 Instant PhoneGap Social App Development [Instant]
Instant PhoneGap Social App Development [Instant]

 Instant Lift Web Applications [Instant]
Instant Lift Web Applications [Instant]

Social Media for Wordpress: Build Communities, Engage Members and Promote Your Site
Social Media for Wordpress: Build Communities, Engage Members and Promote Your Site

 Drupal 7 Social Networking
Drupal 7 Social Networking

 qooxdoo Beginner's Guide
qooxdoo Beginner's Guide

 Apache Roller 4.0 – Beginner's Guide
Apache Roller 4.0 – Beginner's Guide

 Responsive Web Design by Example
Responsive Web Design by Example

 WiX 3.6: A Developer's Guide to Windows Installer XML
WiX 3.6: A Developer's Guide to Windows Installer XML


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software