Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS: Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN (Bootstrap 4)

Sunday, June 19, 2016

CSS: Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN (Bootstrap 4)

"Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile first projects on the web."  - getbootstrap.com

Brief Introduction:

Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc.  What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior.  Okay, hold on, let me put my professor's glasses on!

Okay class here goes:

Mobile-First Design:  You design your site for mobile devices first so the desktop version is second class citizen.


Responsive Design: A design that makes your site look good on all screen sizes, and does not need to degrade gracefully.  Meaning you can resize, stretch, maximize, do yoga with your site and it will still look good.  Well up to a certain threshold.

So to setup Bootstrap, you will do the following:

1. Create an HTML5 page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

2. In the element add the following four lines
  • <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    This the jQuery library that Bootstrap needs
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
    his is the popper JavaScript library that Bootstrap needs
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">
    his is the Bootstrap JavaScript library
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    This is the Bootstrap stylesheet
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Optional theme -->
        <title></title>
    </head>
    <body>
        
    </body>
</html>
That's all there is to it, now you should be all set to go with Bootstrap. There's one thing that could throw you off when setting up Bootstrap. It might require you to have a certain version of jQuery to work. So you have to experiment a little bit with the jQuery version to make it work. I found that the jQuery version that I linked to works with the latest version of Bootstrap. But that might change in the future as Bootstrap releases new versions.


9 comments:

  1. Thanks for discussing this particular wonderful subject material on your web-site. I discovered it on the internet. I am going to check back again whenever you post additional aricles.

    ReplyDelete
  2. Thin pants, straight-leg and other thin fit cuts are ideal while Boyfriend pants, flares and '90s skater styles are better matched. A layer of your Will Graham Hannibal Hugh Dancy Jacket printed T-shirt is the ideal outfit that makes a denim coat and stockings simply that piece more perfect and jazzy.

    ReplyDelete
  3. We esteem each paper author working for us, thusly we request that our clients put finances on their equilibrium as verification of having installment capacity. Would be a pity for our journalists not to get fair compensation. We likewise need to console our clients of getting a quality paper, in this manner, the assets are set free from your equilibrium just when you're 100 percent fulfilled.

    ReplyDelete
  4. Send your cherished Gifts like Chocolates, Heart Shaped cakes, Velvet cakes, Teddy Bears, Jewelry, Necklaces, Earrings, or Rings to Pakistan.

    ReplyDelete
  5. Some websites charge a fee for access. This can be a good option if you have a lot of homework to do, or if you have a very busy schedule. These websites often have a large number of assignments available. Some of them also allow you to share your assignments with other users.

    ReplyDelete
  6. It would be unfortunate if our writers weren't fairly compensated. The assets are deducted from your account just after you are completely satisfied in order to reassure our customers that they received a high-quality paper. Shoplectic

    ReplyDelete

Search This Blog