bootstrap framework

Web Design Technology 1

By Yaowaluck Promdee, Dr.Sumonta Kasemvilas

Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web.


What is Bootstrap?• Scaffolding – grid system• Base CSS – typography, tables, forms, images• Components – navigation, breadcrumbs, pagination• JavaScript – jQuery plugins


Why use Bootstrap?

• Easy to use• Responsive features• Mobile-first approach• Browser compatibility


Get Started Bootstrap

• Download Bootstrap from getbootstrap.com

• Include Bootstrap from a CDN

Bootstrap CDN• Download form a CND (Content Delivery Network)

<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>


Download Bootstrap

BootstrapCompiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

Source codeSource Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

SassBootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

https://github.com/twbs/bootstrap/archive/v3.3.5.zip

https://github.com/twbs/bootstrap-sass/archive/v3.3.5.tar.gz


Create Webpage with Bootstrap

1. Add the HTML5 doctype

2. Bootstrap 3 is mobile-first

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

The WIDTH=DEVICE-WIDTH part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The INITIAL-SCALE=1 part sets the initial zoom level when the page is first loaded by the browser.


Create Webpage with Bootstrap

3. Containers

Bootstrap also requires a containing element to wrap site contents.There are two container classes to choose from:

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


Grid systemExtra small devices Phones (<768px)

Small devices tablet (>=768px)

Medium devices Desktops (>=992px)

Large devices Desktop (>=1200px)

Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoint

Max container width

None(auto) 750pz 970pz 1170px

Class prefix .col-xs- .col-sm- .col-md- .col-lg-

# of columns 12

Gutter width 30px (15px on each side of column)

Max column width Auto 60px 78px 95px

Offsets/Column ordering

N/A Yes


Grid system

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

Grid systemFor Mobile and Desktop

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


Responsive tables.table /.table-striped / .table-bordered/ .table-hover

<body><div class="container"><table class="table table-striped”>…<!– Table here --></table></div></body> …

…<head><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>


Bootstrap Images

Image shapes

<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">


Bootstrap PagerPager is also a form of pagination (as described in the previous chapter).Pager provides previous and next buttons (links).To create previous/next buttons, add the .pager class to an <ul> element:

<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li></ul>

Align ButtonsUse the .previous and .next classes to align each button to the sides of the page


Navigation BarsBootstrap Navigation bar

A standard navigation bar is created with <nav class=“navbar-default”>

Just change the .navbar-default class into .navbar-inverse

The .navbar-fixed-top class makes the navigation bar fixed at the top


Bootstrap FormsStandard rules for all three form layouts:• Always use <form role="form">

(helps improve accessibility for people using screen readers)

• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)

• Add class .form-control to all textual <input>, <textarea>, and <select> elements


ComponentsGlyphicons

<button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>

http://glyphicons.com/


BreadcrumbsIndicate the current page's location within a navigational hierarchySeparators are automatically added in CSS through :before and content.class breadcrumb

<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li></ol>


Custom content<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div></div>


Using the framework

Starter templateNothing but the basics: compiled CSS and JavaScript along with a container.

Bootstrap themeLoad the optional Bootstrap theme for a visually enhanced experience.

GridsMultiple examples of grid layouts with all four tiers, nesting, and more.

http://getbootstrap.com/examples/starter-template/

http://getbootstrap.com/examples/theme/

http://getbootstrap.com/examples/grid/


Using the framework

JumbotronBuild around the jumbotron with a navbar and some basic grid columns.

Narrow jumbotronBuild a more custom page by narrowing the default container and jumbotron..

http://getbootstrap.com/examples/jumbotron/

http://getbootstrap.com/examples/jumbotron-narrow/


Bootstrap Case

Reference: w3shools.com, getbootstrap.com


Assignment

Create a web page to present “Principles of Web Design”from information provided using Bootstrap

In hours time

bootstrap framework

Education