Twitter Bootstrap

NAVODAYA INSTITUTE OF TECHNOLOGY

RAICHUR

SEMINAR ON

TWITTER BOOTSTRAP

By,

VINAYAK(3NA11CS026)

Agenda

Part I: Introduction

Part II: Bootstrap Packages

Agenda

Part I: Introduction What is Bootstrap ?

Why Bootstrap ?

How to Install Bootstrap ?

Basic HTML Template

What is Bootstrap ?

Bootstrap is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Bootstrap uses HTML, CSS, and Javascript framework for developing.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework in 2014.

Why Bootstrap ?

Bootstrap is open source. It's hosted, developed, and maintained on GitHub.

Browser Support. Easy to get started. One framework, every device.

Why Bootstrap ?

Built in Html/Css/Js Built in Grid System. Responsive Design.

EXAMPLE OF RESPONSIVE WEB DESIGN

How to Install Bootstrap ?

Download the Bootstrap framework from http://getbootstrap.com/

Extract Bootstrap.zip

How to Install Bootstrap?

The following file/directory structure :

Basic HTml template

Agenda

Part II: Bootstrap Packages

CSS - Defines how the data and elements actually look how they behave when interacting with them.

Components - Bootstrap contains over a dozen reusable components built to provide dropdown ,navigation and much more.

JavaScript Plugins - Bootstrap contains over a dozen custom jQuery plugins.

CSS, Components, JavaScriptCSS Components

JavaScript

Grid System Glyphicons Modal

Typography Pagination ScrollSpy

Table Dropdowns Collapse

Forms

Pager Carousel

Buttons Navigation Bar

Images Jumbotron

Progress Bar

BOOTSTRAP GRID SYSTEM • Grid system allows upto 12 columns across the

page.

• If you do not want to use all 12 column individually, you can group the columns together to create wider columns.

 • It is responsive, and the columns will re-arrange automatically depending on the screen size.

GRID CLASSESFour Classes:

•xs (for phones)

•sm (for tablets)

•md (for desktops)

•lg (for larger desktops)

Basic Structure of a Bootstrap Grid for tablets:

On mobile phones, the columns will automatically stack: .col-sm-4

.col-sm-4

.col-sm-4

.col-sm-4 .col-sm-4 .col-sm-4

BOOTSTRAP TYPOGRAPHY•TYPOGRAPHY

creates headings,paragraphs,lists and other inline elements.

IMAGESThree classes:

• .img-rounded: class adds Rounded corners to an images .

• .img-circle: class shapes the image to a circle.

• .img-thumbnail: class shapes the image to a thumbnail.

Syntax:

BOOTSTRAP BUTTONS •Button Styles

○Bootstrap provides seven styles of buttons.

○To achieve the button styles above, Bootstrap has the following classes.

Syntax:

Bootstrap GLYPHICONS• Glyphicons : Includes 200 glyphs in font

format from the Glyphicon Halflings set.

Syntax:

Syntax:

NAVIGATION BAR• A navigation bar is a navigation header that is placed

at the top of the page.

• Can be created using as following nav classes

Syntax: • • •

JUMBOTRON•A jumbotron indicates a big box for calling extra

attention to some special content or information.

•A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

•Use a <div> element with class .jumbotron

•Example:

PAGINATION• If you have a web site with lots of pages, you

may wish to add some sort of pagination to each page.

• Example:

• Output

PAGER

• Pager is also a form of pagination.

• Pager provides previous and next buttons(links).

• add the .pager class to an <ul> element

• Example:

• Output

CAROUSEL• Carousel plugin is a component for

cycling through elements, like a slideshow.

• This plugin is included in "bootstrap.js"

ANY QUERIES??