Introduction to Bootstrap

Introduction to Bootstrap
www.collaborationtech.co.in
Bengaluru INDIA
Presentation By
Ramananda M.S Rao

Content
Content
Introduction
Get Started
Setting Up Bootstrap
Layout with Bootstrap
Bootstrap CSS File
Basic Components
Dropdown Menus
Navigation Elements
Responsive Design
Bootstrap and JavaScript
Customizing Bootstrap
Bootstrap Plugins
Developing simple website
About Us

Introduction
 Bootstrap is the popular HTML, CSS and JavaScript
framework for developing a responsive and mobile
friendly website.
 Bootstrap all topics of Bootstrap such as jumbotron,
table, button, grid, form, image, alert, wells, container,
carousel, panels, glyphicon, badges, labels, progress bar,
pagination, pager, list group, dropdown, collapse,tabs,
pills, navbar, inputs, modals, tooltip, popover and
scrollspy.
 It can also use JavaScript plug-ins.
 It facilitates you to create responsive designs.
 It is a front-end framework used for easier and faster web
development.

Get Started
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is a Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1> First Bootstrap web page</h1>
<p>Welcome to Collaboration Technologies</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Grid System
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style type="text/css">
p{
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}
</style>
</head>
<body>

Grid System
<div class="row">
<div class="col-sm-6 col-md-4"><p>Box 1</p></div>
<div class="clearfix visible-md"></div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></scri
pt>
</body>
</html>

Tables and List Groups
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel panel-default">

<div class="panel-heading">User Information</div>
<div class="panel-body">
<p>The following table contains some personal information about users.</p>
</div>

Tables and List Groups

<table class="table">
<thead>
<tr><th>Row</th><th>First Name</th>
<th>Last Name</th><th>Email</th></tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Raj</td>
<td>D</td><td>rajd@mail.com</td>
</tr>
<tr>
<td>2</td><td>Ramesh</td>
<td>R</td><td>rameshr@mail.com</td>
</tr>
<tr><td>3</td><td>John</td>
<td>H</td><td>johnh@mail.com</td>
</tr></tbody></table>
</div>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body>
</html>

Bootstrap Collapse
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<h2>Collapse</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Click Me</button>
<div id="demo" class="collapse">
Collaboration Technologies a software development and technology and centre. We are dedicated to deliver
good quality services. Our team is professional, experienced and proactive. Our great strength is in translating
our client's business requirements into workable solutions. We have the skills and commitment to make it a
reality.
</div>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Dropdowns & List Group
<h2>Dropdowns</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 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>
</ul>
</div>
</div>
<h2>List Group</h2>
<ul class="list-group">
<li class="list-group-item">Red</li>
<li class="list-group-item">Blue</li>
<li class="list-group-item">Pink</li>
</ul>
</div>

Bootstrap Carousel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 80%;
margin: auto;
}
</style>
<body>
<h1>Carousel Example</h1>
<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>
</ol>

Bootstrap Carousel

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.collaborationtech.co.in/data/images/webapps.jpg" alt="jokes 1" >
</div>
<div class="item">
<img src="http://www.collaborationtech.co.in/data/images/itservice.jpg" alt="jokes 2" >
</div>
<div class="item">
<img src="http://www.collaborationtech.co.in/data/images/online-training.png" alt="jokes 3" >
</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>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Follow us on Social
Facebook: https://www.facebook.com/collaborationtechnologies/
Twitter : https://twitter.com/collaboration09
Google Plus : https://plus.google.com/100704494006819853579
LinkedIn : https://www.linkedin.com/in/ramananda-rao-a2012545
Instagram : https://instagram.com/collaborationtechnologies
YouTube :
https://www.youtube.com/channel/UCm9nK56LRbWSqcYWbzs8CUg
Skype : facebook:ramananda.rao.7
WhatsApp : +91 9886272445
THANK YOU

Introduction to Bootstrap

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (11)

Semelhante a Introduction to Bootstrap

Semelhante a Introduction to Bootstrap (20)

Mais de Collaboration Technologies

Mais de Collaboration Technologies (17)

Último

Último (20)

Introduction to Bootstrap