Scribd
Upload
58 views

129 Bootstrap Chapter Roadmap and Full Source Code

The document contains code for an introduction to Bootstrap including setting up the framework, using the grid system to control responsive layouts, typography features like headings, text styling and backgrounds, tables, and forms. Key sections cover adding Bootstrap CSS and JavaScript, detecting device sizes with JavaScript, and examples of common page elements built with Bootstrap classes.

Uploaded by

shah g
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
58 views

129 Bootstrap Chapter Roadmap and Full Source Code

The document contains code for an introduction to Bootstrap including setting up the framework, using the grid system to control responsive layouts, typography features like headings, text styling and backgrounds, tables, and forms. Key sections cover adding Bootstrap CSS and JavaScript, detecting device sizes with JavaScript, and examples of common page elements built with Bootstrap classes.

Uploaded by

shah g
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 89

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these tags
-->
<title>
Introduction
</title>

<!-- Bootstrap -->


<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of


HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.
js">
</script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>
We are learning Bootstrap
</h1>
<p>
Hello World!
</p>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript


plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Grid System
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#deviceSize{
margin-bottom: 30px;

}
.bluebox{
background-color: #2fc5b8;
height: 200px;
}
.greenbox{
background-color: #8deb46;
height: 200px;
}

</style>
</head>
<body>
<div class="container-fluid">
<div id="deviceSize">
Device Size:
</div>
<div class="bluebox col-md-8 col-sm-6 col-xs-3 col-
lg-4">
col-md-8 col-sm-6 col-xs-3 col-lg-4
</div>
<div class="greenbox col-md-4 col-sm-6 col-xs-9 col-
lg-8">
col-md-4 col-sm-6 col-xs-9 col-lg-8
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$(function(){
$( window ).resize(function() {
var windowWidth = $(window).width();
if(windowWidth<768){
$('#deviceSize').text('Device Size: ' +
windowWidth + 'px - Extra small devices (Phones)');

}
else if(windowWidth<992){
$('#deviceSize').text('Device Size: ' +
windowWidth + 'px - Small devices (Tablets)');

}
else if(windowWidth<1200){
$('#deviceSize').text('Device Size: ' +
windowWidth + 'px - Medium devices (Desktops)');

}
else{
$('#deviceSize').text('Device Size: ' +
windowWidth + 'px - Large devices (Desktops)');

}
}
);

}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Typography
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<h1>
Bootstrap heading
</h1>
<h2>
Bootstrap heading
</h2>
<h3>
Bootstrap heading
</h3>
<h4>
Bootstrap heading
</h4>
<h5>
Bootstrap heading
</h5>
<h6>
Bootstrap heading
</h6>
<div class="h5">
This is some text.
</div>
<p>
Text can be
<br />
<mark>
highlighted
</mark>
<br />
<s>
struck through
</s>
<br />
<u>
underlined
</u>
<br />
<span class="small">
de-emphasised
</span>
<br />
<strong>
made bold
</strong>
<br />
or
<em>
emphasized with italics
</em>
</p>

<p>
This is a simple paragraph
</p>
<p class="lead">
This paragraph stands out
</p>
<p class="small">
This paragraph is made small
</p>
<p class="text-right">
Text in this paragraph is right aligned
</p>
<p class="text-capitalize">
Text in this paragraph is capitalized
</p>
<p class="text-primary">
This text is emphasised
</p>
<p class="text-success">
This text is emphasised
</p>
<p class="text-danger">
This text is emphasised
</p>
<p class="text-warning">
This text is emphasised
</p>
<p class="text-info">
This text is emphasised
</p>
<ul class="list-unstyled list-inline">
<li>
HTML
</li>

<li>
CSS
</li>

<li>
JQuery
</li>
</ul>
<div class="bg-primary">
bg-primary
</div>
<div class="bg-success">
bg-success
</div>
<div class="bg-danger">
bg-danger
</div>
<div class="bg-warning">
bg-warning
</div>
<div class="bg-info">
bg-info
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Tables
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<table class="table">
<tr>
<th>
Phone Make
</th>
<th>
Model
</th>
<th>
Storage
</th>
</tr>

<tr>
<td>
Apple Apple Apple Apple Apple Apple Apple
Apple Apple Apple Apple Apple
</td>
<td>
Iphone 6
</td>
<td>
32Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 5
</td>
<td>
32Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 5s
</td>
<td>
32Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
32Go
</td>
</tr>

</table>

<div class="table-responsive">
<table class="table table-striped table-hover
table-condensed table-bordered">
<tr>
<th>
Phone Make
</th>
<th>
Model
</th>
<th>
Storage
</th>
</tr>

<tr>
<td>
Apple Apple Apple Apple Apple Apple Apple
Apple Apple Apple Apple Apple Apple Apple Apple Apple
Apple Apple Apple Apple Apple Apple
</td>
<td>
Iphone 6
</td>
<td>
32Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 5
</td>
<td>
32Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 5s
</td>
<td>
32Go
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Iphone 4
</td>
<td>
32Go
</td>
</tr>

</table>

</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
forms
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<form class="form-inline">
<div class="form-group">
<label for="email">
Email:
</label>
<input type="email" id="email"
placeholder="Email" class="form-control">
</div>
<div class="form-group">
<label for="password">
Password:
</label>

<input type="password" id="password"


placeholder="Password" class="form-control">
</div>

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


Login
</button>
</form>
<br />
<hr>

<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-
label">
Email:
</label>
<div class="col-sm-10">
<input type="email" id="email"
placeholder="Email" class="form-control">

</div>
</div>

<div class="form-group">
<label for="password" class="col-sm-2 control-
label">
Password:
</label>

<div class="col-sm-10">
<input type="password" id="password"
placeholder="Password" class="form-control">

</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">
Login
</button>

</div>
</form>
<br />
<hr>

<form>
<label for="comments">
Comments:
</label>
<textarea class="form-control" rows="5"
id="comments">
</textarea>

<div class="checkbox checkbox-inline">


<label>
<input type="checkbox" value="value1"
id="checkbox1">
Checkbox1
</label>

</div>

<div class="checkbox checkbox-inline disabled">


<label>
<input type="checkbox" value="value2"
id="checkbox2">
Checkbox2
</label>

</div>
<br />

<br />
<hr>

<div class="radio radio-inline">


<label>
<input type="radio" name="radios" id="radio1"
value="option1">
Radio Option 1
</label>

</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="radios" id="radio2"
value="option2">
Radio Option 1
</label>

</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="radios" id="radio3"
value="option3" disabled>
Radio Option 1
</label>

</div>
<br />
<hr>
<select multiple class="form-control">
<option>
Option 1
</option>

<option>
Option 2
</option>

<option>
Option 3
</option>

</select>

<br />
<input type="text" class="form-control"
placeholder="Text Input" disabled>

<br />
<hr>

<div class="row">
<div class="form-group has-success col-xs-2">
<label for="textInput1" class="sr-only">
Text Input 1
</label>

<input type="text" class="form-control"


id="textInput1" placeholder="Text Input 1">

</div>
<div class="form-group has-error col-xs-6">
<label for="textInput2" class="sr-only">
Text Input 2
</label>

<input type="text" class="form-control input-


lg" id="textInput2" placeholder="Text Input 2">

</div>
<div class="form-group has-warning col-xs-4">
<label for="textInput3" class="sr-only">
Text Input 3
</label>

<input type="text" class="form-control input-


sm" id="textInput3" placeholder="Text Input 3">

</div>

</div>

<br />
<hr>

<div class="form-group has-feedback has-warning">


<label for="textInput4" class="sr-only">
Text Input
</label>

<input type="text" class="form-control"


id="textInput4" placeholder="Text Input">
<span class="glyphicon glyphicon-alert form-
control-feedback">
</span>
<span class="sr-only">
warning
</span>
</div>
<br />
<hr>

<div class="input-group has-feedback has-success">


<label for="textInput4" class="sr-only">
Text Input
</label>
<span class="input-group-addon">
@
</span>
<input type="text" class="form-control"
id="textInput4" placeholder="Text Input">
<span class="glyphicon glyphicon-ok form-
control-feedback">
</span>
<span class="sr-only">
warning
</span>
</div>

<br />
<hr>

<div class="input-group has-feedback has-success">


<label for="textInput4" class="sr-only">
Text Input
</label>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Submit
</button>

</span>
<input type="text" class="form-control"
id="textInput4" placeholder="Text Input">
<span class="glyphicon glyphicon-ok form-
control-feedback">
</span>
<span class="sr-only">
warning
</span>
</div>
</form>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
buttons
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<a class="btn btn-link" href="#">
Top of the page
</a>
<button class="btn btn-primary btn-lg"
type="submit">
Reset
</button>
<input class="btn btn-info btn-sm active"
type="button" value="Cancel">
<input class="btn btn-success btn-xs disabled"
type="button" value="Submit">

<br />
<br />
<br />
<div class="btn-group btn-group-justified"
role="group">
<div class="btn-group">
<button type="button" class="btn btn-default">
Left
</button>

</div>

<div class="btn-group">
<button type="button" class="btn btn-default">
Middle
</button>

</div>

<div class="btn-group">
<button type="button" class="btn btn-default">
Right
</button>

</div>

</div>
<br />
<br />
<br />
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-vertical"
role="group">
<button type="button" class="btn btn-default">
Left
</button>

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


Middle
</button>

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


Right
</button>

</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">
Left
</button>

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


Middle
</button>

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


Right
</button>

</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">
Left
</button>

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


Middle
</button>

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


Right
</button>

</div>
</div>

</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
buttons
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<img src="images/picture.jpg" alt="Responsive image"
class="img-responsive img-circle">
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
navs
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active">
<a href="#">
<span class="glyphicon glyphicon-home">
</span>
Home
</a>
</li>
<li role="presentation">
<a href="#">
<span class="glyphicon glyphicon-envelope">
</span>
Messages
<span class="badge">
3
</span>
</a>
</li>

<li role="presentation">
<a href="#">
Notifications
<span class="badge">
3
</span>
</a>
</li>

<li role="presentation">
<a href="#">
Contact us
</a>
</li>

</ul>

<ul class="nav nav-pills nav-stacked">


<li role="presentation" class="active">
<a href="#">
Home
</a>
</li>

<li role="presentation">
<a href="#">
Page 1
</a>
</li>

<li role="presentation">
<a href="#">
Page 2
</a>
</li>

<li role="presentation" class="disabled">


<a href="#">
Page 3
</a>
</li>

</ul>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
navbars
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">
Store
</a>
<button type="button" class="navbar-toggle"
data-target="#navbarCollapse" data-toggle="collapse">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
</div>
<div class="navbar-collapse collapse"
id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
All Products
</a>
</li>
<li>
<a href="#">
Help
</a>
</li>
<li>
<a href="#">
Department
<span class="caret">
</span>
</a>
</li>
</ul>
<form class="navbar-form navbar-left"
role="search">
<div class="input-group">
<span class="input-group-btn">
<button type="submit" class="btn btn-info">
Go
</button>
</span>
<label for="search" class="sr-only">
Search
</label>
<input type="text" id="search" class="form-
control" placeholder="Search">
<span class="glyphicon glyphicon-search form-
control-feedback">
</span>
</div>
</form>

<form class="navbar-form navbar-right">


<input class="btn btn-success" type="button"
value="Login">
</form>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:60px">
<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>
<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

<p>
Paragraph
</p>

</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Pagination
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<nav>
<ul class="pagination pagination-lg">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">
&laquo;
</span>
</a>
</li>
<li class="active">
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li>
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li>
<a href="#">
5
</a>
</li>
<li class="disabled">
<a href="#">
6
</a>
</li>
<li>
<a href="#">
7
</a>
</li>
<li>
<a href="#">
8
</a>
</li>
<li>
<a href="#">
9
</a>
</li>
<li>
<a href="#">
10
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">
&raquo;
</span>
</a>
</li>

</ul>

</nav>

<nav>
<ul class="pager">
<li class="previous disabled">
<a href="#">
Previous
</a>
</li>
<li class="next">
<a href="#">
Next
</a>
</li>
</ul>
</nav>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Jumbotron
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>

<div class="jumbotron">
<div class="container-fluid">
<h1>
Welcome to our best selling app.
</h1>
<p>
Our app will make your life easier.
</p>
<p>
<a class="btn btn-success btn-lg" href="#">
Find out more
</a>
</p>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Thumbnails
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail">
<img src="images/picture.jpg" alt="feather">
</a>
</div>
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail">
<img src="images/picture.jpg" alt="feather">
</a>
</div>
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail">
<img src="images/picture.jpg" alt="feather">
</a>
</div>
</div>

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/picture.jpg" alt="feather">
<div class="caption">
<h3>
Product title
</h3>
<p>
Product description
</p>
<p>
<a href="#" class="btn btn-primary"
role="button">
Add to watch List
</a>
<a href="#" class="btn btn-success"
role="button">
Add to Basket
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/picture.jpg" alt="feather">
<div class="caption">
<h3>
Product title
</h3>
<p>
Product description
</p>
<p>
<a href="#" class="btn btn-primary"
role="button">
Add to watch List
</a>
<a href="#" class="btn btn-success"
role="button">
Add to Basket
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/picture.jpg" alt="feather">
<div class="caption">
<h3>
Product title
</h3>
<p>
Product description
</p>
<p>
<a href="#" class="btn btn-primary"
role="button">
Add to watch List
</a>
<a href="#" class="btn btn-success"
role="button">
Add to Basket
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Dropdown plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<div class="dropdown">
<button class="dropdown-toggle btn btn-info"
type="button" id="dropdownMenu" data-toggle="dropdown">
Dropdown plugin
<span class="caret">
</span>
</button>
<ul class="dropdown-menu" role="menu" aria-
labelledby="dropdownMenu">
<li role="presentation" class="dropdown-header">
Header 1
</li>
<li role="presentation">
<a role="menuitem" href="#">
item
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">
item
</a>
</li>
<li role="presentation" class="divider">
</li>
<li role="presentation" class="dropdown-header">
Header 2
</li>
<li role="presentation">
<a role="menuitem" href="#">
item
</a>
</li>
<li role="presentation">
<a role="menuitem" href="#">
item
</a>
</li>
<li role="presentation" class="disabled">
<a role="menuitem" href="#">
item
</a>
</li>
</ul>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Modal plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<button type="button" class="btn btn-primary" data-
target="#myInquiry" data-toggle="modal" data-
ordernumber="1122">
Order Number: 1122 - Contact us
</button>
<div class="modal" id="myInquiry" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
&times;
</button>
<h4 id="myModalLabel">
Thank you for contacting us:
</h4>
</div>
<div class="modal-body">
<label for="inquiry">
Your inquiry:
</label>
<textarea class="form-control" rows="5"
id="inquiry">
</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Send
</button>
</div>
</div>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$('#myInquiry').on('hide.bs.modal',function(){
//window.alert('Hi!');
}
);
$('#myInquiry').on('show.bs.modal',function(event){
var button = $(event.relatedTarget);
var orderNumber = button.data('ordernumber');
$(this).find('#myModalLabel').text('Order number: '
+ orderNumber);
}
)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Scrollspy plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse
navbar-fixed-top" id="mynavBar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">
Store
</a>
<button type="button" class="navbar-toggle"
data-target="#navbarCollapse" data-toggle="collapse">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
</div>
<div class="navbar-collapse collapse"
id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#allProducts">
All Products
</a>
</li>
<li>
<a href="#help">
Help
</a>
</li>
<li>
<a href="#department">
Department
<span class="caret">
</span>
</a>
</li>
</ul>
<form class="navbar-form navbar-left"
role="search">
<div class="input-group">
<span class="input-group-btn">
<button type="submit" class="btn btn-info">
Go
</button>
</span>
<label for="search" class="sr-only">
Search
</label>
<input type="text" id="search" class="form-
control" placeholder="Search">
<span class="glyphicon glyphicon-search form-
control-feedback">
</span>
</div>
</form>

<form class="navbar-form navbar-right">


<input class="btn btn-success" type="button"
value="Login">
</form>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:60px;
height:300px; overflow:auto" data-spy="scroll" data-
target="#mynavBar">
<h4 id="allProducts">
All products
</h4>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<h4 id="help">
Help
</h4>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<h4 id="department">
Departments
</h4>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
<p>
Some text
</p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$('#mynavBar').on('activate.bs.scrollspy',function(){
$('.btn-success').toggleClass('btn-warning');

}
);

</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Tabs plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-tabs nav-justified" id="myTabs">
<li role="presentation" class="active">
<a href="#home" data-toggle="tab">
<span class="glyphicon glyphicon-home">
</span>
Home
</a>
</li>
<li role="presentation">
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-envelope">
</span>
Messages
<span class="badge">
3
</span>
</a>
</li>

<li role="presentation">
<a href="#notifications" data-toggle="tab">
Notifications
<span class="badge">
3
</span>
</a>
</li>

<li role="presentation">
<a href="#contactUs" data-toggle="tab">
Contact us
</a>
</li>

</ul>

<div id="myTabContent" class="tab-content">


<div class="tab-pane active fade in" id="home">
<p>
Home Content.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
</div>
<div class="tab-pane fade" id="messages">
<p>
Messages Content.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
</div>
<div class="tab-pane fade" id="notifications">
<p>
Notifications Content.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
</div>
<div class="tab-pane fade" id="contactUs">
<p>
Contact us.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
<p>
Some text.
</p>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$('#myTabs a:last').tab('show');
$('a[data-
toggle="tab"]').on('shown.bs.tab',function(event){
window.alert('The active tab is: ' +
$(event.target).text() + '. The previous tab is: ' +
$(event.relatedTarget).text());
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Tooltip plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<div>
<p>
Paragraph.
</p>
<p>
This is a
<a href="http://www.google.com" title="Google"
data-toggle="tooltip" data-placement="right">
link
</a>
.
</p>
<button type="button" class="btn btn-primary"
data-toggle="tooltip" title="button tooltip" data-
placement="bottom">
Button
</button>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').tooltip('show');
$('[data-
toggle="tooltip"]').on('hidden.bs.tooltip',function(){
window.alert("tooltip hidden!");
}
)

