Scribd
Upload
12 views38 pages

BootstrapJS New

Uploaded by

Habib Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views38 pages

BootstrapJS New

Uploaded by

Habib Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

BootstrapJS

BootstrapJS

CONFIDENTIAL: For limited circulation only Slide 1


Lesson Objective

Introduction
o Why Bootstrap 3
o Designers and Developers
o The Mobile Web
o Responsive Web Design
o Mobile First Responsive Web Design
o Bootstrapping of the Web

Achieve Responsive Layouts using Bootstrap3


o Fluid Grid System for Responsive Layout
o What is the Grid System?
o Using the Grid System for responsive layout
o Scale up layout
o Multiple Grid Types
o Using Multiple Grids
o Offsets and Rows

Responsive Navigation with Bootstrap3


o Bootstraps Navbar
o Styling the Navbar
o Logo
o Scrolling

CONFIDENTIAL: For limited circulation only Slide 2


What is Bootstrap?

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


development

● Bootstrap includes HTML and CSS based design templates for


typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins

● Bootstrap also gives you the ability to easily create responsive


designs

CONFIDENTIAL: For limited circulation only Slide 3


Bootstrap History

● Bootstrap was developed by Mark Otto and Jacob Thornton at


Twitter, and released as an open source product in August 2011 on
GitHub.

● In June 2014 Bootstrap was the No.1 project on GitHub!

CONFIDENTIAL: For limited circulation only Slide 4


Why Bootstrap?

● Easy to use: Anybody with just basic knowledge of HTML and CSS
can start using Bootstrap

● Responsive features: Bootstrap's responsive CSS adjusts to phones,


tablets, and desktops

● Mobile-first approach: In Bootstrap 3, mobile-first styles are part


of the core framework

● Browser compatibility: Bootstrap is compatible with all modern


browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

CONFIDENTIAL: For limited circulation only Slide 5


Install Bootstrap?

● Download Bootstrap from


http://getbootstrap.com

● Include Bootstrap from a CDN (Content Delivery Network)


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

<!-- jQuery library -->


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->


<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></scri
pt>

CONFIDENTIAL: For limited circulation only Slide 6


Bootstrap Grid System

● Bootstrap's grid system allows up to 12 columns across the page.

● The Bootstrap grid system has four classes:


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

CONFIDENTIAL: For limited circulation only Slide 7


Typography

● Classes operate on text


● .lead Makes a paragraph stand out
● .small Indicates smaller text (set to 85% of the size of the parent)
● .text-left Indicates left-aligned text
● .text-center Indicates center-aligned text
● .text-right Indicates right-aligned text
● .text-justify Indicates justified text
● .text-nowrap Indicates no wrap text
● .text-lowercase Indicates lowercased text
● .text-uppercase Indicates uppercased text
● .text-capitalize Indicates capitalized text

CONFIDENTIAL: For limited circulation only Slide 8


Tables

Table classes

● .table
● .bordered
● .hover
● .striped

CONFIDENTIAL: For limited circulation only Slide 9


BootstrapJS
Responsive Layouts using Bootstrap3

CONFIDENTIAL: For limited circulation only Slide 10


Lesson Objective

Responsive Layouts using Bootstrap3


• Fluid Grid System for Responsive Layout
• What is the Grid System?
• Using the Grid System for responsive layout
• Scale up layout
• Multiple Grid Types
• Using Multiple Grids
• Offsets and Rows

CONFIDENTIAL: For limited circulation only Slide 11


Fluid Grid System for Responsive Layout

CONFIDENTIAL: For limited circulation only Slide 12


Fluid Grid System for Responsive Layout

CONFIDENTIAL: For limited circulation only Slide 13


Scale up layout

CONFIDENTIAL: For limited circulation only Slide 14


Basic Structure of Bootstrap

CONFIDENTIAL: For limited circulation only Slide 15


Bootstrap grid system works across multiple devices

CONFIDENTIAL: For limited circulation only Slide 16


Basic Structure of Bootstrap

CONFIDENTIAL: For limited circulation only Slide 17


Basic Structure of Bootstrap

CONFIDENTIAL: For limited circulation only Slide 18


Basic Structure of Bootstrap

CONFIDENTIAL: For limited circulation only Slide 19


Basic Structure of Bootstrap

CONFIDENTIAL: For limited circulation only Slide 20


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 21


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 22


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 23


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 24


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 25


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 26


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 27


Navigation with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 28


Imaging with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 29


Imaging with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 30


Imaging with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 31


Imaging with Bootstrap

CONFIDENTIAL: For limited circulation only Slide 32


Bootstrap - Scrollspy

CONFIDENTIAL: For limited circulation only Slide 33


Bootstrap - Scrollspy

CONFIDENTIAL: For limited circulation only Slide 34


Bootstrap ButtonGroup

CONFIDENTIAL: For limited circulation only Slide 35


Bootstrap Breadcrumbs

A breadcrumb is a navigation scheme that indicates current page's


location to the user within a website or application. Breadcrumb
navigation can greatly enhance the accessibility of the websites having a
large number of pages

CONFIDENTIAL: For limited circulation only Slide 36


Bootstrap - theme

CONFIDENTIAL: For limited circulation only Slide 37


Bootstrap - theme

CONFIDENTIAL: For limited circulation only Slide 38

You might also like