Twitter Bootstrap - Introduction

Bootstrap [Lab 1]

Bootstrap can be used to build website quickly and easily. Bootstrap is a front-end framework developed at Twitter to streamline building websites. Front-end refers to a client side of the website and is displayed at the browser window. Framework is a bunch of code that has been written for you already, which you can use to build your website.

Bootstrap comes with both CSS, JavaScript, and a few extra image files that you can use on your website. It supports both adaptive layouts and responsive design, depending of which type of grid you choose.

A 12 column grid system is available, as well as multiple navigation systems, including tabs, pills, buttons, drop downs, as well as some JS effects, like model windows and images carousel.

You can explore examples of websites built with bootstrap at www.builtwithbootstrap.com

Now, let's download Bootstrap and examine its file structure. You can find Bootstrap at http://getbootstrap.com

Bootstrap file template

We are going to create an html page. You are welcome to use any sort of program what so ever that will allow you to edit HTML and CSS files. I'm going to be using Dreamweaver. I'm in a default designer view.

  1. As always, the very first thing I advice to do when working in Dreamweaver, is to create a Dreamweaver site. (Site -> New Site from the menu on top)
  2. Choose the downloaded Bootstrap folder for your website.
  3. Then, create a new page. Make sure to choose HTML 5. (File -> New from the menu-> choose HTML -> HTML5 from the list)
  4. Change title, save as index.html in the Bootstrap folder.
  5. Now, we need a Bootstrap file template. Lets recreate it step by step. You can refer to Bootstrap website for the reference.
    1. In the head part of the code, we are going to add a metatag that set a viewport with initial scale 1, which is important for responsive design
    2. Then, attach Bootstrap style sheet. If you hit refresh from the styles panel, you should be able to see the styles palette as it normally appears. Down at the bottom, there is a link icon to attach a style sheet. First, attach Bootstrap.css, then Bootstrap-responsive.css
    3. You can add this optional piece of JavaScript, to make your website more compatible with IE
    4. To the body part of the code add JavaScript declarations. First, the script to load jquery, which is a JavaScript framework from a jquery website. Then, add the Bootstrap JavaScript file that makes Bootstrap JavaScript work.
  6. That is all. You are set to start developing websites in Bootstrap.

Notes

  • The difference between .min and normal CSS and JavaScript files is that .min files are optimized for more effective loading and thus, not human-readable. You can use either of them.
  • I've taught Bootstrap while working as a Teaching Assistant for Interface Design course in Spring 2013. Here are lab 1 slides for your reference: