Our clients focus on their business while we nail the entire development project up to a turnkey product. We create dedicated teams packed …
At Hridham, we are proud of our high quality standards of our delivery & software application. These standards allow us to deliver our customers with reliable and …
As we continue to grow and develop, we have been adding new components to our services and new experts to our team, Hridham remains focused on its core vision:…
Standard Install
The first thing you need to do is access the getting started page on getBootstrap. Here you will notice three different download options depending on your level and skill set.
If you’re completely new to Bootstrap, you’ll want to stick with the basic Bootstrap download. This contains compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
If you’re experienced using CSS pre-processors to extend the CSS language, there are two additional options available. The Source Code installation contains Source Less, JavaScript and font files. The SASS installation is Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
Bootstrap Download
Once you’ve downloaded and unpacked the compiled version of Bootstrap, you should see the following structure in the downloaded folder.
This is the most basic form of Bootstrap designed for quick drop-in usage to get you started in nearly any web project. The standard template will reference the .min CSS and JS files. We recommend creating additional style sheets if you want to add modifications to the CSS.
Source Code Download
If you downloaded and unpacked the Bootstrap source code version, it will contain precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. In addition to the files included in the basic download, it also includes the following:
Creating the HTML Template
After you’ve downloaded Bootstrap, open up your favorite text editor. Marc is using Notepad++ (Windows, free) and I’m using Coda (Mac OS X, $75). Here are some additional suggestions.
- Vim (Windows/Mac OS X/Linux, Free)
- Sublime Text (Windows/Mac OS X/Linux, $70)
- TextMate (Mac OS X, $54)
- Gedit (Windows/Mac/Linux, Free)
- Emacs (Windows/Mac/Linux, Free)
Copy and paste the following HTML code into your file. You’ll notice it contains comments which can be deleted.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!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”>
<title>Bootstrap 101 Template</title>
<!– Bootstrap –>
<link href=“css/bootstrap.min.css” rel=“stylesheet”>
<!– HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js”></script>
<script src=“https://oss.maxcdn.com/libs/respond.js/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.0/jquery.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=“js/bootstrap.min.js”></script>
</body>
</html>
|
Save the file as “index.html” in the same folder where you unpacked Bootstrap. Open the index.html in your favorite web browser and you should see “Hello, world!” styled with the Helvetica Neue font.
Bootstrap Customization
Once you get a little more familiar with Bootstrap, you may want to consider a custom install. Doing so enables you to choose which Less files to compile into your custom build of Bootstrap. Reading through the CSS and Components pages on getBootstrap will help you determine which files to use.
Click here to access the customized download page on getBootstrap. Now that you know what you want, simply un-check any of the elements that you don’t need for your particular project. Click the ‘Compile and Download’ button and your customized Bootstrap will be ready to go.
Now that you’ve installed Twitter Bootstrap you’re ready to start creating beautiful design projects. Leave us a comment below and let us know how you’re doing. Make sure to stay up to date with our blog as we’ll be providing many resources and tutorials to build up your knowledge and use of Bootstrap.
