Unit-3

BOOTSTRAP

 Twitter Bootstrap is the most popular front end framework in the recent
time.
 It is sleek, intuitive, and powerful mobile first front-end framework for
faster and easier web development.
 It uses HTML, CSS and Javascript.

Why to Learn Bootstrap?

 Mobile first approach
 Bootstrap 3, framework consists of Mobile first styles throughout
the entire library instead them of in separate files.

 Browser Support
 It is supported by all popular browsers.
  Easy to get started
 With just the knowledge of HTML and CSS anyone can get started
with Bootstrap.
 Bootstrap official site has a good documentation.

 Responsive design
 Bootstrap's responsive CSS adjusts to Desktops, Tablets and
Mobiles.
 Provides a clean and uniform solution for building an interface for
developers.
 It contains beautiful and functional built-in components which are
easy to customize.
 It also provides web based customization.
 And best of all it is an open source.

What Bootstrap Package Includes?

  Scaffolding

 Bootstrap provides a basic structure with Grid System, link styles,

and background.
 CSS
 Bootstrap comes with the feature of global CSS settings,
fundamental HTML elements styled and enhanced with extensible
classes, and an advanced grid system.

 Components

 Bootstrap contains over a dozen reusable components built to

provide iconography, dropdowns, navigation, alerts, pop-overs,
and much more.

 JavaScript Plugins

 Bootstrap contains over a dozen custom jQuery plugins.

 Customize

 You can customize Bootstrap's components, LESS variables, and

jQuery plugins to get your very own version.

Bootstrap - Environment Setup

Download Bootstrap
  You can download the latest version of Bootstrap
from https://getbootstrap.com/.

Here you can see two buttons −

 Download Bootstrap

 Clicking this, you can download the precompiled and minified

versions of Bootstrap CSS, JavaScript, and fonts.
 No documentation or original source code files are included.

 Download Source

 Clicking this, you can get the latest Bootstrap LESS and
JavaScript source code directly from GitHub.

File structure

Precompiled Bootstrap

 Once the compiled version Bootstrap is downloaded, extract the ZIP file,
and you will see the following file/directory structure −

 As you can see, there are compiled CSS and JS (bootstrap.*), as well as
compiled and minified CSS and JS (bootstrap.min.*).
  Fonts from Glyphicons are included, as it is the optional Bootstrap
theme.

Bootstrap Source Code

 If you have downloaded the Bootstrap source code then the file structure
would be as follows −

 The files under less/, js/, and fonts/ are the source code for Bootstrap
CSS, JS, and icon fonts (respectively).
 The dist/ folder includes everything listed in the precompiled download
section above.
 docs-assets/, examples/, and all *.html files are Bootstrap documentation.

Bootstrap - Grid System

What is a Grid?
  In graphic design, a grid is a structure (usually two-dimensional) made
up of a series of intersecting straight (vertical, horizontal) lines used to
structure the content.
 It is widely used to design layout and content structure in print design.
 In web design, it is a very effective method to organise and structure
content, makes the websites easy to scan and reduces the cognitive load
on users.

What is Bootstrap Grid System?

 Bootstrap includes a responsive, mobile first fluid grid system that

appropriately scales up to 12 columns as the device or viewport size
increases.
 It includes predefined classes for easy layout options.

Mobile First Strategy

 Content
o Determine what is most important.

 Layout
o Design to smaller widths first.
o Base CSS address mobile device first; media queries address for
tablet, desktops.

 Progressive Enhancement
o Add elements as screen size increases.

Working of Bootstrap Grid System

 Rows must be placed within a .container class for proper alignment and
padding.
  Use rows to create horizontal groups of columns.
 Content should be placed within the columns, and only columns may be
the immediate children of rows.
 Predefined grid classes like .row and .col-xs-4 are available for quickly
making grid layouts
 Columns create gutters (gaps between column content) via padding.
 Grid columns are created by specifying the number of twelve available
columns you wish to span.

Grid options
The following table summarizes aspects of how Bootstrap grid system works
across multiple devices
Basic Grid Structure

<div class = "container">

<div class = "row">

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

<div class = "container">

....
</div>
Offset Columns

 Offsets can be used to push columns over for more spacing.

 The .col-xs = * classes don’t support offsets, but they are easily
replicated by using an empty cell.
 To use offsets on large displays, use the .col-md-offset-* classes.
 These classes increase the left margin of a column by * columns
where * range from 1 to 11.

<div class = "container">

<h1>Hello, world!</h1>

<div class = "row" >

<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>The National College Jayanagar.</p>
</div>

</div>
</div>

Column Ordering

 You can easily change the order of built-in grid columns with .col-md-
push-* and .col-md-pull-* modifier classes where * range from 1 to 11.
 In the following example we have two columns layout with left column
being the narrowest and acting as a sidebar.
 We will swap the order of these columns using .col-md-push-* and .col-
md-pull-* classes.

<div class = "container">

<h1>Hello, world!</h1>
 <div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>

</div>

Bootstrap - Buttons
 Anything that is given a class of .btn will inherit the default look of a
gray button with rounded corners.
 However, Bootstrap provides some options to style buttons, which are
summarized in the following table −
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of
buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->

<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->

<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->

<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining

button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Button Size

The following table summarizes the classes used to get buttons of various
sizes.
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>

<button type = "button" class = "btn btn-default btn-lg">

Large button
</button>
</p>

<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>

<button type = "button" class = "btn btn-default">

Default size button
</button>
</p>

<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>

<button type = "button" class = "btn btn-default btn-sm">

Small button
</button>
</p>

<p>
<button type = "button" class = "btn btn-primary btn-xs">
 Extra small Primary button
</button>

<button type = "button" class = "btn btn-default btn-xs">

Extra small button
</button>
</p>

<p>
<button type = "button" class = "btn btn-primary btn-lg btn-
block">
Block level Primary button
</button>

<button type = "button" class = "btn btn-default btn-lg btn-

block">
Block level button
</button>
</p>

Bootstrap - Dropdowns
 Dropdown menus are toggleable, contextual menus for displaying links
in a list format.
 This can be made interactive with the dropdown JavaScript plugin.
 To use dropdown, just wrap the dropdown menu within the
class .dropdown.
<div class = "dropdown">

<button type = "button" class = "btn dropdown-toggle" id =

"dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>

<ul class = "dropdown-menu" role = "menu" aria-labelledby =

"dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>

<li role = "presentation">

<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>

<li role = "presentation">

<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>

<li role = "presentation" class = "divider"></li>

<li role = "presentation">

<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
 </li>
</ul>

</div>

Options

Alignment
 Align the dropdown menu to right by adding the class .pull-
right to .dropdown-menu.

<div class = "dropdown">

<button type = "button" class = "btn dropdown-toggle" id =
"dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby =
"dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>

<li role = "presentation">

<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>

<li role = "presentation">

 <a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>

<li role = "presentation" class = "divider"></li>

<li role = "presentation">

<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>

</div>