Cloudy River's Workshop: Bootstrap 3 Responsive Design Introduction

To add Bootstrap 3, insert following code to your web page.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap requires HTML 5 doc type, so always put following at the beginning of your web page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

Bootstrap is mobile first, to ensure proper rendering and zooming, put following at the beginning of your web page.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width sets the page width to screen width of the device. initial-scale=1 sets the initial zoom level when the page was first loaded.

Bootstrap divides screen size into 4 categories, and named with 4 classes accordingly.

Extra Small < 768px named with "xs"
Small < 992px named with "sm"
Medium < 1200px named with "md"
Large >= 1200px named with "lg"

Bootstrap used 2 types of containers to wrap all other web contents:

Fixed width container which has different fixed size for above 4 screens

<div class="container">
</div>

Full width container which takes up 100% of width regardless of screen size

<div class="container-fluid">
</div>

Note containers are not nestable, so you can't put container inside another container.

Following showed a basic Bootstrap web page:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>
</body>

Bootstrap Grid System, one of the most powerful features, can create great responsive design for all kinds of screen.

Rows must be placed inside .container or .container-fluid for proper align and padding
Rows are used to create horizontal group of columns.
The grid has maximum 12 columns for each row, thus any extra rows would be displayed in a new row.
Each columns has padding, which are spacing between columns and can do align with other columns.

Basic Structure of Bootstrap Grid:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
     ...  
  </div>
</div>

The first * could be xs, sm, md, lg, representing the 4 classes for different screen size, and the last * could be 1,2,3,4. The last * adds up should be always 12.

Example of Bootstrap Grid:

<div class="container">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="col-sm-4"></div>
  </div>
  <div class="row">
     ...  
  </div>
</div>

The first row of columns will be stacked when the screen size is less than 992px. The second row of columns will be stacked when the screen size is less than 768px.

Note the 4 different classes for different screen size can be combined together to create more flexible layout.

For example, for following code, if the screen is big enough, all will be displayed in one row. However, if the screen get smaller, col-sm-4 will be useless, and all col-xs-6 will be effective, and the last column will be displayed in another row.

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Bootstrap table has following classes:
.table .tablestrip .table-bordered .table-hover .table-condensed .table-responsive

The .tablestrip adds zebra strips to a table.
The .table-bordered adds borders for all sides of the table and cells.
The .table-hover enables hover states on each row.
The .table-condensed makes a table more compact through reduce the cell padding by half.
The .table-responsive makes table scroll horizontally on devices with small screen. Note it should be used with <div> outside the table.

<div class="table-responsive">
  <table class="table tablestrip table-bordered table-hover table-condensed">
    ...
  </table>
</div>

Bootstrap table row and column has following classes:
.active .success .info .warning .danger
.active adds hover color to table cells.

<tr class="success">
  <td>John</td>
  <td>Doe</td>
  <td>john@example.com</td>
</tr>

Bootstrap will let some elements show or hide, depending on the screen size:

Images can scale based on screen size by using .img-responsive class. The image will be scale while keep its aspect ratio. To center responsive image, using .center-block class.

Source:
http://getbootstrap.com/css/
http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
http://www.devx.com/webdev/easily-create-responsive-websites-using-bootstrap.html

Cloudy River's Workshop

Friday, October 23, 2015

Bootstrap 3 Responsive Design Introduction

No comments:

Post a Comment