Create First Web Page With Bootstrap
Here, we are creating a HTML web page using Bootstrap Framework.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<html lang="en">
<head>
<title>My First Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p> Hi Smart Developer! Now you are ready to learn bootstrap framework. Keep your enthusiasm up to the end.
</div>
</div>
</body>
</html>
</html>
1) It is a sample page created using HTML and Bootstrap.
2) Bootstrap CDN link is added in head section with jquery.
3) Bootstrap also requires a containing element to wrap site contents.
There are two container classes.
1) .container class provides a responsive fixed width container.
2) .container-fluid class provides a full width container, fit to entire width of the view port.
Note: Containers are not nestable (you cannot put a container inside another container).
4) viewport meta tag is also important part of Bootstrap to make site responsive and 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">
1) width=device-width sets the width of the page same as device screen width. 2) initial-scale=1 part sets the initial zoom level when the page is first loaded
by the browser.That's It. Now Copy the code in notepad, save it in .html file and try it your self. check it's responsiveness by resize using browser.
No comments :
Post a Comment