[Hacking Bootstrap] Bootstrap: an Introduction

[Hacking Bootstrap] Bootstrap: an Introduction

Bootstrap is one of the most popular HTML/CSS/JS frameworks for building responsive websites. “Responsive” means that the website’s content will automatically rearrange itself when the browser’s width changes. As a result, a responsive website can be viewed either by computer screens, tablets, or mobile phones.

blog_bs_1

Full screen website.

blog_bs_2

When browser width shrinks, the components’ size shrink as well.

blog_bs_3

Further shrinking the browser width triggers web component re-arrangement from 2 columns to one column. Notice also that the top header bar becomes a square.

Normally building a responsive website requires a lot of if/else codes to tell the browser how to rearrange content when its width changes. Bootstrap saves time and efforts by reducing these coding into simple HTML tags. To use bootstrap is simple: here lists several ways to use BootStrap in your website. The simplest way is to include a <link>  tag and Bootstrap’s JS with the <script> tag.

 

Once your website includes bootstrap, you can learn the various tags to use from the Bootstrap website. They provide templates that you can just copy, paste, and experiment.

 

This [Hacking Bootstrap] series are tips to go one step further and customize/enhance bootstrap. By customizing how bootstrap looks/acts one can tailor Bootstrap to fit his/her website better. Hopefully these tips can make your website more unique and fascinating!