WHAT IS BOOTSTRAP?
·
Bootstrap is a
sleek, intuitive, and powerful, mobile first front-end framework for faster and
easier web development. It uses HTML, CSS and Javascript.
HISTORY:-
·
Bootstrap was developed by Mark Otto and Jacob
Thornton at Twitter. It was released as an open source
product in August 2011 on GitHub.
WHY USE BOOTSTRAP?
·
Mobile first approach − Bootstrap 3, framework consists of Mobile first
styles throughout the entire library instead them of in separate files.
Browser
Support − It is supported by all popular browsers.
·
Easy to get started − With just the knowledge of HTML and CSS anyone can
get started with Bootstrap. Also the Bootstrap official site has a good
documentation.
·
Responsive design − Bootstrap's responsive CSS adjusts to Desktops,
Tablets and Mobiles.
·
Provides a clean and uniform solution for building an interface
for developers.
·
It contains beautiful and functional built-in components which are
easy to customize.
·
It also provides web based customization.
·
And best of all it is an open source.
BOOTSTRAP CDN:-
·
If you don't want to download and host Bootstrap yourself, you can
include it from a CDN (Content Delivery Network).
·
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript.
You must also include jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
CREATE
FIRST WEB PAGE WITH BOOTSTRAP:-
1. Add the HTML5 doctype
Bootstrap uses HTML elements and CSS properties that require the
HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page,
along with the lang attribute and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices.
Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the
following <meta> tag
inside the <head> element:
<meta name="viewport" content="width=device-width,
initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
The initial-scale=1 part
sets the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap also requires a containing element to wrap site
contents.
There are two container classes to choose from:
- The .container class provides a
responsive fixed width container
- The .container-fluid class provides
a full width container, spanning the entire width of the
viewport
LOGIN
AND SIGN UP FORM USING BOOTSTRAP MODAL:-
·
For sign in :-
Explanation
of sign in from:-
STEP 1:- In
this form when we will click on the Login button on the right side of the page
it will open a Modal window as shown above.
Code:-
<ul
class=”nav navbar-nav-right”>
<li><a
href=”#login” data-toggle=”modal” data-target=”#login”>
<span
class=”glyphicon glyphicon-log-in”></span></li></ul>
<div
class=”modal fade bs-modal-sm” id=”login” tabindex=”-1” role=”dialog”
aria-labelledby=”mysmallModalLabel’ aria-hidden=”true”>
<div
class= “modal-dialog modal-lg”>
<div
class=”modal-dialog modal-lg”>
</div>
</div>
</div>
In
this code we use following :-
·
In the above coding <ul> and <div> both are connected with the
help of modal data target=”#login”
and id=”login”
·
*Most important thing is that both data
target and id must be same.*
1.The "Trigger" part:
To trigger the modal window, you need to use a button or a link.
Then include the two data-* attributes:
- data-toggle="modal" opens the modal
window
- data-target="#login" points to the id
of the modal
2.The "Modal" part:
·
The parent
<div> of the modal must have an ID that is the same as the value
of the data-target attribute used to trigger the modal ("myModal").
·
The
.modal class identifies the content of <div> as a modal and brings focus to it.
·
The
.fade class adds a transition effect which fades the modal in and
out. Remove this class if you do not want this effect.
·
The attribute
role="dialog" improves accessibility for people using screen readers.
·
The
.modal-dialog class sets the proper width and margin of the modal.
·
Change the size of the modal by adding the
.modal-sm class
for small modals or .modal-lg class for large modals.
·
Add the size class to the
<div> element with class .modal-dialog:
Ex:-
<div class="modal-dialog
modal-lg">
STEP 2:- In the modal window we
create a heading login/registration and
a cross button for closing of modal window.
Code:-
<div
class=”modal-header>
<button
type=”button”class=”close” data-dismiss=”modal”>
×</button>
<h3
class=”modal-title” id=”myModalLabel”>login/registration
</h3>
</div>
STEP 3:- In this step we use tabs like sign in and Register under
modal body and will take two labels Email and password field and two input
field one checkbox field one button for submittion of form and a link for
forget password.
For
Registration:-
Explanation
for Register of from:-
Step
1:- When we click on the Register it will open a
form shown above.
It contain label ,input fields ,checkboxes and buttons.
For full code please mail us on manojjoon@gmail.com and susbcribe to our blog like our page on facebook
Comments
Post a Comment