Scribd
Upload
209 views

Bootstrap

The document provides instructions for downloading Bootstrap and JQuery and integrating them into an HTML file to create common webpage elements like headers, menus, sliders, photo galleries, and footers using Bootstrap classes and tags. It explains how to set up file folders, link CSS and JavaScript files, and insert specific tags and attributes to build out each section step-by-step.

Uploaded by

ishwori chhetri
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
209 views

Bootstrap

The document provides instructions for downloading Bootstrap and JQuery and integrating them into an HTML file to create common webpage elements like headers, menus, sliders, photo galleries, and footers using Bootstrap classes and tags. It explains how to set up file folders, link CSS and JavaScript files, and insert specific tags and attributes to build out each section step-by-step.

Uploaded by

ishwori chhetri
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

HOW TO DOWNLOAD BOOTSTRAP

1. Create One folder.


2. Type (getbootstrap.com)
3. Click (download bootstrap)
4. Again Click(download bootstrap)
5. Click on(Start download)
6. save the downloaded file on that created folder.
7. Click on save
How to download Jquery

Type (Jquery.com)
Click (Download Jquery)
Right Click on (Download the uncompressed
development Jquery)
Click on (Save link as)
Save the JQUERY file in that created folder.
Click on Save.
How to give the link Bootstrap and Jquery file
whth HTML file

Extract to the download bootstrap file .


Open the extract folder and move three sub
folders.(css, fonts and js) in front. Then delete
the extract folder.
Move Jquery file inside Js folder.
Open HTML file and give name index.html
and save that file in the created folder.
Open HTML file and type the following tags
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script></head>
<body>

</body>
</html>
How to create Header in Bootstrap

Type the following tags inside the body tags.


<div class="jumbotron">
<div class="container-fluid">
<div class="page-header" align="center"><h2>Hellow
World</h2></div></div></div>
Note:- Jumbotron is used to create header section in the
bootstrap.
To Close the div tag first we close inner
div then close outer div
How to create Menu in Bootstrap

<nav class="navbar navbar-inverse">


<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">eCommerce</a>
<button class="navbar-toggle" data-toggle="collapse" data-
target=".nhc">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button></div>
<div class="collapse navbar-collapse nhc">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Aboutus</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-
toggle="dropdown" href="#">Administrator</a>
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">Principal</a></li>
<li><a href="#">Director</a></li>
</ul>
</li>
<li><a href="#">Notice</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Contact</a></li></ul></div></div></nav>
Note:- nav tag is used to create menu.
How to create Slider in Bootstrap
Create one images folder inside the boot folder
keep the images for the slider inside the images
folder
<div class="container-fluid">
<div class=" carousel slider" data-ride="carousel"
id="slider">
<ol class=" carousel-indicators">
<li data-target="#slider" data-slide-to="0"
class="active"></li>
<li data-target="#slider" data-slide-to="1" ></li>
<li data-target="#slider" data-slide-to="2" ></li>
<li data-target="#slider" data-slide-to="3"></li></ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg"></div>
<div class="item ">
<img src="images/2.jpg"></div>
<div class="item">
<img src="images/3.jpg"></div>
<div class="item">
<img src="images/4.jpg"></div></div>
<a href="#slider" data-slide="prev" class=" left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#slider" data-slide="next" class=" right carousel-
control">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
How to create photo gallery in bootstrap?
Down load lightbox from internet.
Extract the lightbox zip folder inside that extracted folder
there is dist folder. Again you open dist folder there we can see
three folders CSS, images,Js. Open css folder and copy
lightbox.css file and paste it inside the css folder which you
have already in your root folder. Similarly open images folder
and copy all images and paste in images folder inside the root
folder. Again open js folder and copy lightbox.js file and paste
inside the js folder of root folder.
Give link just below.
<link rel=stylesheet href=css/bootstrap.css > type
<link rel=stylesheet href=css/lightbox.css > and just
above the </body> type
<script src=js/lightbox.js></script>
Type the following code after end of slider code.
<div class="container-fluid">
<div class="page-header"><h3>Photo Gallery</h3></div>
<div class="row">
<div class="col-md-4">
<a href="images/1.jpg" data-lightbox="gallery" class="thumbnail" ><img
src="images/1.jpg"></a>
</div>
<div class="col-md-4">
<a href="images/2.jpg" data-lightbox="gallery" class="thumbnail" ><img
src="images/2.jpg"></a>
</div>
<div class="col-md-4">
<a href="images/3.jpg" data-lightbox="gallery" class="thumbnail"><img
src="images/3.jpg"></a></div>
<div class="col-md-4">
<a href="imges/4.jpg" data-lightbox="gallery" class="thumbnail"><img
src="images/4.jpg"></a></div>
<div class="col-md-4">
<a href="images/5.jpg" data-lightbox="gallery" class="thumbnail"><img
src="images/5.jpg"></a></div>
<div class="col-md-4">
<a href="images/6.jpg" data-lightbox="gallery" class="thumbnail"><img
src="images/6.jpg"></a></div>
</div>
</div>
How to create container in bootstrap?
<div class="container">
<div class="page-header" align="center"><h2>Our Works</h2></div>
<div class="row">
<div class="col-md-4">
<div align="center">
<img height="200px" width="200px" src="images/1.jpg" class=img-
circle"></div><br>
<p>Type your text here
<a href="#"><button class="btn btn-danger">Read more</button></a>
</p></div>
<div class="col-md-4">
<div align="center">
<img height="200px" width="200px" src="images/1.jpg class=img-
circle></div><br>
<p>Type your text here
<a href="#"><button class="btn btn-danger">Read more</button></a>

</p></div>
<div class="col-md-4">
<div align="center">
<img height="200px" width="200px" src="img/1.jpg"></div><br>
<p>Type your text here
<a href="#"><button class="btn btn-danger">Read more</button></a>

</p></div>
</div></div></div>
How to create contact form?
<div class="page-header"><h2 align="center">Contact Us</h2></div>
<form class="col-md-5 col-md-offset-4">
<div class="form-group">
<input class="form-control" placeholder="Enter your name"
type="text"></div>
<div class="form-group">
<input class="form-control" placeholder="Enter your email"
type="email"></div>
<div class="form-group">
<input class="form-control" placeholder="Enter subject"
type="text"></div>
<div class="form-group">
<textarea class="form-control"
rows="10">Comments</textarea></div><div class="form-group">
<input class=" btn-block"type="submit"></div></form>
How to create footer?

<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div style="background-color:rgb(212,31,0)">
<p align="right"> 2016 All Rights Reserved | Design
by&nbsp; <a href="#"> BCA & BCIS</a></p>

<a href="#"><img src="images/social-


icons.png"></a></div></div></div></div>
How to create scrollspy?
First divide the section inside the
<section id=home>
</section>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<button class="navbar-toggle" data-toggle="collapse"
data-target=".nhc">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse nhc">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#photo">This im my gallery</a></li>
<li><a href="#work">My work area</a></li>
<li><a href="#contact">contact area</a></li>
<li><a href="#footer">Footer
area</a></li></ul></div></div></nav>

You might also like