Getting started with Bootstrap
For any front-ender or coder, sooner or later the time comes to create his/her own small framework. It usually consists of those rules and functions that had to be repeated in every recent project. Once collected in a single library, when starting work on the next project it will suffice to simply connect this library and use ready-made solutions. This can be a grid of columns with any content, standard rules of sprites, margins, headings, and so on.
In the case one project has several front-end experts, the frameworks should be standardized. If so, preference is given to the standardized frameworks. We are definitely faced with a choice: which framework to use? This article will help future experts to better understand the advantages and disadvantages of Bootstrap.
What is Bootstrap
Created on the outskirts of Twitter, it was first used for their own products and was called "Twitter Bootstrap", but was later released into the wild. That's why the word "Twitter" was left out.
Bootstrap is a CSS/HTML framework for creating websites. In other words it's a set of tools for creating layouts. It has a number of advantages which make Bootstrap the most popular of its kind.
- Speed of work - with a host of ready-made elements, creating layouts with Bootstrap takes much less time.
- Flexibility - due to dynamically adjustable grid adding new elements doesn't violate the general structure.
- Easily customizable - editing styles is accomplished by creating new CSS-rules that are executed instead of the standard ones. Plus, you don't need to use the attributes like
- Large number of templates - separate topic in this article, mentioned later on.
- Huge community of supporters/developers.
- Wide range of usage - Bootstrap is used when creating themes for virtually any CMS (Magento, Joomla, WordPress or any other), including single landing page applications.
- Great official documentation.
Especially popular Bootstrap is when you need to create so called "landings" (landing pages).
Templates in Bootstrap allow you to change already modified elements to fit your needs. Many developers offer their own templates (for a fee and free).
Connecting Bootstrap templates is very easy: after connecting the Bootstrap just add a call of your CSS template.
Content of the framework
If you choose Bootstrap, this framework can significantly save time on development and layout of the front-end with the help a host of components. Later we'll describe the main ones, which are required for most front-end experts.
It should be noted that the Bootstrap is, so to say, a set of three frameworks: CSS/HTML, JS-components and icon font.
Grid is a basic requirement for a good layout, a powerful tool for a block grid content or any nested elements. With the help of prefixes we can indicate how to change the display of blocks, depending on the type of device on which the website is displayed.
For example, the class "col-xs-" will be used for mobile phones with screen width of less than 768 pixels and "col-lg-" for any device with screen width of more than 1170 pixels. Bootstrap divides the width of the parent block into 12 equal blocks, which we can be used as you wish. Some blocks can be combined to give, for example, three columns: two 25% "col-lg-3" and one 50% "col-lg-6".
Visually, the page can be represented in any desired way:
If you go beyond 12 blocks, the rest will be displayed below each other, so watch out. Here is an example of blocks that will be displayed in the same way on all devices. Let's divide the screen into three equal parts:
<div class="row"> <div class="col-sm-4">First column</div> <div class="col-sm-4">Second column</div> <div class="col-sm-4">Third column</div> </div>
In addition to the ability of changing block layout and page structure, Bootstrap allows you to format the font: paragraphs, quotes, headings, sub-headings, different text sizes, code insertions and so on. In most cases, you do not have to change the default settings of the text, because all the margins, headings, line spacings, etc. are given with an accuracy of a personal doctor.
A lot of attention is also paid to the semantics: main heading can be formatted as a tag
<h1>heading</h1>, but also as
<div class="h1">heading</div> - both versions will look the same, but the second one can be used any number of times on the page.
If you want to try to work with Bootstrap, but don't want to delve into anything difficult, start small: make a textual page with some news. Just draw a line around a heading and sub-headings, insert images, put some quotes, lists, and appreciate how easy this framework copes with such tasks.
Any alert can be represented in 4 standard formats: success, info, warning, danger. This is how they look like:
To format such a message it will suffice to add two classes to the desired object:
<div class="alert alert-success" role="alert">Well done! You successfully read this important alert message.</div> <div class="alert alert-info" role="alert">Heads up! This alert needs your attention, but it's not super important.</div> <div class="alert alert-warning" role="alert">Warning! Better check yourself, you're not looking too good.</div> <div class="alert alert-danger" role="alert">Oh snap! Change a few things up and try submitting again.</div>
Also Bootstrap allows you to format dialog boxes, pop-ups and tooltips.
Navigation is often a crutch, which makes creating the layout slip down. To make a layout competently, design and make the elements of navigation work properly, is usually one of the most difficult tasks of the layout. Bootstrap navigation had a special attention: framework contains the design controls for tabs, pagination, sidebars, breadcrumbs, main menu, toolbar, etc.
The main menu is easy to be designed to look like this:
To fix the main menu, it will suffice to add a class "navbar-fixed".
Pagination looks like this:
The code required is as follows:
<nav> <ul class="pagination"> <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav>
As you can see, nothing complicated.
Text fields and blocks (textareas), buttons, labels, radio buttons, check boxes, drop-down lists - for all the form elements Bootstrap has already prepared styles. You can design vertical and horizontal separations of elements from headers, as well as highlight part of the form if any errors or warnings occur.
You can design a horizontal arrangement of blocks, all fields in one row, and more.
Here things are simple, to set a button, it is added to the desired set of classes. Here are only several types of buttons:
Here is the code:
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>
The good old tables are made by adding class "table". And we'll get a very neat table:
In addition to styles Bootstrap has rules of behavior for modal windows, sliders, tooltips, tabs, and other interactive elements of the page.
To operate these components jQuery is required; don't forget to make sure to connect it to bootstrap.js.
Icon font will allow you to forget about the annoying sprites for icons and greatly simplify your life. The only limitation imposed by this method is that each icon copy can be assigned only one color.
You can choose from 200 icons and add it to the website as follows:
<span class="glyphicon glyphicon-star"></span>
How to connect Bootstrap
Visit the official website and mark the items that you need for work. The additional features can be added or removed if necessary. After selecting hit "Compile and Download", get the archive, then unpack it.
For basic operation you'll require only one file, it's underlined in red. Save it into the folder with your CSS and connect it in the head of the page.
<link rel='stylesheet' href='/styles/bootstrap.min.css' type='text/css' media='all'>
Icon font is in the folder fonts, and if you really need it, make sure that it stays there. Keep the folder structure so that everything works as intended.