Getting Started¶
(with Bootstrap 4)
It's easy to add Bootstrap to our webpage. Just like how we can reference CSS, and JavaScript files from our HTML file, we can do the same to add Bootstrap, except the CSS and JavaScript is a file from the internet.
You can get started on your favorite online/offline code editor.
CSS¶
In your HTML file, add the following <link>
element in the contents of your <head>
element.
1 |
|
Javascript¶
Bootstrap requires some JavaScript packages to work. Add these <script>
s at the end of your page, before the end of your <body>
. This will tell the web browser to load the HTML content before the JavaScript, and allow the web page to load faster.
1 2 3 |
|
Starter Template¶
This starter template allows you to quickly create a Bootstrap page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Meta Tag¶
You may have noticed something unfamiliar, the <meta>
tag with its attribute, name
value of "viewport"
.
This is used to ensure our CSS scales the same across all devices.
1 |
|
HTML example¶
Add the following to our HTML document, and examine what happens when we change the size of our browser.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Note on Content Delivery Networks (CDN)¶
What's a CDN and what's up with this "integrity check"?
You may recall how we imported the Bootstrap CSS file.
1 |
|
Breaking it down¶
Web Resources¶
We can see that the link has an attribute, href
with the value, "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
.
This href
"points" to a web resource (a file) named bootstrap.min.css
Web page loading¶
A Content Delivery Network (CDN) is a central point where a client (such as a web browser) can request a web file. The CDN can automatically pick the geographically closest, available web server that has the file, in order to improve web page load times. Companies and web developers use CDNs all the time to host static content, files that are not expected to change.
For example, say I am on the East Coast, Boston, Massachusetts, and using my laptop (the client), I access my friend's photo sharing website, which he hosts entirely on a computer (the host) in his home on the West Coast, San Francisco, California. The speed at which my friend can transfer these photos to my computer is not only limited by the network speed of my friend's home-internet, but also the distance between the client and the host. Specifically, the speed of data transfer between a client, and host is limited by the speed of light (3 * 10^8 m/s in a vacuum).
For example, the distance between New York and Paris (in a straight line) is about 5,800 kilometers. In order for light to travel that distance and back, it would take 40 milliseconds. We consider this to be a theoretical minimum ping between two locations. Real-world pings are slower due to many reasons such as the real-distance of the fiber optic cables, the speed of light in the cable material, delays in routing services, etc.