Friday 1 May 2015

, , , ,

Bootstrap Website

No comments  
Creating a website with Bootstrap is easy and fun. If you know HTML and CSS or have a basic knowledge to code them, then you wont have much a problem to code in Bootstrap. Bootstrap used both HTML and CSS properties for designing. It commonly uses the HTML5 doctype.

You should always remember to put the HTML5 doctype declaration and also the lang attribute at the starting of the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
Body content......
</body>
</html>
Bootstrap is mainly used to create mobile responsive web pages. The good point is that you don't have to view the same big desktop page in your mobile. You don't have always minimize and maximize anytime you want to click a link or view the text. Mobile-first styles are actually a part of the Bootstrap core framework. But in order to get proper mobile rendering you have to add the following meta code in the head section.

<meta name="viewport" content="width=device-width, initial-scale=1">
  • "width=device-width" - This part sets the width of the page to follow the width of the device.
  • "initial-scale=1" - This sets the initial zoom level when the page is first loaded.
Bootstrap also requires a container to wrap site contents. But remember that you cannot put one container inside another. There are mainly two container classes.
  • ".container" - This provides with a fixed width responsive container.
  • ".container-fluid" - This provides with a full width container spreading across the entire width of the viewport.
Container
For Example:
<!DOCTYPE html>
<html lang="en">
<head>
<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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My Bootstrap Webpage</h1>
<p>I love learning Bootstrap.</p>
</div>
</body>
</html>
Container-Fluid
For Example:
<!DOCTYPE html>
<html lang="en">
<head>
<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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My Bootstrap Webpage</h1>
<p>I love learning Bootstrap.</p>
</div>
</body>
</html>

0 comments:

Post a Comment