Bootstrap is simply a package of CSS, JavaScript and font files. Using bootstrap
is a lot easier to setup and start.
Download Bootstrap :
We can download the latest version of
Bootstrap from
Bootstrap Download. When we click on this link, we A screen
will appear below:
Bootstrap Setup:
Bootstrap requires at least 3 files for its function that can be downloaded from the Bootstrap Website.
• Bootstrap CSS: This file contains various CSS for bootstrap.
• bootstrap.js: This file contains various JavaScript functions eg. Dropdown and alerts, etc.
• jQuery.js: This file is a jQuery library that can be downloaded from the 'jQuery' website.
1) Download and include files:
These files are downloaded and saved in the 'Bootstrap' folder. Next, you need to include these files in the HTML Document as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body>
<!-- Javascript -->
<!-- put jQuery.js before bootstrap.min.js;
and then add custom jquery -->
<script src="Bootstrap/js/jquery-3.3.1.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2) Add CDN :
Another way to include files is with
CDN. In this method, we do not need to download files, but provide links of
these files.
Note that in this case the code will not work in offline mode.
The
Content Delivery Network (CDN) is a way to host popular libraries in the cloud and in
Allow developers to access these files directly when needed. There are some
Popular CDN service providers, such as
Google Hosted Libraries (
https://developers.google.com/speed/libraries/devguide),
cdnjs (
http://cdnjs.com/),
Cloudflare (
http://www.cloudflare.com/) and others.
Bootstrap also supports
CDN. They have organized both CSS and Javascript
File in their own
Bootstrap Cloud Server (
https://www.bootstrapcdn.com/). At this point, let's try to use the
CDN in the HTML Document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0
/css/bootstra.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body>
<!-- Javascript -->
<!-- put jQuery.js before bootstrap.min.js;
and then add custom jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment
Please do not enter any spam link in the comment box.