|

Create a Twitter Bootstrap Page

twitter bootstrap

We are moving forward and onward! We now have a good grasp of the Twitter Bootstrap File Structure, now we get to start having some fun. We do want to actually create some new designs with this great framework! The prior lesson helped us become familiar with how to get our own copy of Twitter Bootstrap, unzip the package, install the files, and examine those files to determine their purpose and meaning. In this lesson, we’re going to create a new HTML document and include the needed CSS, Javascript, Bootstrap components, and any third party libraries we may need to get ourselves fully Bootsrapified. Once this is complete, we can insert some Bootstrap markup to test our Bootstrap Install. Let’s do it!


Adding The CSS

We are going to be making use of a great free program from Adobe called Brackets. Brackets is a great little program that does a wonderful job of code editing and highlighting. It’s available for all platforms, so if you run a Mac, or Linux, or Windows, you will be able to make use of it, and best of all, it’s free! Of course you are free to use whatever IDE you choose, there are many available, and we all have our favorite. Some folks would rather go with a Sublime Text, while others enjoy using VIM. For the adventurous among us, we may just use good old notepad.exe and call it a day. Whichever one you choose, you are going to want to create a file called index.html in the bootstrap folder and populate it with the following code:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  This meta tag can often be found in responsive design websites.  The purpose of this tag is to make sure that the display of your HTML page will scale properly no matter if you are viewing the page on a desktop, smartphone, or tablet.

<link href="css/bootstrap.min.css" rel="stylesheet"> This link tag imports the Twitter Bootstrap CSS into our webpage. In this example, we link to the minified version for its speed and simplicity. Note that you only have to link to one or the other, but not both the minified and non minified versions.


Adding the Javascript

Let’s now add some Javascript to our example HTML File to add the interactivity and effects via Bootstrap. We will add three files of Javascript in this example. We will need the following:

  • jQuery jQuery is an incredible Javascript framework that makes programming the DOM, or Document Object Model, easy. The DOM is known to be a very tricky environment to deal with, and jQuery helps to alleviate some of the problems with cross browser anomalies we often run into. Of course you can get your copy of jQuery from the official website at http://jquery.com/
  • bootstrap.min.js bootstrap.min.js contains all of the pre written Javascript that powers the effects of the Twitter Bootstrap framework. This library works in concert with jQuery to perform it’s magic, so this is why we also include a copy of jQuery to support this requirement. When including jQuery and the Boostrap Javascript in your HTML page, you will want to make sure that jQuery comes first, since it is needed by Bootstrap’s Javascript in order to work.
  • respond.js The goal of respond.js is to provide a fast and lightweight way to enable responsive web design in browsers that otherwise would not be able to handle CSS3 Media Queries – in particular, Internet Explorer 8 and under. Unfortunately, there are still many many users out on the world wide web that are not as keen to keep their browsers up to date like most of us web design nuts are! You will need to get your copy at https://raw.githubusercontent.com/scottjehl/Respond/master/src/respond.js and simply save it to your js folder.

Our completed file will look something like this:

We can see that we have all the needed elements we have discussed so far in getting our page Twitter Bootstrap ready.


Test Your Install

It would stand to reason that we are now ready to begin creating web pages with our newly created HTML page which has all of our supporting files included to enable Bootstrap Design. We can paste some boilerplate HTML code into our page in order to test if our Bootstrap Install is working correctly. We’ll go ahead and create a Navbar, along with some Buttons and see if they render the way we would expect. Let’s modify our index.html file to look like so:

Cool! Save your file and you can now visit http://localhost/bootstrap and you should be greeted with something that looks like so:

twitter bootstrap success

Excellent – By the looks of things, it seems that some rudimentary Twitter Bootstrap markup is rendering correctly in our browser.


Conclusion

In this episode we were able to gather all of the requisite files together into an HTML page to actually enable the Bootstrap functionality to come to life. First we added the Bootstrap CSS, then jQuery, respond.js, and finally the minified version of the Bootstrap Javascript library. It may seem like a fair amount of legwork to go through just to get your environment up and running. In fact, these steps do take a little bit of time, especially when you’re first starting out. You’ll find that once you are used to the routine however, you will be able to blow through these steps in just a couple minutes. The benefits you gain are monumental. Your headaches of continually testing your design in 4 different browsers and 4 different versions of those browsers will be over. Simply by assigning the Bootstrap class names and HTML markup to your existing elements, you’ll be able to get great designs in place with a lot less effort. In our next episode, we’ll jump into the Twitter Bootstrap Grid System.