Posted in Web Techs

WebTech Post #7 Bootstrap

If you have any sort of interest in web development, you’ve likely heard of Bootstrap. According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Sounds great! Now how do I use it?

It would be easy to send you over to their Getting Started page and call it a day. Their setup guide is indeed a host of useful information – links to CDNs, explanations on how to install with Bower, npm, and Composer, information on integration with Autoprefixer and LESS, a bunch of templates, licenses, and translations – but it is certainly not a step by step guide to getting started (which very well might be in the spirit of autodidactism).

When I discovered Bootstrap around half a year ago, responsive design was gaining in popularity, and not necessarily the expected norm. Having only ever made websites from scratch according to my college curriculum, I was a little confused about the entire concept of a framework. I’d imagine it’s even more confusing for beginners who are now expected to learn responsive design concepts and Bootstrap and JavaScript libraries, in addition to HTML, CSS, and JS.

I thought this could serve as a first look into Bootstrap for beginners, so there won’t be going into LESS and Sass integration, which are more intermediate/advanced concepts. While it’s written for the current, stable version Bootstrap 3, the concepts will remain the same for future versions. I heard 4 is gonna be out soon?

Prerequisites

  • Basic knowledge and understanding of HTML and CSS

What is Bootstrap?

Bootstrap can be boiled down to three main files:

Additionally, Bootstrap requires jQuery to function. jQuery is an extremely popular and widely used JavaScript library, that both simplifies and adds cross-browser compatibility to JavaScript.

Everything else you might happen across while studying the Bootstrap documentation – Grunt, Gulp, Sass, LESS, bower, npm, etc – is not necessary to get started with Bootstrap. These are task runners, preprocessors, installation aids, and package managers, so don’t be discouraged if you don’t know how to use any of them yet. (I’ll probably try to cover them like later?)

So that being said the following are a few links from which I learnt Bootstrap.

Bootstrap – link
W3Schools – link
TutorialsPoint – link
Files – link

(≧ω≦)ゞ
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s