Bootstrap 4 tutorial

My First Code

Introduction

  • We download and use compiled Bootstrap for more portability as it contains mini version of CSS, JavaScript files and icons used for web development.
  • We start our first code by opening a new file in a favourite code editor like Notepad++ and write the code in the empty window.
  • We should write the viewport <meta> tag inside the <head> section of html document to enable touch zooming on mobile devices.
  • We include the X-UA-Compatible meta tag with edge mode to tell the browser to open the highest mode for displaying the web page.
  • We can change the HTML file to a Bootstrap template by including apropriate Bootstrap CSS and JavaScript files inside the <body> tag to improve the performance of our web page.
  • We save this file with extension .html and it will open in the browser by double clikcing it.

  • If we don't want to host the Bootstrap by downloading it, we can use Bootstrap CSS and JavaScript files using CDN(Content Delivery Network) links for a better perfornmance by reducing the loading time, because CDN will be loaded the previous searched sites from he browser's cache or history to prevent the re-downloading of sites.
  • If a visitor to our site has already visited another site and downloaded the Bootstrap files from the CDN that we have used in our site, then the files will be available in the browser's cache and will be used, thereby reducing the loading time.

Code

File save  index.html


<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <title>Basic Bootstrap Template</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> 
  <!-- Optional Bootstrap theme --> 
  <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css"> 
</head> 
 
<body> 
  <h1>Hello, world!</h1> 
  <script src="bootstrap/js/jquery.js"></script> 
  <script src="bootstrap/js/bootstrap.js"></script> 
</body> 
 
</html>


Open browse


Hello, world!



Dear friend, I hope you have liked this post on our (What is Bootstrap 4).  If you liked this post, then definitely share it with your friends.  We have tried "What is computer programming, how to learn?"  The complete information can be described in easy and detailed form.  If you need more information, you can read it, if you have any confusion, then comment below and inform, you will be given correct and accurate information immediately related to your desired subject.  If you want to contact us or you have any suggestion then you can contact us.  We welcome your suggestions, click here to watch our YouTube channel.


 Please note: Our aim given below is to provide knowledge to students preparing for competitive examinations through a new medium.  So that he can get all the information through his mobile, how did you feel about this effort, please let us know in the comment.




 Dear Visitors, if you have any informative information that you want to share with people, contact us, send an email to us - www.akarnaha@gmail.com If the post is good, we will surely publish it with your name.



 Hope you like this great post❤️❤️❤️❤️.


 Don't forget to share this with your friends, below Sharing Button Post.

No comments:

Post a Comment