YouTip LogoYouTip

Bootstrap Environment Setup

# Bootstrap Environment Setup Installing Bootstrap is very easy. This chapter will explain how to download and install Bootstrap, discuss the Bootstrap file structure, and demonstrate its usage with an example. ## Download Bootstrap You can download the latest version of Bootstrap from [http://getbootstrap.com/](https://getbootstrap.com/). When you click this link, you will see a webpage like the one shown below: ![Image 4: Bootstrap Download](#) You will see two buttons: * _Download Bootstrap_: Download Bootstrap. Clicking this button allows you to download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts. It does not include documentation or the original source code files. * _Download Source_: Download source code. Clicking this button allows you to get the latest Bootstrap LESS and JavaScript source code directly from the source. If you are using the uncompiled source code, you need to compile the LESS files to generate reusable CSS files. For compiling LESS files, Bootstrap officially only supports (http://twitter.github.io/recess/), which is Twitter's CSS linter based on [less.js](http://lesscss.org/). For better understanding and easier use, we will use the precompiled version of Bootstrap in this tutorial. Since the files are compiled and minified, you don't need to include these individual files every time in standalone functional development. This tutorial was written using the latest version (Bootstrap 3). ## File Structure ### Precompiled Bootstrap When you download the compiled version of Bootstrap, unzip the ZIP file, and you will see the following file/directory structure: ![Image 5: Compiled Bootstrap File Structure](#) As shown in the image above, you can see the compiled CSS and JS (bootstrap.*), as well as the compiled and minified CSS and JS (bootstrap.min.*). It also includes the Glyphicons font, which is an optional Bootstrap theme. ### Bootstrap Source Code If you download the Bootstrap source code, the file structure will look like this: ![Image 6: Bootstrap Source Code Structure](#) * The files under _less/_, _js/_, and _fonts/_ are the source code for Bootstrap CSS, JS, and icon fonts, respectively. * The _dist/_ folder contains the files and folders listed in the precompiled download section above. * _docs-assets/_, _examples/_, and all _*.html_ files are Bootstrap documentation. ## HTML Template A basic HTML template using Bootstrap looks like this: ## Example Bootstrap Template

Hello, world!

Here, you can see the inclusion of **jquery.js**, **bootstrap.min.js**, and **bootstrap.min.css** files, which turn a regular HTML file into a Bootstrap template. Details about each element in the code snippet above will be explained in detail in the (#) chapter. ## Example Now let's try using Bootstrap to output "Hello, world!": ## Example

Hello, world!

[Try it Β»](#) * * * ## Staticfile CDN Recommendation For domestic use, it is recommended to use the library on Staticfile CDN: Additionally, you can use the following CDN services: * International recommendation: [https://cdnjs.com/](https://cdnjs.com/)
← Pdo GetattributeBootstrap Intro β†’