Get your basic HTML template set up
To keep things simple and to show you just how similar this is to the last tutorial, I will be starting with the same code we finished with there.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Installing Bootstrap locally </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<button class="btn btn-success" onclick="$(this).hide();"> Click me! </button>
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Download Bootstrap and JQuery
Downloading Bootstrap
Lets start off by downloading the Bootstrap files here. You will notice there are 3 different packages available to download. Since I haven’t covered LESS or SASS, make sure to choose the standard “Bootstrap” package. If you’re really not sure, it will say “Compiled and minified CSS” in the description.
Downloading jQuery
You can download the jQuery files here. If you would like to support ie 6, 7, and 8 then make sure to choose a version of jQuery 1. Otherwise feel free to use jQuery 2 but some steps may differ slightly from my tutorial.
I chose the compressed, production version of jQuery 1. This means that all the spaces have been taken out of the code to make the file as small as possible to load faster. When you click on the link, a page should open with all of the code. Don’t be alarmed, simply copy all of it as I do in the video above, and then paste it into your text editor to save the file in the correct location.
The file structure
Once I had the files downloaded I decided to change my files structure a little bit. See the image below, or the video above for more detail. I decided to put jQuery with my other Bootstrap js files to keep things simple. So I had a directory for JavaScript files, a directory for CSS, a directory for fonts, and later on in the series I added a directory images.
Changing the file paths
Below you can see the new file paths to each file. If you have set up your file structure identical to mine, then everything should work perfectly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Installing Bootstrap locally </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<button class="btn btn-success" onclick="$(this).hide();"> Click me! </button>
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
0 comments