Setting up the framework_Bootstrap 4 By Example-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

Setting up the framework

Now that we have downloaded the framework and covered its basic file architecture, we will advance to setting up Bootstrap on a web page.

Folder structure

First, let's explicit the folder structure that we will be using in this book. In a folder that we will call main_folder, we extract the Bootstrap contents and create a file called hello_world.html at the same level. Inside the Bootstrap contents will be some folders for fonts, CSS, and JavaScript. The final layout should be like this:

Warming up the sample example

Now, we will add the recommended setup of the Bootstrap framework to the hello_world.html file. Open it in your preferred code editor and add the outline HTML code, like this:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    Hello World
</body>
</html>

Next, add the code for loading css inside the head tag:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
 <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    Hello World
</body>
</html>

And at the end of the body tag, load the JavaScript file:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    Hello World
 <script src="js/bootstrap.js"></script>
</body>
</html>

Open the hello_world.html file in a browser (we will use Google Chrome in this book) and open the JavaScript console. In Chrome, it can be found at Options button (the hamburger button on right upper corner. Go to More Tools | Developer Tools, just as shown in the following screenshot, and click on Console in the opened window. You will see a message saying Bootstrap's JavaScript requires jQuery:

jQuery is a cross-platform JavaScript library, and it is the only third-party requirement for Bootstrap. To get it, we recommend the download from the official website and the latest version (https://jquery.com/download/). Bootstrap requires version 1.9 or higher.

Note

Just use versions above 2.x if you do not want to add support for Internet Explorer 6, 7, and 8. In this book, we will use version 1.11.3.

Copy the jQuery file inside the js folder, and load it in the HTML code at the end of the body tag but before the bootstrap.js loads, like this:

<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>

Bootstrap required tags

Bootstrap has three tags that must be at the beginning of the <head> tag. These tags are used for text encoding and improved visualization on mobile devices:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

The viewport tag is related to the mobile-first philosophy. By adding it, you ensure proper rendering in mobile devices and touch zooming.

You can also disable the zoom functionality by appending user-scalable=no in the content key. With this option, users will only be able to scroll on the web page, resulting in a feel of using a native mobile application.

Note

If you are going to use this tag, you must be sure that users need not use the zoom feature and it will create a good user experience. Therefore, use it with caution.

Also, if you want to add support for older versions of the Internet Explorer (IE) browser (older than version 9), you must add some libraries to have fallback compatibility for the HTML5 and CSS3 elements. We will add them via CDN, which is the Bootstrap recommendation. So, add these lines at the end of the <head> tag:

<!--[if lt IE 9]>
    <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> <![endif]-->

Tip

Do you know what CDN is?

CDN, the abbreviation of Content Delivery Network, is a term used to describe a network of computers that are connected in order to deliver some content. A CDN should provide high availability and performance.

At this point, the file should be like this:

<!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>Hello World!</title>

    <link rel="stylesheet" href="css/bootstrap.css">

    <!--[if lt IE 9]>
      <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>
    <![endif]-->
  </head>
  <body>
    Hello World!

    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

This is our base page example! Keep it for the purpose of coding every example of this book and for any other web page that you will develop.

We would like to point out that Bootstrap requires the doctype HTML5 style before the <html> tag:

<!DOCTYPE html>
<html>
    ... <!--rest of the HTML code -->
</html>