Bootstrap [part 2]

Button java script
• Button Method
Method Description
.button("toggle") Makes the button look pressed
.button("loading") Disables the button and changes the button text to
"loading..."
.button("reset") Changes the button text to original text (if changed)
.button("string") Specifies a new button text

.button("toggle")
<body>
<div class="container">
<h2>Button Methods</h2>
<p>The <strong>toggle</strong> method makes the button look pressed. Click on both buttons, but also click outside the button afterwards to
see the difference.</p>
<button type="button" class="btn btn-default">Button (toggle)</button>
<button type="button" class="btn btn-default">Button (no toggle)</button>
</div>
<script>
$(document).ready(function(){
$(".btn-default:first").click(function(){
$(this).button('toggle');
});
});
</script>
</body>

.button("loading")
<body>
<p>The <strong>loading</strong> method disables the button and changes the button text to "loading...".</p>
<button type="button" class="btn btn-default">Example Button</button>
</div>
<script>
$(".btn").click(function(){
$(this).button('loading');
});
});
</script>
</body>

.button("reset")
<body>
<p>The <strong>reset</strong> method changes the button text to its original text (if changed).</p>
<button type="button" class="btn btn-default">Example Button</button>
</div>
<script>
$(this).button("loading").delay(500).queue(function(){
$(this).button("reset");
$(this).dequeue();
});
});
});
</script>
</body>

.button(“string”)
<body>
<p>The <strong>string</strong> method changes the button text.</p>
<p><strong>Note:</strong> You must add the <strong>data-STRING-text</strong> attribute with a value of the specified
button text, for this example to work.</p>
<button type="button" class="btn btn-default" data-somestringvalue-text="Loading Finished" autocomplete="off">Example Button</button>
</div>
<script>
$(this).button('loading').delay(1000).queue(function(){
$(this).button('somestringvalue');
$(this).dequeue();
});
});
});
</script>
</body>

Dropdowns
• The .dropdown class indicates a drop down menu.
• To open the dropdown menu, use button or a link with a
class of .dropdown-toggle attribute.
• The .caret class creates an caret arrow icon, which
indicates that the button is dropdown.
• Add the .drop-menu class to a <ul> elements to actually
build the dropdown menu.
• The .divider class is use to separate links inside the
dropdown menu with a thin horizontal border.

Example
<body>
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</body>

Disable and Active item
• Highlights a specific dropdown item with the .active class.(adds a blue
background color)
• To disable an item in the dropdown menu, use the .disable class.(gets
a light-grey text color and a “no-parking-sign” icon on hover)
• Example
• <li class=“disabled”><a href=“#”>CSS</a></li>
• <li class=“active”><a href=“#”>HTML</a></li>

example
<body>
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item (grey text color).</p>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<li><a href="#">Normal</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Normal</a></li>
</ul>
</div>
</div>
</body>

Dropup
• If you want the dropup menu to expands upwards instead of
downwards, change the <div> element with class=“dropdown” to
“dropup”
• Example
• <div class=“dropup”>

Example
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</body>

Via JavaScript
• Enable manually with:
• Example
• $(‘.dropdown-toggle’).dropdown();

Example
<body>
<h2>Dropdown Example</h2>
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul></div><br>
<p><strong>Note:</strong> The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.</p>
</div>
<script>
$(".dropdown-toggle").dropdown();
});
</script>
</body>

Dropdown events
Event Description
Show.bs.dropdown Occurs when the dropdown is about to be shown.
shown.bs.dropdown Occurs when dropdown is fully shown.(after CSS transition
has completed)
Hide.bs.dropdown Occurs when the dropdown is about to hidden
Hidden.bs.dropdown Occurs when the dropdown is fully hidden.(after CSS
transition has completed)

Navigation Bars
• A navigation bar is a navigation header that is placed at the top
of the page
• With Bootstrap, a navigation bar can extend or collapse,
depending on the screen of size.
• A standard navigation bar is created with <nav class=“navbar
navbar-default”>
• If you don’t line the style of the default navigation bar,
Bootstrap provides an alterative, black navbar:
• Just change the .navbar-default to .navbar-inverse.

Navigation bar with Dropdown
• Navigation bar can also hold dropdown menus.

