8/13/2019 Bootstrap tutorial guide

1/16

9/26/20

Bootstrap Framework

ISE 408 Advanced Java

What is Bootstrap

Web UI Framework for faster and easier web

development

8/13/2019 Bootstrap tutorial guide

2/16

9/26/20

Bootstrap Bootstrap is a framework from Twitter for

rapidly developing web application.

It consists of CSS and HTML for typography,forms, buttons, tables, girds and more.

It also contains popular JavaScipt plugins formodal dialogue boxes, tooltips, carousel, drop

downs and much more.

Why do we need Bootstrap?

Faster, easier and consistent front-end webdevelopment.

Mostly the CSS files comes along with CMS

bundled, so you cant use them separately. Bootstrap is lightweight, and you can easily

use it with any application.

8/13/2019 Bootstrap tutorial guide

3/16

9/26/20

SETUP Download jQuery and Bootstrap

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://twitter.github.com/bootstrap/assets/bootstrap.zip

Unzip file. Put CSS, Javascript and images in the

correct folders. Add and tags to your layout.

SETUP

$(document).ready(function()){

...});

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

8/13/2019 Bootstrap tutorial guide

4/16

9/26/20

TYPOGRAPHY Headings

Default font-size 14px, line-height 20px.

Emphasis

Abbreviations

Addresses

Lists

TYPOGRAPHY

Heading

8/13/2019 Bootstrap tutorial guide

5/16

9/26/20

TYPOGRAPHY Emphasis

Make use of HTMLs default emphasis tags withlightweight styles.

This line of text is meant to be treated as fine print.

TYPOGRAPHY

Convey meaning through color.

Fusce dapibus, tellus ac cursus commodo, mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem venenatis.

Duis mollis, est non commodo luctus, nisi erat ligula.

8/13/2019 Bootstrap tutorial guide

6/16

9/26/20

TYPOGRAPHY Abbreviations

To show expanded version on hover.

TYPOGRAPHY

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600

San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@gmail.com

8/13/2019 Bootstrap tutorial guide

7/16

9/26/20

TYPOGRAPHY Lists

Unordered

Ordered

Unstyled

.

.

.

GRID

12 column grid.

940 px wide fixed layout

Fixed or Fluid layouts defined with:class=container / class=rowclass=container-fluid/ class=row-fluid

Define columns with class=span* andclass=offset* where * = your column size.

8/13/2019 Bootstrap tutorial guide

8/16

9/26/20

GRID

MAIN CONTENT

RIGHT SIDEBAR

ICONS

Glyphicons free to use

2 sprite images (black & white)

To use, just add the icon name as a class to an

tag. Example:

Useful for adding visual context to interactions.

http://glyphicons.com/http://glyphicons.com/

8/13/2019 Bootstrap tutorial guide

9/16

9/26/20

ICONS

ICONS

8/13/2019 Bootstrap tutorial guide

10/16

9/26/20

NAVBAR

Navbar/ Fixed Navbar (top/bottom)

Brand

Nav Links

Embeded Forms

NAVBAR

Title

HomeLinkLink

8/13/2019 Bootstrap tutorial guide

11/16

9/26/20

NAVBAR Brand

A simple link to show your brand or project name.requires only anchor.

NAVBAR

Nav links are simple to add.

8/13/2019 Bootstrap tutorial guide

12/16

9/26/20

FORMS in Navigation Automatic for input elements.

Versatile layout configurations

4 layout options Vertical, Inline, Search andHorizontal

Adding class to form tag sets the layout:

class=inline-form, class=form-horizontal

For default form, include class=navbar-formand either class=pull-left or class=pull-rightto properly align it.

FORMS in Navigation

Default form

Submit

8/13/2019 Bootstrap tutorial guide

13/16

8/13/2019 Bootstrap tutorial guide

14/16

9/26/20

TOOLTIPS & POPOVER Tooltips and popovers provides 2 ways of adding

contextual information within an interface.

Content included in tag using the title ordata attributes.

TOOLTIPS

Lorem ispum dolor sit amet, consectur adipising elit.

$(document).ready(function(){ $(a[rel=tooltip]).tooltip() });

8/13/2019 Bootstrap tutorial guide

15/16

9/26/20

POPOVER

Lorem ispum dolor sit amet, consectur adipising elit.

$(document).ready(function(){ $(a[rel=popover]).popover()});

LINKS

http://twitter.github.com/bootstrap/base-css.html

http://twitter.github.com/bootstrap/components.html.

http://twitter.github.com/bootstrap/javascript.html

http://twitter.github.com/bootstrap/scaffolding.html

http://twitter.github.com/bootstrap/base-css.htmlhttp://twitter.github.com/bootstrap/components.htmlhttp://twitter.github.com/bootstrap/javascript.htmlhttp://twitter.github.com/bootstrap/scaffolding.htmlhttp://twitter.github.com/bootstrap/scaffolding.htmlhttp://twitter.github.com/bootstrap/javascript.htmlhttp://twitter.github.com/bootstrap/components.htmlhttp://twitter.github.com/bootstrap/base-css.htmlhttp://twitter.github.com/bootstrap/base-css.htmlhttp://twitter.github.com/bootstrap/base-css.html

8/13/2019 Bootstrap tutorial guide

16/16

9/26/20