Before we start, i would like to tell you what is Bootstrap, why we use Bootstrap, what is responsive website etc. So first question is
What is Bootstrap
Bootstrap is a free front-end framework to create fast and very easily websites. Bootstrap includes HTML, CSS, Form, Buttons, Tables, Navigation modals, image slider and so many things to create dynamic and attractive website, its also include java script plugins. Bootstrap also give you ability to create responsive webpages, responsive webpages mean if you are designing your website with using bootstrap it can be open any platform easily like Mobile, tab, Laptop etc. it means your website will adjust themselves according your devices, it doesn't matter what screen size you are usingBootstrap 4 is the newest version of Bootstrap, Bootstrap 4 support the all major browsers and platforms
What to Learn before using Bootstrap
To Design fully responsive website using bootstrap you should have basic knowledge of HTML and CSS, its ok if you are not master :).How to Get Bootstrep
There are two way to include bootstrap in your website,- Include Bootstrap from CDN
- Download Bootstrap from getbootstrap.com
Here is the MaxCDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
Create First webpage with Bootstrap
As you know first of all we have to include doctype in the starting of webpage along with the lang attribute and the correct character set. As i told you already you should have basic knowledge of HTML and CSS, If you know basic HTML and CSS then you should know what is doctype, lag attribute etc.
still here is the starting doctype etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
Now Second things you have to include following meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Now we have done all Bootstrap tags etc.
here is the final code of webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Bootstrap web page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Heading</h1>
<p>My First Bootstrap content</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>My First Bootstrap web page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Heading</h1>
<p>My First Bootstrap content</p>
</div>
</body>
</html>
It will look like following image.
I know its not looking good at all :), But dont worry there are so many things to add in webpage with the help of Bootstrap, I will keep posting one by one and in the final we will create a attractive design
No comments:
Post a Comment