Example
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span
class="caret"></span></a>
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
</ul> </li>
<li><a href="#">Page 2</a></li> </ul>
</div></nav>
</body>

Continue..
• The .navbar-right class is use to right-align the navigation bar
buttons.
• The .navbar-btn class is use to add button in the navigation bar.
• The .navbar-form class is use to add element inside the navigation
bar.
• The .navbar-text class is use to add text into the navigation bar. This
text is not a link this text is normal text.
• The .navbar-fixed-top class can fixed the navbar at top of the page.
• The .navbar-fixed-bottom class can fixed the navbar at bottom of
the page.
• A fixed navigation bar stays visible in a fixed position (top or bottom)
independent of the page scroll.

Pagination
• The following table list the classes that bootstrap provides
to handle the pagination.
Class Description
.pagination Add this class to get the pagination on your page.
.disabled,
.active
You can customize the links by using .disabled for
unclickable links and .active to indicate the current
page.
.pagination-lg,
.pagination-sm
Use this classes to get different size items.

Example
<body>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li class = "active"><a href = "#">1</a></li>
<li class = "disabled"><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
</body>

List Groups
• The most basic group is an unordered list with list items.
• To create basic list group, use an <ul> element with class
.list-group, and <li> element with class .list-group-item.
• Example
<ul class=“list-group”>
<li class=“list-group-item”>first item</li>
</ul>

List group with badge
• You can also add badges to a list group. The badge will automatically be
positioned on the right.
• To create badge, create a <span> element with class .badge inside the list
item.
• Example
<ul class=“list -group”>
<li class=“list-group-item”>Songs</li>
<li class=“list-group-item”>Movies<span class=“badge”>New</span></li>
<li class=“list-group-item”>Clips</li >
</ul>

List group with linked items with active
and disabled state
• The item in a list group can also be hyperlinks. This will add
grey background color on hover.
• To create a list group with linked items, use <div> instead of
<ul> and <a> instead of <li>.
• example
<div class=“list-group”>
<a href=“#” class=“list-group-item active”>first item</a>
<a href=“#” class=“list-group-item disabled”>second item</a>
<a href=“#” class=“list-group-item”>third item</a>
</div>

<body>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="customDiv">ALL Screens</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 hidden-xs">
<div class="customDiv">Medium, Large and Small</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 visible-lg visible-md">
<div class="customDiv">Medium and Large </div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 hidden-xs hidden-sm
hidden-md">
<div class="customDiv">Large</div>
</div>
</div></div>
</body>
Example: reps.html

Print classes
• Similar to the regular responsive classes, you can use the
following utility classes to show or hide certain elements
for printing purpose.

<body>
<div class="row">
<div class="col-xs-12 hidden-print">
<div class="customDiv">Visible on browser NOT when printing</div>
</div>
<div class="col-xs-12 visible-print">
<div class="customDiv">Visible when printing</div>
</div>
</div>
</div>
</body>
Example: print.html

Responsive embed
• It allow browsers to determine video or slideshow dimensions based
on the width of their containing block by creating an intrinsic ratio
that will properly scale on any device.
• Classes can be applied directly to <iframe>, <embed>, <video>, and
<object> elements.
• There are two aspect ratio classes:
• 4:3 [universal video format]
• 16:9 [HD laptop,television]

<body>
<h2>Responsive Embed</h2>
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/.. "></iframe>
</div>
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src=" https://www.youtube.com/embed/.. "></iframe>
</div>
</div>
</body>
Example: embed.html

Accessibility in Bootstrap
• Skip navigation
• If your navigation contains many links and comes before the main content in
the DOM, add a Skip to main content link before the navigation.
• Using .sr-only class will visually hide the skip link, and the .sr-only-focusable
class will ensure that the link becomes visible once focused.
• Nested headings (<h1> - <h6>)
• It is mainly used in screen reading content.
• Subsequent headings should make logical use of <h2> - <h6> such that screen
readers can construct a table of contents for your pages.

Bootstrap JavaScript Plugins
• Modals
• A streamlined, but flexible, take on the traditional javascript modal plugin
with only the minimum required functionality and smart defaults.
• JS code : $('#myModal').modal(options)

