Bootstrap (Part 1)

Learning Source: http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

Bootstrap is a free front-end framework for faster and easier web development.

MaxCDN provide CDN support for Bootstrap’s CSS and JavaScript. Also include jQuery:

 
Advantage of using the Bootstrap CDN
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

There are two container classes to choose from:

  1. The .container class provides a responsive fixed width container
  2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Note: Containers are not nestable (you cannot put a container inside another container).

.container-fluid

Bootstrap Grid System

The Bootstrap grid system has four classes:

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

Bootstrap’s global default font-size is 14px, with a line-height of 1.428.

<mark>

Contextual Colors

Typography

Table

The .table-condensed class makes a table more compact by cutting cell padding in half.

Responsive Tables

Responsive images automatically adjust to fit the size of the screen.

Image Gallery

Responsive Embeds

Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.

 

What is aspect ratio?

The aspect ratio of an image describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television).

A jumbotron indicates a big box for calling extra attention to some special content or information.

%100 jumbotron

Page Header

Wells

sizes

Alerts

fade-in effect

Button Styles

A block level button spans the entire width of the parent element.

Add class .btn-block to create a block level button.

button group

drop down menus:

Glyphicon

Badges

Contextual Label

Progress Bar

stacked progress bar

Pagination

pager

aligning to left and right:

List Group With Linked Items