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>
No comments:
Post a Comment