• Dropdown
• Add dropdown menus to nearly anything in Bootstrap with this plugin.
• Bootstrap features full dropdown menu support on in the navbar, tabs, and
pills.
• Calling the dropdowns via javascript code : $('.dropdown-toggle').dropdown()
• ScrollSpy
• The ScrollSpy plugin is for automatically updating nav targets based on scroll
position.
• Calling the dropdowns via javascript code : $('#navbar').scrollspy()
• scrollsky.html

• Collapse
• Collapse is use to hide/show the content after clicking on it.
• Collapse Plugin classes are
Classes Description
.collapse Hides the content
.collapse in Shows the content
.collapsing Added when the transition starts, and
removed when it finishes

• Example: collapse.html
<body>
<button type="button" class="btn btn-info" data-toggle="collapse" data-
target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</div>
</body>

• Popover
• The Popover plugin is similar to tooltips; it is a pop-up box that appears when
the user clicks on an element.
• The difference is that the popover can contain much more content.
• Example:
<a href="#" title="Dismissible popover" data-toggle="popover" data-
trigger="focus" data-content="Click anywhere to close this popover">Click
me</a>
popover.html

• Alert
• Bootstrap provides an easy way to create predefined alert messages.
• Alerts are created with the .alert class, followed by one of the four contextual
classes
Classes
.alert-success
.alert-info
. alert-warning
.alert-danger

Example alert.html
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative
action.
</div>
</div>

Classes in Modal
Class Description
.modal Creates a modal
.modal-content Styles the modal properly with border, background-color, etc. Use this class to
add the modal's header, body, and footer.
.modal-header Defines the style for the header of the modal
.modal-body Defines the style for the body of the modal
.modal-footer Defines the style for the footer in the modal. Note: This area is right-aligned by
default. To change this, overwrite CSS with text-align:left|center
.modal-sm Specifies a small modal
.modal-lg Specifies a large modal
.fade Adds an animation/transition effect which fades the modal in and out

Modal Options
Name Type Default Description
backdrop boolean or the
string "static"
true •Specifies whether the modal should have a dark
overlay:
true - dark overlay
•false - no overlay (transparent)
If you specify the value "static", it is not
possible to close the modal when clicking
outside of it
keyboard boolean true •Specifies whether the modal can be closed with
the escape key (Esc):
true - the modal can be closed with Esc
•false - the modal cannot be closed with Esc
show boolean true Specifies whether to show the modal when
initialized

Modal Methods
Method Description
.modal(options) Activates the content as a modal. See
options above for valid values
.modal("toggle") Toggles the modal
.modal("show") Opens the modal
.modal("hide") Hides the modal

Affix
• The Affix plugin will help us “fix” the position of our navigation
section, while allowing us to add vertical offsets to this fixed element,
depending on where the user has scrolled.
• To use the Affix plugin in our project, we have to specify the element
that will receive the “affix” behavior. We can do this by adding the
data-spy="affix" attribute/value to it.

The plugin toggles between three classes,
described here
1. affix-top:
which indicates that the element is in its top-most
position.
2. affix:
which is added when the element starts to scroll
off the screen, and which applies the
position: fixed property to it.
3. affix-bottom:
which indicates the bottom offset of the element.

Tabs
• Tabs are used to separate content into different panes
where each pane is viewable one at a time.

Class Description
.nav nav-tabs Creates navigation tabs
.nav-justified Makes navigation tabs/pills equal widths of their parent, at
screens wider than 768px. On smaller screens, the nav tabs
are stacked
.tab-content Together with .tab-pane and data-toggle="tab", it makes the
tab toggleable
.tab-pane Together with .tab-content and data-toggle="tab", it makes
the tab toggleable
Classes
Method
Method Description
.tab("show") Shows the tab

Tooltips
•The Tooltip plugin is small pop-up box that
appears when the user moves the mouse pointer
over an element.

Via data attribute
Attribute is:
1.data-toggle
2.Title
3.Data-placement
• Top
• Bottom
• Left
• Right
Eg
<a href="#" data-toggle="tooltip" title="Hooray!“ data-placement=“top">Hover over
me</a>

• In javascript
// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified element
$('#myTooltip').tooltip();
• Method
Method Description
.tooltip("show") Shows the tooltip
.tooltip("hide") Hides the tooltip
.tooltip("toggle") Toggles the tooltip

Popover
• Popover can contain much more content.
Via data-* Attributes
1. data-toggle="popover" activates the popover.
2. title attribute specifies the header text of the popover.
3. data-content attribute specifies the text that should be displayed inside the popover's
body.

• In JavaScript
// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified element
$('#myPopover').popover();
• Method

BOOTSTRAP
Pankti Gandhi
Nikhil Chauhan
Akshit Joshi
Ghanshyam patel
Karan sangoi

transitions
• For simple transition effects, include bootstrap-transition.js once
alongside the other JS files. If you're using the compiled (or
minified) bootstrap.js, there is no need to include this—it's already
there.
• Used by other plugins to check for transition support and to catch
hanging transitions.

alert
• Plugin : alert.js
• Methods :
• .alert(“close”)
• Events :
Event Type Description
close.bs.alert This event fires immediately when the close instance
method is called.
closed.bs.alert This event is fired when the alert has been closed (will wait
for CSS transitions to complete).

<body>
<h2>Alert Events</h2>
<p>The <strong>close</strong> event occurs when the alert message is about to be closed.</p>
<div class="alert alert-danger alert-dismissible" id="myAlert">
<a href="#" class="close">×</a>
<strong>Hey you!</strong> Try to close this alert message.
</div>
</div>
<script>
$(".close").click(function(){
$("#myAlert").alert("close");
});
$("#myAlert").on('close.bs.alert', function(){
alert('The alert message is about to be closed.');
});
});
</script>
</body>

collapse
• plugin that utilizes a handful of classes for easy toggle behaviour.
• .collapse class indicates a collapsible element(eg : <div>,<p>).
• Add data-toggle="collapse“ to the element.
• Add data-target="#id“ to connect the button and element.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple
collapsible</button>
<div id="demo" class="collapse">
Hello Guys . This is a collapsible element.
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple
collapsible</button>
<div id="demo" class="collapse in">
Hello Guys. This is a collapsible element.
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.collapsing {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" class="btn btn-lg btn-info collapsed" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapsing">
Collapsible element with transition.
</div>
</div>
</body>
</html>

accordi0n
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Accordion Example</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">K.J.Somaiya Institute of Management Studies and Research.</div>
</div>

</div>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">MCA department</div>
</div>
</div>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Advanced Java.</div>
</div>
</div>
</div>
</div>
</body>
</html>

carousel
• Class name : “carousel slide”
• Slide used for animation and transition effect.
• Use of an ID
• data-ride="carousel“ tells bootstrap to load immediately

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
<h3>Chania</h3>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>

<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
<h3>Flowers</h3>
</div>
</div>
</div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<h2>Activate Carousel with JavaScript</h2>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
</ol>

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
<h3>Chania</h3>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
<h3>Chania</h3>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
<h3>Flowers</h3>
</div>
</div>
<div class="item">

<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
<h3>Flowers</h3>
</div>
</div>
</div>

<a class="left carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item1").click(function(){
$("#myCarousel").carousel(0);
});

});
});
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
$(".right").click(function(){
$("#myCarousel").carousel("next");
});
});
</script>
</body>
</html>

Customizing bootstrap
• Using your own CSS
• Using the bootstrap customizer
• Using third party bootstrap customizer.

Using third-party bootstrap
• http://bootstrap-live-customizer.com/
• Bootstrap Switch
• Bootstrap Date / Time Picker, Date Ranges
• Bootstrap Slider

What is Accessibilty?
• Web accessibility means that people with disabilities can
use the Web.
• Web accessibility also benefits others, including older
people with changing abilities due to aging.
• Web accessibility encompasses all disabilities that affect
access to the Web, including visual, auditory, physical,
speech, cognitive, and neurological disabilities.
• Eg-
• Alternative Text for Images.
• Keyboard Input.
• Transcirpts for podcasts.

Accessible design in Bootstrap
Bootstrap follows common web standards and –with minimal extra
effort can be used to create sites that are accessible to all.
• Skip Navigation.
• If your navigation contains many links and comes before the main content in
the DOM, add a Skip to main content link before the navigation.
• Nested Headings.
• When nesting headings (<h1> - <h6>), your primary document header should
be an <h1>. Subsequent headings should make logical use of <h2> - <h6>
such that screen readers can construct a table of contents for your pages.
• Color Contrast.
• Low contrast ratio cause problems to users with low vision or who are color
blind. These default colors may need to be modified to increase their contrast
and legibility.

Tricks for making Bootstrap sites accessible
You can use the following available frameworks to add accessibility in your bootstrap:
• Assets.CMS.gov
• the section 508 compliant responsive framework for front-end
development.
• https://assets.cms.gov/resources/framework/3.4.1/Pages/
• PayPal’s Accessibility Plug-in
• This plugin adds accessibility mark-up to the default components of
Bootstrap 3 to make them accessible for keyboard and screen reader
users.
• Other related:
• Web Experience Toolkit (WET)
• GOV.UK elements.

Using Less And Sass With
Bootstrap

What is a CSS preprocessor?
• Pre-processors, with their advanced features, helped to achieve
writing reusable, maintainable and extensible codes in CSS. By using a
pre-processor, you can easily increase your productivity, and decrease
the amount of code you are writing in a project.
• Pre-processors extend CSS with variables, operators, interpolations,
functions, mixins and many more other usable
assets. SASS, LESS and Stylus are the well known ones.

Using less
Bootstrap's CSS is built on Less, a preprocessor with additional
functionality like variables, mixins, and functions for compiling CSS.
Those looking to use the source Less files instead of our compiled CSS
files can make use of the numerous variables and mixins we use
throughout the framework.
Variables:
• Colors:
• Easily make use of two color schemes: grayscale and semantic. Grayscale
colors provide quick access to commonly used shades of black while semantic
include various colors assigned to meaningful contextual values.
• Eg:
// Use as-is.masthead
{ background-color: @brand-primary;}
// Reassigned variables in Less
@alert-message-background: @brand-info;.alert
{ background-color: @alert-message-background;}

• Scaffolding:
• A handful of variables for quickly customizing key elements of your
site's skeleton
• Eg:
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
• Links:
• Easily style your links with the right color with only one value.
• Eg
// Variable
s@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a { color: @link-color; text-decoration: none;
&:hover { color: @link-hover-color;
text-decoration: underline; }
}

Vendor Mixins:
• Vendor mixins are mixins to help support multiple browsers by
including all relevant vendor prefixes in your compiled CSS.
• Eg.
• Box-Sizing:
• Reset your components' box model with a single mixin.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
• You can use it for transformations, transitions, shadows,
rounded corners, animations, opacity, gradients, etc.

Utility Mixins:
• Utility mixins are mixins that combine otherwise unrelated CSS
properties to achieve a specific goal or task.
• Eg.
• Horizontal Centering:
• Quickly center any element within its parent. Requires width or max-
width to be set.
// Mixin.center-block()
{ display: block;
margin-left: auto;
margin-right: auto;}
// Usage.container {
width: 940px;
.center-block();
}
• It can also be used for resizing ,truncating text ,etc.

Using sass
• While Bootstrap is built on Less, it also has an official Sass port. It
maintains a separate GitHub repository and handle updates with a
conversion script.
• Sass (Syntactically Awesome StyleSheets) is an extension of CSS. Sass
allows you to use things like variables, nested rules, inline imports
and more.
• It also helps to keep things organized and allows you to create
stylesheets faster.

• What’s included?
Path Description
lib/ Ruby gem code (Sass configuration, Rails
and Compass integrations)
tasks/ Converter scripts (turning upstream Less
to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, and font files
Rakefile Internal tasks, such as rake and convert

Bootstrap Editors
• So after all such amazing use of bootstrap to make web sites
awesome you will surely be tempted to use bootstrap.
• But what if you didn’t have to write out all that code by hand? What if
you could select the Bootstrap components you want to work with,
and drag them onto your canvas?
• Bootstrap editors and builders make it easier to prototype, test and
build responsive websites.
• Following listed are some of best editors..

Bootply:
• Bootply is known as the playground for Bootstrap. It’s not only a Bootstrap
editor and builder, but it’s also home to a pretty extensive code repository.
The editor enables you to drag and drop Bootstrap components then edit
the code as you please
• Pricing: Free or $4/month to download source code.
Brix.io:
• Brix is a powerful and sleek looking online Bootstrap builder that enables
you to create responsive interfaces & websites faster than ever.
• Pricing: $14.90 – $49.90 per month.
Jetstrap:
• Jetstrap is a premium web-based interface building tool for Bootstrap 3
that helps developers and designers get websites up and running fast.
Develop for all devices and access your work from anywhere.
• Pricing: $16 – $99 per month.

Divshot:
• Divshot is not only a visual Bootstrap editor, but also an application-grade hosting
environment built for developers.
• Pricing: Free – $100/month (with hosting).
Pinegrow:
• Pinegrow is a desktop app for Mac, Windows & Linux that lets you mockup &
design webpages faster with multi-page editing,.
• Pricing: $49.95 for a one-time personal license.
LayouIt:
• LayoutIt is a simple but effective Bootstrap interface builder to make your front-
end coding easier. You can start from scratch or use one of the base templates.
• Pricing: Free
Pingendo:
• Pingendo is a visual desktop application that helps you to prototype responsive
web pages based on Bootstrap.
• Pricing: Free

Extending Bootstrap with third-
party add-ons

• Bootstrap itself is full of useful Javascript
components that cover many use cases - be it modal
window e.g. for user login, carousel for your homepage,
alert messages to show an important message to the
visitor.
• But sometimes you need more than that, lightbox for
your photos, markdown text editor, mega menu for your
Bootstrap navbar. This is the time when to look for some
of the Bootstrap 3rd party plugins - they are usually built
on top of the existing Bootstrap components and extend
them in many ways.
• Some of them are….

COMPONENT PACKAGES
• Fuel UX:
• Fuel UX extends Bootstrap with additional lightweight JavaScript
controls for your web applications. It includes checkbox, combo box, date
picker, infinite scroll, loader, pillbox, placard, radio, repeater, scheduler,
search, select list, spinbox, tree and wizard. The complex library really worth
checking out.
• Jasny Bootstrap:
• Jasny Bootstrap is a component package that many of us will find useful.
Included are: labelled buttons, off-canvas menu component, fixed-top alerts,
input mask for text inputs, file input with image previews and more.

LIGHTBOXES AND GALLERY PLUGINS
• EkkoLightbox - Lightbox for Bootstrap 3:
• EkkoLightbox is a lightbox module for Bootstrap that
supports images, YouTube videos, and galleries and is built
around Bootstrap's Modal plugin.

BUTTONS
• Social Buttons for Bootstrap:
• Social Sign-In Buttons made in pure CSS based on Bootstrap and
Font Awesome! Really easy to work with, just add one of the
prepared classes.

NAVIGATIONS AND NAVBARS
• Yamm:
• It uses the standard navbar markup and the fluid grid system
classes from Bootstrap. Work for fixed and responsive layout and
has the facility to include (almost) any Bootstrap elements.

FORMS
• jqBootstrapValidation:
• qBootstrapValidation is a jQuery validation plugin for bootstrap forms. It can
validate email, number, min, max, pattern and much more!
• Tokenfield for Bootstrap:
• Tokenfield for Bootstrap is an advanced tagging/tokenizing plugin for jQuery
and Twitter Bootstrap with a focus on keyboard and copy-paste support.

Stay up to date on the development of Bootstrap and reach out to the
community with these helpful resources.
• Read and subscribe to The Official Bootstrap Blog:
http://blog.getbootstrap.com/
• Chat with fellow Bootstrappers using IRC in the irc.freenode.net server, in
the ##bootstrap channel.
• For help using Bootstrap, ask on StackOverflow using the tag twitter-
bootstrap-3 : https://stackoverflow.com/questions/tagged/twitter-
bootstrap-3
• Developers should use the keyword bootstrap on packages which modify
or add to the functionality of Bootstrap when distributing through npm or
similar delivery mechanisms for maximum discoverability.
• Find inspiring examples of people building with Bootstrap at the Bootstrap
Expo : http://expo.getbootstrap.com/
• You can also follow @getbootstrap on Twitter for the latest gossip and
awesome music videos.

Bootstrap [part 2]

More Related Content

What's hot (20)

Similar to Bootstrap [part 2] (20)

Recently uploaded (20)

Bootstrap [part 2]