Web week 10
Bootstrap
Scaling the web page
The following <meta> tag tells the browser to scale the web page to the size of the window it is displayed within, regardless of whether it's a desktop computer, a tablet or a mobile phone.
<meta name="viewport" content="width=device-width, initialscale=1, shrink-to-fit=no">
Loading Bootstrap's main CSS file
The following <link> tag loads an essential CSS file named bootstrap.min.css into the web page from a content delivery network that hosts the file. This is Bootstrap's main CSS file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/ bootstrap/4.4.1/css/bootstrap.min.css">
What is a content delivery network (CDN)? A CDN is a collection of geographically distributed servers that deliver web pages and other web content to users, based on their location. Servers that are closest to the website visitor respond to the request. This allows the CDN service to deliver files at very high speeds.
Loading the jQuery library
The following <script> tags load an essential JavaScript file named jquery3.4.1.slim.min.js into the web page from a content delivery network that hosts the file. This JavaScript file is called the jQuery library.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min .js"></script>
What is JavaScript? JavaScript is a programming language that can be interpreted by web browsers. A program or script is a set of instructions for a computer. JavaScript programs or scripts can be embedded into a HTML document to provide extra control over the content, appearance and behaviour of the web page.
What is jQuery? jQuery is a free, open-source library of JavaScript code that simplifies some tasks performed with JavaScript. Bootstrap requires jQuery for some of its JavaScript components to work
Loading the Popper.js library
The following <script> tags load an essential JavaScript file named popper.min.js into the web page from a content delivery network that hosts the file. This JavaScript file is called the Popper.js library.
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/ dist/umd/popper.min.js"></script>
The previous section explained what JavaScript is, but what is Popper.js? Popper.js is a free, open-source library of JavaScript code that simplifies some tasks performed with JavaScript. Bootstrap requires Popper.js for some of its JavaScript components to work.
Loading Bootstrap's main JavaScript file
The following <script> tags load an essential JavaScript file named bootstrap.min.js into the web page from a content delivery network that hosts the file. This is Bootstrap's main JavaScript file.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/ 4.4.1/js/bootstrap.min.js"></script>
Adding security features
The collection of files that you downloaded earlier for this activity included a variation of the sample.html file named secure-sample.html. The HTML code contained within this file is shown below. This code is very similar to the sample that we discussed earlier, but the <link> tag and the <script> tags contain additional attributes named integrity and crossorigin, which are highlighted below.
The code for integrity="What every code you put in" crossorigin=" anonymous">
For a full example:
</head> <body> <h1>Bootstrap Example</h1> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGF AV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/ dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbH aEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/ 4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj 0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
What are these extra attributes? The integrity and crossorigin attributes are a security feature. You learned earlier that the <link> tag and the <script> tags in this code download files from a content delivery network (CDN). CDN services offer a fast way of sharing files, but they come with a risk. If an attacker gained control of a CDN, they could add malicious content into the files that the CDN serves. This could potentially damage every website that fetches files from the CDN.
The integrity and crossorigin attributes provide protection against that kind of attack. When a web browser retrieves a file from a CDN, it can use the information in the integrity attribute to check that the file has not been manipulated before downloading it
If you view the file secure-sample.html in a web browser, you will see that its appearance is identical the file sample.html, which you viewed earlier. The only difference between the two files is this additional invisible security feature. You should use secure-sample.html as a template or starting point for building web pages that use Bootstrap in this unit.
The option of downloading Bootstrap files
Using the template file sample.html or secure-sample.html provides a fast, easy way of starting a Bootstrap project. All of the required CSS and JavaScript files are automatically downloaded to your web browser from a content delivery network (CDN) by the <link> tag and the <script> tags in the code.
If you did not want to rely on a CDN for your Bootstrap project, you could take an alternative approach and store copies of the required CSS and JavaScript files on your computer. When web designers do this, they typically store the required files in two subfolders within their website named css and js.
The css folder stores the Bootstrap CSS files, and the js folder stores the Bootstrap JavaScript components and plugins. The <link> tags and the <script> tags in the code then need to be modified to point to the files in these folders instead of the files on the CDN.
We are not going to take that approach in this unit of study, but if you particularly wanted to, you could download those files from the following locations.
• Bootstrap files can be downloaded from http://getbootstrap.com
• The jQuery library can be downloaded from http://jquery.com
• The Popper.js library can be downloaded from http://popper.js.org
The Bootstrap grid system
Study Guide module 3 introduced you to the idea of using a grid system to control the layout of a web page. For example, the 960 grid system is commonly used to guide the design of static page layouts. The grid divides the screen into a number of rows and columns, and provides a structure upon which blocks of text, images and other page elements can be positioned in an orderly way.
Bootstrap's grid system divides the screen into a grid of 12 columns of equal width. The column widths change in response to the size of the screen they are displayed on. If you don't want to use all 12 columns individually, you can group the columns together to create wider columns called spans. For example, you could have 2 spans with 6 columns in each, or you could have 3 spans with 4 columns in each, or you could have a span of 4 columns and a span of 8 columns. Figure 10-9 illustrates some possible variations.
The Bootstrap grid system
Study Guide module 3 introduced you to the idea of using a grid system to control the layout of a web page. For example, the 960 grid system is commonly used to guide the design of static page layouts. The grid divides the screen into a number of rows and columns, and provides a structure upon which blocks of text, images and other page elements can be positioned in an orderly way.
Bootstrap's grid system divides the screen into a grid of 12 columns of equal width. The column widths change in response to the size of the screen they are displayed on. If you don't want to use all 12 columns individually, you can group the columns together to create wider columns called spans. For example, you could have 2 spans with 6 columns in each, or you could have 3 spans with 4 columns in each, or you could have a span of 4 columns and a span of 8 columns. Figure 10-9 illustrates some possible variations
To illustrate how these layouts appear on the screen, Figure 10-10 shows a web page that uses 3 spans with 4 columns in each on a desktop computer with a screen resolution of 1024 × 768 pixels. Figure 10-11 shows the same web page on a mobile device with a smaller screen resolution of 640 × 960 pixels. Notice how the page layout automatically changes to suit the device on which the page is viewed. On the desktop computer screen, the columns appear side by side. On the smaller mobile device screen, the columns automatically stack on top of each other to allow reading without horizontal scrolling
Bootstrap containers
As you learn about the Bootstrap grid system in this module, it is important to understand that the techniques you learned in the previous modules for building static page layouts with CSS are not applicable to building responsive page layouts with Bootstrap. You do not need to write CSS style rules to control page layout when you are working with Bootstrap. The Bootstrap framework predefines all of the CSS style rules for you to use in your web page.
When a web page uses the Bootstrap grid system to control the page layout, all of the rows and columns that make up the layout are enclosed within a container to ensure proper alignment and padding.
•The .container class provides a responsive fixed-width container that is styled to appear at the centre of the browser window.
• The .container-fluid class provides a full-width container that spans the entire browser window.
Bootstrap rows and columns
Inside a Bootstrap container there is a row. A page layout can have as many rows as you like, but they must all be within the container. The Working Dogs example you have been viewing has a single row.
<div class="container"> <div class="row"> ... </div> </div>
Inside the row there are columns. Each column is created by specifying how many of the 12 available Bootstrap columns it should span. The Working Dogs example has 3 columns, each of which spans 4 grid columns (4 + 4 + 4 = 12). To achieve this outcome, we have set each <div> tag's class attribute to the value col-md-4. The number 4 in this value specifies the number of grid columns that should be spanned.
What do the letters md stand for in the value col-md-4? Bootstrap has five class prefixes for creating columns for screens of different sizes.
• The class prefix col is for extra-small screens with a width less than 576 pixels.
• The class prefix col-sm is for small screens with a width greater than or equal to 576 pixels.
• The class prefix col-md is for medium screens with a width greater than or equal to 768 pixels.
• The class prefix col-lg is for large screens with a width greater than or equal to 992 pixels.
• The class prefix col-xl is for extra-large screens with a width greater than or equal to 1200 pixels.
Setting the <div> tag's class attribute to col-md-4 tells the browser that the element should span 4 of the available 12 grid columns on medium screens. Since we haven't specified how the <div> element should appear on extra-small, small, large and extra-large screens, the browser will automatically follow the same layout for other screen sizes. If we wanted to change the layout for screens of other sizes, we could do that. For example, let's imagine that we want the web page to have 3 columns of equal width on extra-small, small and medium screens, but on large and extra-large screens we want 1 wide column followed by 2 narrower columns. To achieve that outcome, we could add extra values to the <div> tag's class attribute as shown below.
<div class="container"> <div class="row"> <div class="col-md-4 col-lg-6"> <h2>Border Collie</h2> <p>The Border Collie is one of the most intelligent of all domestic dogs. Border Collies were bred as working dogs, specifically for herding livestock. They form a close bond with their owner, but they are not ideal family pets unless you have an active lifestyle or a large property.</p> </div> <div class="col-md-4 col-lg-3"> <h2>German Shepherd</h2> <p>The German Shepherd is a popular breed of working dog that is known for its strength, intelligence and obedience. German Shepherds excel at almost anything they are trained to do: assisting the disabled, police service, military service, search and rescue, and more.</p> </div> <div class="col-md-4 col-lg-3"> <h2>Labrador Retriever</h2> <p>The Labrador Retriever was bred to be both a friendly companion and a useful working dog. Labradors are easily trained, making them ideal for use as search dogs, guide dogs and hearing dogs. They are also affectionate, good-natured family pets that bond well with children.</p> </div> </div> </div