Bootstrap Tutorial - Html Layout - Mostlikers

29 December, 2015

Bootstrap Tutorial - Html Layout

Bootstrap uses the HTML elements for creating the layouts and CSS for styling the layout, that means you will not have to learn any other coding language just the HTML, CSS, and JavaScript which are the website languages.



My First Bootstrap Code




We start with the HTML document type declaration, HTML, head, and the body tag.


<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8"> 
   </head>
 </html>

The above code is an HTML syntax for a web page. As bootstrap is a mobile first approach to the websites to ensure proper rendering and touch zooming we need to add the below line in the <head> section.


<meta name="viewport" content="width=device-width, initial-scale=1">

The above code tells the browser to follow the device width (width=device-width) and the initial zoom of the page should be 100% (initial-scale=1).

Now let us move to the layout design of the page. There are two types of web page layout
1. Boxed layout or fixed width layout, spanning a specific width.
2. Full width layout - spanning the entire width of the viewport (window width) .

Bootstrap considers both the layouts, for the box width layout .container class is used and for full-width layout .container-fluid class will be used.

NOTE:
Containers should not be nested. (i.e., container inside a container should not be used.)

Basic web page code in bootstrap will be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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>

<!-- this for box width layout -->
<div class="container">
  <h1>My First Box width Bootstrap Container</h1>
  <p>This is some text.</p> 
</div>

<!-- this for full width layout -->
<div class="container">
  <h1>My First full width Bootstrap Container</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

No comments:

Post a comment