</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Popover plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<button type="button" class="btn btn-primary" data-
toggle="popover" data-content="
<h4>
Popover
</h4>
<p>
This is a popover just like the one you see on an ipad
</p>
" data-trigger="hover">
Button
</button>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$(function(){
$('[data-toggle="popover"]').popover({
html : true,
delay : {"show":1000, "hide": 300}
}
);
$('[data-
toggle="popover"]').on('hidden.bs.popover',function(){
window.alert('Popover hidden!');
}
);
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Alert plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<div id="alert1" class="alert alert-warning">
<a class="close" data-dismiss="alert">
&times;
</a>
<strong>
Warning!
</strong>
Your unsaved data was lost.
</div>
<div id="alert2" class="alert alert-success">
<a class="close" data-dismiss="alert">
&times;
</a>
<strong>
Success!
</strong>
File uploaded successfully.
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$(function(){
$('.alert').on('closed.bs.alert',function(){
window.alert('Alert message closed!');
}
);

$('#alert1').alert('close');
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Button plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<button type="button" class="btn btn-primary"
id="button1" data-loading-text="Loading...">
Button1
</button>

<button type="button" class="btn btn-primary"


id="button2" data-loading-text="Loading..." data-complete-
text="Download complete!">
Button2
</button>

</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$(function(){
$('#button1').click(function(){

$(this).button('loading').delay(1000).queue(function(){
$(this).button('reset');
}
);
}
);

$('#button2').click(function(){

$(this).button('loading').delay(1000).queue(function(){
$(this).button('complete');
}
);
}
);
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Collapse plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<a class="btn btn-primary" href="#collapse01" data-
toggle="collapse">
Link
</a>
<button class="btn btn-primary" data-
target="#collapse02" data-toggle="collapse">
Button
</button>
<div class="bg-danger collapse" id="collapse01">
<p>
Collapsible content 1.
</p>
<p>
Collapsible content 1.
</p>
<p>
Collapsible content 1.
</p>
</div>
<div class="bg-warning collapse" id="collapse02">
<p>
Collapsible content 2.
</p>
<p>
Collapsible content 2.
</p>
<p>
Collapsible content 2.
</p>
</div>
<br />

<br />

<div id="accordion" class="panel-group">


<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse1" data-toggle="collapse"
data-parent="#accordion">
Section 1
</a>
</h4>
</div>
<div class="panel-collapse collapse in"
id="collapse1">
<div class="panel-body">
<p>
Collapsible content 1.
</p>
<p>
Collapsible content 1.
</p>
<p>
Collapsible content 1.
</p>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse2" data-toggle="collapse" data-
parent="#accordion">
Section 2
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2">
<div class="panel-body">
<p>
Collapsible content 2.
</p>
<p>
Collapsible content 2.
</p>
<p>
Collapsible content 2.
</p>
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse3" data-toggle="collapse" data-
parent="#accordion">
Section 3
</a>
</h4>
</div>
<div class="panel-collapse collapse in"
id="collapse3">
<div class="panel-body">
<p>
Collapsible content 3.
</p>
<p>
Collapsible content 3.
</p>
<p>
Collapsible content 3.
</p>
</div>
</div>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$(function(){
$('#collapse2').collapse('show');
$('#collapse3').collapse('toggle');
$('#collapse1').on('hidden.bs.collapse',function(){
window.alert('Section 1 hidden!');
}
);
}
);

</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Carousel plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.yellow{
color: yellow;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="carousel slide" id="myCarousel" 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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/picture.jpg">
<div class="carousel-caption">
<p>
First Slide
</p>
</div>
</div>
<div class="item">
<img src="images/picture.jpg">
<div class="carousel-caption">
<p>
Second Slide
</p>
</div>
</div>
<div class="item">
<img src="images/picture.jpg">
<div class="carousel-caption">
<p>
Third Slide
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">
</span>
<span class="sr-only">
Previous
</span>
</a>
<a class="right carousel-control" href="#myCarousel"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right">
</span>
<span class="sr-only">
Previous
</span>
</a>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$(function(){
$('.carousel').carousel({
interval : 1000
}
);
$('.carousel').on('slide.bs.carousel',function(){
$('p').toggleClass('yellow');
}
);
$('.carousel').hover(function(){
$(this).carousel('pause');
}
,function(){
$(this).carousel('cycle');
}
);
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>
Affix plugin
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
ul.nav-tabs{
width: auto;
border: 1px solid #9e60f0;
border-radius: 3px;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active
a:hover{
color: white;
background: #7628dc;
}
</style>

</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container-fluid">
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph
</p>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul id="myAffix" class="nav nav-tabs nav-
stacked">
<li>
<a href="#section1">
Section One
</a>
</li>
<li>
<a href="#section2">
Section Two
</a>
</li>
<li>
<a href="#section3">
Section Three
</a>
</li>
<li>
<a href="#section4">
Section Four
</a>
</li>
<li>
<a href="#section5">
Section Five
</a>
</li>
</ul>

</div>
<div class="col-xs-9">
<h2 id="section1">
Section One
</h2>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<p>
C1
</p>
<h2 id="section2">
Section Two
</h2>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<p>
C2
</p>
<h2 id="section3">
Section Three
</h2>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<p>
C3
</p>
<h2 id="section4">
Section Four
</h2>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<p>
C4
</p>
<h2 id="section5">
Section Five
</h2>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
<p>
C5
</p>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script>
$(function(){
$('#myAffix').affix({
offset: {
top: 300}
}
);
}
);
</script>
</body>
</html>

You might also like