- Jul 18, 2015
- 635
- 588
- 157
How to implement Bootstrap
What is Bootstrap?Bootstrap is one of the most popular HTML, CSS, and JavaScript frameworks for developing responsive, mobile first projects on the web. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Benefits of using Bootstrap
- It's completely responsive. Bootstrap's responsive CSS automatically adjusts to phones, tablets, and desktops which makes your project accessible from many devices.
- Anybody with just basic knowledge of HTML and CSS can start using Bootstrap. It's very beginner friendly and it allows you to just copy and paste premade Snippets.
- Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera). Your designs probably won't have major differences in other browsers.
Where to Get Bootstrap?
You can either include Bootstrap from a CDN (Content Delivery Network) or host Bootstrap yourself.
Where can I find examples and snippets?Advantages of using a CDN
Browsers limit the number of concurrent connections (file downloads) to a single domain. Most permit four active connections so the fifth download is blocked until one of the previous files has been fully retrieved. You can often see this limit in action when downloading many large files from the same site. CDN files are hosted on a different domain. In effect, a single CDN permits the browser to download a further four files at the same time. jQuery is ubiquitous on the web. There’s a high probability that someone visiting your pages has already visited a site using the Google CDN. Therefore, the file has already been cached by your browser and won’t need to be downloaded again. You may have great hosting but I bet it doesn’t have the capacity or scalability offered by Google, Microsoft or Yahoo. The better CDNs offer higher availability, lower network latency and lower packet loss. If your main web server is based in Dallas, users from Europe or Asia must make a number of trans-continental electronic hops when they access your files. Many CDNs provide localized data centers which are closer to the user and result in faster downloads. It’s usually possible to link to a specific version of a CSS file or JavaScript library. You can often request the “latest” version if required. Many commercial CDNs provide file usage reports since they generally charge per byte. Those reports can supplement your own website analytics and, in some cases, may offer a better impression of video views and downloads. A CDN can distribute the load, save bandwidth, boost performance and reduce your existing hosting costs — often for free.
How to include Bootstrap using a CDN?
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. Simply paste the following into your html's <head> area to include MaxCDN's Bootstrap and jQuery.
Code:
<!-- minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JavaScript library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>If you want to host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.
