Getting started with Bootstrap 3

Twitter Bootstrap is an extremely popular front-end framework designed to build websites and web applications. In fact, it is a collection of tools leveraging HTML, CSS and some optional Javascript extensions like dialogs or tooltips and is used to facilitate user interface creation. Its documentation can be found here. 
 
The simplest way to start working with Bootstrap is to use a content delivery network or CDN which delivers all the necessary files via the Internet. To use it all that is necessary to do is to add a couple of links to your HTML file as will be discussed later. A code snippet adapted from Bootstrap Getting started guide is shown below.


It is an HTML file. In this template the <!DOCTYPE html> declaration informs the browser that this page is authored using HTML5. The meta tag <meta charset="utf-8"> is used to instruct the browser to use utf-8 encoding. Then the X-UA-Compatible meta tag has something to do with Internet Explorer and in particular if you use IE as your browser, which supports a number of compatibility modes, the latest version of the mode is used. The last meta tag is used to deal with small-screen devices like smart phones and deserves further consideration.
The Bootstrap is often described as a “mobile first” front-end framework, so it pays a lot of attention to how the page is displayed in mobile browsers. The viewport meta tag was introduced by Mobile Safari browser and now is supported by many other modern mobile browsers. The Apple documentation describes it here. Long story short a mobile browser by default displays your application in the upper-left corner.


By adding the width=device-width the app is stretched to fit the visible area.


The second parameter, initial-scale=1, controls how your app is rendered when the orientation of a device is changed. If an app is in portrait orientation, it looks like that


then if the initial scale is set to one, changing orientation to landscape renders app like the right-hand example above, so that the new width is inferred and set to device-height for you. But if the initial scale is not set, the app looks like the right-hand image below shows.


Actually, it was merely zoomed.

The link and script tags in the template are used to load all the necessary files from the CDN.

To begin with your application just change the title and add your tags to the body section of the template.

Additionally, a new tool called Bootlint, which is used to check your HTML + Bootstrap pages for errors, can be added. All results are printed to the console, just press F12 to open it. The simplest way is to use a bookmarklet which can be obtained here. Instructions for how to add a bookmarklet in Chrome are here and in Firefox here. 

If you use Chrome browser an extension adds a button to the toolbar, which allows to check your code in a single click. To test the capabilities of Bootlint try to comment out some of the meta tags in the template, open it in your browser, click the bookmark or a button in Chrome and watch what happens in the console next.

Also, there are some useful examples provided in docs/examples folder of the Bootstrap sources, which can be used as a basis of your project. It is interesting that the recommended on the Bootstrap site way to obtain the sources using Bower do not provide one with the docs folder for it is added to ignored list in bower.json file in the GitHub repository as of version 3.2.0. The workaround is to clone the Bootstrap repository using git. 

All examples can be previewed here.

Moreover, you could share your work online on Bootsnip where a lot of nice bootstrap snippets are posted and can be previewed instantly.
 

Comments

Post a Comment

Popular posts from this blog

AngularJS Tutorial: Creating AngularJS Hello World application using Plunker

What is AngularJS AngularJS is a front-end framework written in JavaScript and initially released in 2010. It is suitable for creating the so-called single-page application whereby you create parts for every application use case and some parts are displayed and some are not at any moment of time depending on the state of the application. AngularJS is based on declarative programming which implies describing what you would like to achieve rather than describing the algorithms of achieving the final go as in imperative programming. For example, one can use conditionals and loops to implement an algorithm, but another option is to describe a set of desired results like in SQL, where one doesn’t need to know how the server works and executes queries. In the front end realm, imperative programming is represented by jQuery a part of which is used by AngularJS under the hood. The main idea of AngularJS is it uses a thin server, which produces only data for an Angular appli
Read more

Bootstrap 3 Forms Tutorial

Image
Forms are essential for web applications, one can see them while logging in an application, editing a profile or registering for an account. Bootstrap greatly simplifies form styling by providing special style classes and providing automatic styling of form controls. To learn how to style forms and form controls we’ll discuss a registration form shown below. The code for this form as well as live demo could be seen on Bootsnipp. First things first, let’s review a basic form template. A form is placed in a .container for proper formatting. Then, in line 3 an HTML form tag is seen with a class .form-horizontal and a role form. The former is used to produce a form with labels, such as “Password” in the above image, that are on the same line as inputs, the latter is to describe meaning of the element, for example, an anchor tag can be styled to look like a button, in this case a role attribute tells that the anchor is used for playing a button’s role. After that, in line t
Read more

AngularJS Tutorial: AngularJS Controller As Syntax

Image
Introduction to AngularJS Controller As Syntax In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem: the so-called Controller As syntax introduced by AngularJS 1.2 and .component() method introduced by AngularJS 1.5. The latter option is a recommended way to go if you are thinking about upgrading your application to newer Angular versions. In this post we’ll talk about AngularJS Controller As syntax. As was mentioned previously, when we instruct Angular to use a controller with the ng-controller directive, a new instance of a controller and a child scope is created. Alternatively, the same directive but with a different syntax can be used to create a controller and to attached it to a newly-created scope as the snippet below shows. The differences are that, first, in the ng-controller directive we not only pass the name of the registered controller, but also, a variabl
Read more