Introduction of Bootstrap
Bootstrap likewise gives you the capacity to make a Responsive Design without many efforts.
Best Advantages of Using Bootstrap
Here are some more benefits, why we should choose Bootstrap:
- Easy to use— It is very easy and fast procedure to start with Bootstrap. Bootstrap is very flexible to use. You can use Bootstrap along with CSS, or LESS, or also with Sass [after you download the Sass version].
- Save lots of time— You can save lots of time and efforts by using the Bootstrap predefined layouts and classes and focus on other developments.
- Responsive features— By using Bootstrap you can easily make responsive layouts. Bootstrap responsive features make your web pages to appear more appropriately on various gadgets and screen resolutions without any change in the markup.
- Consistent design— All Bootstrap components share the same design templates and styles through a central library so that the designs and layouts of your web pages are consistent throughout your development.
- Support— As Bootstrap holds a major supporting group, you can be provided with help whenever you get any problem. The developer always keeps the Bootstrap updated. Presently Bootstrap is hosted, expanded, and preserved on the GitHub along with more than 9,000 commits, as well as more than 500 contributors.
- Easy to use— Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap.
- Compatible with browsers— Bootstrap is created with modern browsers in mind and it is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.
- Grid System— Bootstrap has the ability to use the 12-column grid that is responsive. It likewise maintains balance and settled components. The network can be kept up in a responsive mode, or you can essentially adjust it to a secured format.
- Open Source— And the best part is, it is completely free to download and use.
- Pre-Defined Components— Bootstrap approaches with pre-defined components for alerts, dropdowns, Nav bars, and etc. Henceforth, being a component rich, Bootstrap gives various favorable benefits of using it.
Getting Started with Bootstrap
Here, you will learn how to make a web page easily by using Bootstrap. Before the start, be sure to have a code editor and some basic knowledge of HTML and CSS.
If you’re a beginner in web development,
Read This : Learn HTML From Beginning »
OK, let’s get started.
Downloading the Bootstrap Files
There are two versions available for download, compiled Bootstrap and Bootstrap source files.
With the end goal of better understanding, we’ll concentrate on the compiled Bootstrap files. It saves your time since you don’t need to trouble each time including separate files for individual functionality. It will likewise build the execution of your site and saves the valuable bandwidth capacity when you chose to move your web page on generation due to lesser HTTP ask for and download measure since files are compiled and minified.
Understanding the File Structure
Once downloaded the compiled Bootstrap, unzip the compressed folder to check the structure. You’ll see the following file structure and contents.
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
As you can see compiled version of Bootstrap provides compiled CSS and JS files (
bootstrap.*), as well as compiled and minified CSS and JS (
There are four font files (
glyphicons-halflings-regular.*) inside the fonts folder. These fonts file includes more than 250 icons from the Glyphicon Halflings set.
Making the HTML File a Bootstrap Template
i.e. </body>) to improve the performance of your web pages.
<!DOCTYPE html> <html> <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>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Optional Bootstrap theme --> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Furthermore, we’re good to go! after adding the Bootstrap’s CSS and JS files and the required jQuery library, we can start to develop any site or application with Bootstrap framework.
Now save the file on your desktop as “First-Page .html”.
Note: It is important that the extension
.html is specified — some text editors, such as Notepad, will automatically save it as .txt otherwise.
To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. (If it does not, open your browser and drag the file to it.)
Thanks for having a look on this article