Everyone know that bootstrap 3 is the largely used front-end framework for the website development for responsive layouts. To developing your first bootstrap site you need know about the bootstrap structure and also know hot to works. So this is the beginning guide how you can start. There are some simple steps and there more some chapters after reading you can develop your own bootstrap responsive websites.
1. Download the bootstrap framework these are some files of js and css. you can get these files from the bootstrap official website. And download the 'Precompiled Bootstrap'. After downloading and extracting the zip folder you can see there are some directors with the name of the css, js and fonts. Here the all source files of the bootstrap framework. You need to copy these folders in your project and attach these files in your html document.
2. In this tutorial i am creating a home.html where i am going to use the bootstrap framework.
3. Also create a style.css in the css directory (/css/style.css) you can use this css file to write your own classes and to override the bootstrap classes instead of changing direct in the bootstrap files.
4. Now time to see the code of attaching the css and js files. All the js and css need to attach in the head section of the html document. But before attaching the files we need to add the meta viewport.
Meta viewport code also need to mentioned in the head section of the document. Viewport is the user visible area of the webpage. When we talking about the responsive design. There are different view area in different screens. Now there are tablet and mobiles and computer screens in the use. So viewport fix the issues of layout visible area. It scale the view of the website according the the screen resolution. See how can we add viewport and attach the files in our webpage.
1. Download the bootstrap framework these are some files of js and css. you can get these files from the bootstrap official website. And download the 'Precompiled Bootstrap'. After downloading and extracting the zip folder you can see there are some directors with the name of the css, js and fonts. Here the all source files of the bootstrap framework. You need to copy these folders in your project and attach these files in your html document.
2. In this tutorial i am creating a home.html where i am going to use the bootstrap framework.
3. Also create a style.css in the css directory (/css/style.css) you can use this css file to write your own classes and to override the bootstrap classes instead of changing direct in the bootstrap files.
4. Now time to see the code of attaching the css and js files. All the js and css need to attach in the head section of the html document. But before attaching the files we need to add the meta viewport.
Meta viewport code also need to mentioned in the head section of the document. Viewport is the user visible area of the webpage. When we talking about the responsive design. There are different view area in different screens. Now there are tablet and mobiles and computer screens in the use. So viewport fix the issues of layout visible area. It scale the view of the website according the the screen resolution. See how can we add viewport and attach the files in our webpage.
<!DOCTYPE html>
<html>
<head>
<title>My First Bootstrap page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- My own CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>My First Bootstrap Page.</h1>
</body>
</html>
5. Not need to us to attach fonts the fonts will auto attached because all the fonts attached or import code already exists within the bootstrap.css file. Now you can continue work on your web page after all these done.
To learn more about the bootstrap 3 see others bootstrap articles in this blog.