(We here at All Tech Flix are starting a Programming and Web Development Series. This series will mostly contain explanation of different programming concepts in very simple and understandable language that any one could understand. We’re going to start with Web Development in Bootstrap.)
You might have noticed “Documentation Simplified” written in square brackets. It’s actually what we are going to do in this series of Bootstrap web development. We are going to simplify the official documentation provided by Twitter Bootstrap so that you can easily understand the officially provided content rather than looking over to other sites. Some people find it difficult to understand officially provided content, because it contains more professional language and not much of explanation.
Most framework documentation are written by keeping in mind as if you are a some developer. However, Bootstrap team has done far good job in documenting their framework. Also, official documentation contains more in-depth look in the framework. So, it’s the best to understand the officially provided documentation. Now, Let’s get started with Twitter Bootstrap.
What is Bootstrap Framework?
Bootstrap is a Framework that was developed by Twitter for their own use. They developed it for their employees so that they could rapidly and easily develop designs and prototypes. Well, further on as the development on the framework increased they made it publicly available as Open source project on August 19, 2011.
<nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Tags</a></li> <li role="presentation"><a href="#">Categories</a></li> </ul> </nav>
Check the preview of the above example here.
It work same for other components. You just have to add specific class for specific component and it will be styled automatically. You can further customize the css file by overwriting the class to apply your own styling. Now, let’s get you started with actual bootstrap example.
Adding Bootstrap to your website
First you got to download Bootstrap files to your local disk if you’re going to work offline. If you’re not than you can simply link it through CDN links provided. But it’s good to have the files offline. Just go to getting started page on Bootstrap’s site. And download Bootstrap. Just click on download bootstrap not on source code or Sass. We’re not going to deal with them right now.
In the downloaded Bootstrap.zip you’ll get following files.
From the above files you should specifically concern “min” files. They are minified version of files. bootstrap.min.css is minified version of bootstrap.css . In the minified version all the white spaces are removed so that the browser can compile the file faster. Next in the CSS folder you get is bootstrap theme. It’s the default theme of bootstrap. It contains styling for specific components. You can always create your own theme or use themes created by others. Best place to check out new themes in Bootswatch.
Boostrap Link placement
Now, we’ll add Bootstrap’s CDN links to our HTML page. The HTML page structure is pretty same. We’re just going to link Bootstrap files. Below are the CDN links.
Simple Bootstrap Page Example with Header
Understanding the Code:
We’ll start with second meta tag. The first one is simply for character encoding and backward compatibility.
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
This meta tag makes sure that Internet explorer use the highest available standard ie. Edge. This tag is especially for IE browsers to let developers choose in which IE version the page should be rendered. Other options available are content=”IE11″, “E10”, “IE9” and so on.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
This meta tag sets the virtual viewport for mobile devices. Here as you see value of width is set to device-width. This takes width of the device from your phone as input and stores it in width attribute. Next attribute initial-scale is set to 1. This sets the initial zoom when the page is visited. Other attribute that you can add is user-scalable This allows user to Zoom in and out. Value being Yes or No. By default it’s set to Yes. So, if you don’t want your user to zoom-in, set the value to No.
Next, the bootsrap.min.css and bootstrap-theme.min.css are linked. Then comes HTML5 shim and Respon.js for HTML5 and media query compatibility for IE8 with conditional tags. Scripts will only be used if web browser is below IE9.
Next in the body <div class=”container”> is used. Container is a class of Bootstrap.css. This will make sure everything that you add between this tags will remain fixed in the container. Another class is container-fluid. This uses the full width of the screen rather than being fixed. Next comes page-header. This class of Bootstrap adds styling and Typography to your header text.
In the next tutorial we’ll see Responsive Grids. One of the most important concept in Bootstrap.