Getting Started with Bootstrap
Over the past months Bootstrap has gained enormous popularity. There is little surprise in this, given that it saves a lot of headache, when one aims to deliver a visually appealing, responsive site, which works on all browsers.
The css folder contains all the css files, needed by the framework. You will be using the class names specified there, in order to style your pages.
The fonts folder contains the glyph icons resources, which are not obligatory, but may be used occasionally in your application for enhanced visual effects.
Customizing the download
The Bootstrap download page exposes a useful feature, which allows you to customize your download. It allows you to choose which Less files to compile into your custom build. Its first section specifies a large number of CSS and components to choose from. In addition, it also includes some jQuery plugins which may or may not be needed, depending on the specific application you are going to build. Following it, is a large number of field settings, which relate to the complete set of css elements - components, tables, borders, grid layout, etc.
When looking at these options, you may find yourself overwhelmed at first. Getting to know all the different elements and class names is indeed a daunting task. To get a more meaningful presentation, with a visual of each element, as well as the value you are choosing (such as a color value), you may want to use an editor, such as the bootstrap magic one. This not only includes the names of all classes, but also includes many visual elements, to which the changes are applied. This allows choosing uniform fonts and color schemes, for building a solid theme.
Bootsrap Grid System explained
One of the most important aspects of bootstrap is its layout system. The new Bootstrap grid system applies to mobile first. This is little surprise, since many websites have a growing number of mobile visitors.
Bootstrap 3 focuses on designing for mobile right from the start. Bootstrap 3 is mobile first because it now starts by targeting smaller screens, and then “expands” sizes and grids for larger screens.
With Bootstrap 3, the span classes have been removed, and replaced with a combination of col-x classes: col-xs-x, col-sm-x, col-md-x, and col-lg-x. When declaring your layout, you can set the sizes for the smaller dimensions first, and then the distribution over larger devices.
.col-xs-12 .col-md-8.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6.col-xs-6
Additionally, Bootstrap 3 provides dynamic utilities for hiding or showing elements, based on the browser size. This gives a lot of extra flexibility when defining our grid layouts. Given that you are already familiar with tha size abbreviations, all you need to to is add the visible/hidden property and apply the resulting class. These are listed below:
There is virtually no limitation to the layout that you can come up with, using Bootstrap. However intuitive, Bootstrap has a large number of elements, rules and combinations to offer. This may turn out to be a steep learning curve. Because of this, it is a good idea to start by looking at some demos, before you decide which layout to choose for your next project. Happily, there is a wealth of information available, as well we fully functional samples. These are usually divided into to categories: Bootstrap templates and Bootstrap themes.
Templates are usually smaller html entities, which may include just a few Bootstrap elements, or a simple page, such as a log-in page.
Themes, on the other hand, tend to be more complex. These may be only color schemes, which are in essence custom css builds, or a color/style palettes, or complex page collections, which include dashboard setups, custom widgets, and js code.
Below is a short list of resources, which you may find useful, when looking for bootstrap themes and templates - free and commercial: