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.
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.
- 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)
- Choose the downloaded Bootstrap folder for your website.
- Then, create a new page. Make sure to choose HTML 5. (File -> New from the menu-> choose HTML -> HTML5 from the list)
- Change title, save as index.html in the Bootstrap folder.
- Now, we need a Bootstrap file template. Lets recreate it step by step. You can refer to Bootstrap website for the reference.
- 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
- 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
- That is all. You are set to start developing websites in Bootstrap.
- 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: