Bootstrap [part 2]

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>

Output

.button("loading")<body><div class="container"> <h2>Button Methods</h2> <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>$(document).ready(function(){ $(".btn").click(function(){ $(this).button('loading'); }); });</script></body>

Output

.button("reset")<body><div class="container"> <h2>Button Methods</h2> <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>$(document).ready(function(){ $(".btn").click(function(){ $(this).button("loading").delay(500).queue(function(){ $(this).button("reset"); $(this).dequeue(); }); }); });</script></body>

Output

.button(“string”)<body><div class="container"> <h2>Button Methods</h2> <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>$(document).ready(function(){ $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function(){ $(this).button('somestringvalue'); $(this).dequeue(); }); }); });</script></body>

Output

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><div class="container"> <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>

Output

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><div class="container"> <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> <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="#">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>

Output

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<div class="container"> <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 <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>

Output

Via JavaScript• Enable manually with:

• Example• $(‘.dropdown-toggle’).dropdown();

Example<body><div class="container"> <h2>Dropdown Example</h2> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <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>$(document).ready(function(){ $(".dropdown-toggle").dropdown();});</script></body>

Output

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> <ul class="dropdown-menu"> <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,

.activeYou can customize the links by using .disabled for unclickable links and .active to indicate the current page.

.pagination-lg,

.pagination-smUse 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>

Output

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><li class=“list-group-item”>first item</li><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="container"> <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="container"> <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><div class="container"> <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)

Bootstrap JavaScript Plugins• 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

Bootstrap JavaScript Plugins• 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

Bootstrap JavaScript Plugins

• 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

Bootstrap JavaScript Plugins

Classes

.alert-success

.alert-info

. alert-warning

.alert-danger

Example alert.html<div class="container"> <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 ModalClass 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.

http://getbootstrap.com/javascript/#affix

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

MethodMethod 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-toggle2.Title3.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-* Attributes1. 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 GandhiNikhil Chauhan

Akshit JoshiGhanshyam 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 Descriptionclose.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>

<div class="container">

<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>

$(document).ready(function(){

$(".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><div class="container"> <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> <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><div class="container"> <h2>Simple Collapsible</h2> <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> <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> <style> .collapsing { background-color: yellow; }</style></head><body><div class="container"> <h2>Simple Collapsible</h2> <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> <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><div class="container"> <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> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">MCA department</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> </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"> <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> <style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } </style></head><body><div class="container"> <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> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></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"> <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_flower.jpg" alt="Flower" width="460" height="345"> <div class="carousel-caption"> <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"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </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"> <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> <style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } </style></head><body><div class="container"> <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> <li class="item3"></li> <li class="item4"></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"> <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_flower.jpg" alt="Flower" width="460" height="345"> <div class="carousel-caption"> <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"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </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>$(document).ready(function(){ // Activate Carousel $("#myCarousel").carousel(); // Enable Carousel Indicators $(".item1").click(function(){ $("#myCarousel").carousel(0); });

$(".item2").click(function(){ $("#myCarousel").carousel(1); }); $(".item3").click(function(){ $("#myCarousel").carousel(2); }); $(".item4").click(function(){ $("#myCarousel").carousel(3); }); // 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 bootstrap customizer

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

http://bootstrap-live-customizer.com/

Making Bootstrap Accessible

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.

https://assets.cms.gov/resources/framework/3.4.1/Pages/

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 lessBootstrap'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// Variables@link-color: @brand-primary;@link-hover-color: darken(@link-color, 15%);// Usagea { 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

Going Further With Bootstrap

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.

Bootstrap Community

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]

Education