Tech Junkie Blog - Real World Tutorials, Happy Coding!: Bootstrap: Setup Bootstrap Locally

Wednesday, April 8, 2015

Bootstrap: Setup Bootstrap Locally

If you use Bootstrap in a local environment it would make sense to use the local version of Bootstrap that you've downloaded from the Bootstrap website.  Follow the steps below to setup Bootstrap locally.

Step-By-Step Instructions:

1.  Go the website http://getbootstrap.com then click on the "Get Started" tab.  You will see three choices for download.  You want to click the first button that is labeled "Download Bootstrap"




















2.  Save the file to your hard drive

3. Unzip the file "bootstrap-3.3.4-dist" and you will see three folders, "css", "fonts", and "js"








4.  In the root level where the folders reside, create an html file call "bootstrap-demo.html"

5.  Scroll down on the "Getting Started" page until you see the "Basic Template" section.  You will see a sample code with "Copy" button.  You want to click on the "Copy" button.


















6. Open the file "bootstrap-demo.html" and paste the code from the "Basic Template" example into the "bootstrap-demo.html" file. The resulting markup should look like the following.  The bootstrap files are <link href="css/bootstrap.min.css" rel="stylesheet">, which is the minimized version of the bootstrap cascading stylesheet.  This .css version takes out the white spaces to save on the file size.  The file links to the JQuery library CDN hosted on Google with this snippet of code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Then finally the bootstrap.min.js file is being linked to with this code snippet

 <script src="js/bootstrap.min.js"></script>

As with the boostrap.min.css file the bootstrap.min.js file is the minimized version of the full bootstrap.js file.  Meaning all the white spaces were eliminated to save on the file size.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

8 comments:

  1. Choose a web hosting company that will supply you with all scripts, web factors and database support that is expected by your website. web hosting in puneweb

    ReplyDelete
  2. But the horizontal arms of the tall tower cranes remained loose despite the potential danger of collapse. According to city officials, it would have taken about two weeks to move the cranes and there wasn't enough time.siteground vs bluehost

    ReplyDelete
  3. Thank you very much for this useful article. I like it. google maps alternatives

    ReplyDelete
  4. Black Ops Zombies… [...]some people still have not played this game. It’s hard to imagine or believe, but yes, some people are missing out on all of the fun.[...]… new york web designs

    ReplyDelete
  5. Thanks for another informative post. Where else could anyone get that kind of info in such a easy to understand way of presentation. website designers nyc

    ReplyDelete
  6. With havin so much written content do you ever run into any problems of plagorism or copyright infringement? My site has a lot of exclusive content I’ve either written myself or outsourced but it looks like a lot of it is popping it up all over the web without my permission. Do you know any techniques to help prevent content from being ripped off? I’d really appreciate it. san francisco design agency

    ReplyDelete

Search This Blog