Bootstrap Responsive Front-End Framework

From Knowledge Kitchen
Jump to navigation Jump to search


Overview

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. In March 2014 it was the No.1 project on GitHub with 65,000+ stars and 23,800 forks, with a user base including MSNBC and NASA.

It is licensed under a variety of copyleft license.


Front-end frameworks

Front-end frameworks, of which Bootstrap is one, are toolkits that help web developers create the front-end, the visible user interfaces of web pages. They do so by offering many prepackaged user interface components (written in HTML + CSS) and functionalities (written in Javascript) that the web developer can then add to their own pages easily. They are generally created in such a way that the web designer need not know how they work, but simply must know how to integrate them into the page properly.

User interface components

Bootstrap includes CSS code that applies a modern style to many common user interface components, including:

  • links
  • buttons
  • lists
  • navigation bars
  • thumbnail images
  • drop-down menus

References:

  • View the Getting Started documentation to see the full range of styles and components Bootstrap offers.
  • All the default styles in this theme can be customized, while still maintaining the elegant features of the theme as a whole.
    • Simply override any of Bootstrap's CSS styles in your own custom CSS file to customize your page.

Layouts

Bootstrap includes tools to help simplify common layout issues of web pages, such as:


Grid layout

Bootstrap offers a grid layout system, which breaks down the content of any page into a series of rows and columns. The position of any element on the page can then be specified in terms of which row or column to place it in. This is achieved by simply adding specific classes to the HTML tags of elements that you would like to position this way.

The grid layout can easily be designed to be responsive to devices with different browser widths.

Responsive design

Bootstrap was developed according to the mobile-first methodology, meaning that mobile compatibility has been included into all features of the framework.

Two features, in particular, simply the design of sophisticated responsive sites:

  • easily specify the grid layout position of any element on the page at all responsive breakpoints by simply specifying the class attribute in the HTML
  • design any element to appear or disappear at each responsive breakpoint using special responsive utility classes, also used in the class attribute in the HTML.

Fixed top navigation

Bootstrap allows for simple creation of navigation that "sticks" to the top of the browser viewport.

Interactive widgets

Additional tools allow designers to add sophisticated interactive components to their pages that would otherwise require extensive knowledge of Javascript programming.

A few common widgets:

Install Bootstrap via download

Bootstrap is nothing more than a bunch of CSS and Javascript files, along with a few font files. To install Bootstrap, you simply have to link to these files from your HTML file.

To do this, you will need to be familiar with some fundamental computer tasks, such as downloading files and then finding them on your hard drive, creating folders, moving folders, unzipping compressed files, linking files with proper file paths, and writing HTML code.

  1. Create a new folder for your project
  2. Create a typical project folder setup, with css, js, and images sub-folders
  3. Download the latest Bootstrap code from the Bootstrap web site
  4. The downloaded file is a compressed zip file. Unzip it.
  5. Find the Bootstrap CSS and Javascript files and move them to your project folder's css and js sub-folders, respectively
  6. Add your own custom CSS file into the CSS folder - you will add any customizations into this file.

Many of Bootstrap's features depend upon another popular Javascript framework called JQuery.

Install from CDN hosted files

Instead of downloading the CSS and Javascript files necessary to install Bootstrap, it is possible to simply link to already-online versions of these files hosted for free by content delivery network companies. They host these files so you don't have to.

The Boostrap Getting Started instructions contain links to these CDN-hosted versions of the CSS and Javascript files as well as example code HTML code to link to these. Copy the example code.

Try it out

You are now ready to add links to these Bootstrap files to your own HTML code.

  1. Create a new HTML file named index.html in your project folder
  2. Link your HTML file to the Bootstrap CSS file, bootstrap.min.css
  3. Link your HTML file to the JQuery Javascript file, jquery-x.y.z.min.js (replace x.y.z with whatever the latest version number is)
  4. Link your HTML file to the Bootstrap Javascript file, bootstrap.min.js
  5. Save the file
  6. Open the file in your web browser
  7. Verify that all the linked files have indeed loaded by viewing the Network tab of your web browser's Developer Tools

If text in the body of your web page shows up in a sans-serif font (Helvetica Neue Medium), then you have correctly loaded up the Bootstrap default theme! But if the text appears instead in a serif font (Times Bold), then it is not working.

Once you have this working, go on and try to adapt some of the other examples.


What links here