Bootstrap 3 – The Bootstrap CDN

In the previous code example, you can see that we have used CDN for the HTML5 shiv element and the respond.js file.

A CDN is a large distributed system of servers deployed in multiple data centers across the Internet. Using a CDN means that you save significant bandwidth as the files are not loaded from your server. You can leverage the benefit of a blazing-fast performance, as the files loaded from the CDN are loaded in parallel and not queued by the browser, as they are in a different domain. In addition, the CDN provides data centers closer to the users, meaning that, the server selected is typically based on the user’s location and faster routes. Thus, files are loaded faster. In some cases, it abstracts the need to load the files. Plenty of websites use the Bootstrap CDN and if the website users have previously visited one of these websites, then the browser will use that same copy of the Bootstrap files abstracting the need to load Bootstrap again, thereby increasing the performance of your website.

Tip

Downloading the example code

You can download the example code files from your account athttp://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

The basic structure of the code in the previous example on incorporating the CDN links will look like this:

<!DOCTYPE html>
<html>
<head>
<title> Learning Bootstrap with Packt </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The Bootstrap minified CDN CSS Link -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/custom.css" rel="stylesheet" media="screen">
</head>
<body>
<h1> Welcome to Packt </h1>
<!-- JavaScript plugins (requires jQuery) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- The Bootstrap minified JavaScript CDN link -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Include HTML5 Shim and Respond.js for IE6-8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</body>
</html>

You must be online if you are using CDN. If you are offline, then you have to use the Bootstrap CSS and JavaScript files available in the downloaded ZIP file. Download the compressed or uncompressed jQuery JavaScript file from this link for offline use http://jquery.com/download/.

Also, you need to download the respond.js file from the GitHub site and include it in your project. The link for the respond.js file is https://github.com/scottjehl/Respond.

Click on the highlighted Download ZIP button as shown in the following screenshot:

Extract the respond.js zip file. On unzipping the file, you need to go to the dest folder and copy the respond.min JavaScript file. You need to include this file in the JavaScript folder. However, as a website functions online, it is a good practice to use CDN for your web projects.

Note

In this book, we will use CDN in a few of the chapters as you should not be confused with all the code ingrained in the HTML document. For clarity and to prevent information overload, we will stick to the CDN methodology.

Comments are closed.