Monday, February 13, 2017

Bootstrap - Overview

What is Twitter Bootstrap?

Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.

Bootstrap - Environment Setup

Try it Option Online

You really do not need to set up your own environment to start learning Bootstrap. Reason is very simple, we already have set up Bootstrap environment online, so that you can execute all the available examples online at the same time when you are doing your theory work.

Bootstrap - Grid System

In this chapter we shall discuss the Bootstrap Grid System.

What is a Grid?

As put by wikepedia −
In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

Bootstrap - CSS Overview

This chapter provides an overview of the key pieces of Bootstrap's infrastructure, including Bootstrap's approach to better, faster, stronger web development.

Bootstrap - Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. Using typography feature of Bootstrap you can create headings, paragraphs, lists and other inline elements. Let see learn each one of these in the following sections.

Bootstrap - Code

Bootstrap allows you to display code with two different key ways −
  • The first is the <code> tag. If you are going to be displaying code inline, you should use the <code> tag.

Bootstrap - Tables

Bootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap are −
Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns.

Bootstrap - Forms

In this chapter, we will study how to create forms with ease using Bootstrap. Bootstrap makes it easy with the simple HTML markup and extended classes for different styles of forms. In this chapter we will study how to create forms with ease using Bootstrap.

Bootstrap - Buttons

This chapter covers the use age of Bootstrap button with examples. Anything that is given a class of .btn will inherit the default look of a gray button with rounded corners. However, Bootstrap provides some options to style buttons, which are summarized in the following table −

Bootstrap - Images

This chapter covers the Bootstrap support for images. Bootstrap provides three classes that can be used to apply some simple styles to images −

Bootstrap - Helper Classes

This chapter discusses some of the helper classes in Bootstrap that might come in handy.

Close icon

Use the generic close icon for dismissing content like modals and alerts. Use the class close to get the close icon.
<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Bootstrap - Responsive utilities

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
Use these sparingly and avoid creating entirely different versions of the same site.

Bootstrap - Glyphicons

This chapter will discuss about Glyphicons, its use and some examples. Bootstrap bundles 200 glyphs in font format. Let us now understand what Glyphicons are.

Bootstrap - Dropdowns

This chapter will highlight about Bootstrap dropdown menus. Dropdown menus are toggleable, contextual menus for displaying links in a list format. This can be made interactive with the dropdown JavaScript plugin.
To use dropdown, just wrap the dropdown menu within the class .dropdown.

Bootstrap - Button Groups

Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place items like alignment buttons together. You can add on optional JavaScript radio and checkbox style behavior with Bootstrap Button Plugin.

Bootstrap - Button Dropdowns

This chapter will discuss about how to add dropdown menu to buttons using Bootstrap classes. To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group. You can also use <span class = "caret"></span> to act as an indicator that the button is a dropdown.

Bootstrap - Input Groups

This chapter explains about one more feature Bootstrap supports, the Input Groups. Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs.

Bootstrap - Navigation Elements

Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style.

Bootstrap - Navbar

The navbar is one of the prominent features of Bootstrap sites. Navbars are responsive 'meta' components that serve as navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling for site names and basic navigation.

Bootstrap - Breadcrumb

Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within a navigational hierarchy.

Bootstrap - Pagination

This chapter discusses about the pagination feature that Bootstrap supports. Pagination, an unordered list is handled by Bootstrap like a lot of other interface elements.

Bootstrap - Labels

This chapter covers Bootstrap labels. Labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels as shown in the following example −

Bootstrap - Badges

This chapter will discuss about Bootstrap badges. Badges are similar to labels; the primary difference is that the corners are more rounded.
Badges are mainly used to highlight new or unread items. To use badges just add <span class = "badge"> to links, Bootstrap navs, and more.

Bootstrap - Jumbotron

This chapter will discuss one more feature that Bootstrap supports, the Jumbotron. As the name suggest this component can optionally increase the size of headings and add a lot of margin for landing page content. To use the Jumbotron −

Bootstrap - Page Header

The page header is a nice little feature to add appropriate spacing around the headings on a page. This is particularly helpful on a web page where you may have several post titles and need a way to add distinction to each of them.

Bootstrap - Thumbnails

This chapter discusses about Bootstrap thumbnails. A lot of sites need a way to lay out images, videos, text, etc, in a grid, and Bootstrap has an easy way to do this with thumbnails. To create thumbnails using Bootstrap −

Bootstrap - Alerts

This chapter will discuss about alerts and the classes Bootstrap provides for alerts. Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.
You can add an optional close icon to alert. For inline dismissal use the Alerts jQuery plugin.

Bootstrap - Progress Bars

This chapter discusses about Bootstrap progress bars. The purpose of progress bars is to show that assets are loading, in progress, or that there is action taking place regarding elements on the page.

Bootstrap - Media Object

This chapter discusses about Media object. These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content. The goal of the media object is to make the code for developing these blocks of information drastically shorter.

Bootstrap - List Group

The purpose of list group component is to render complex and customized content in lists. To get a basic list group −
  • Add the class .list-group to element <ul>.
  • Add class .list-group-item to <li>.

Bootstrap - Panels

This chapter will discuss about Bootstrap panels. Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element as shown in the following example −

Bootstrap - Wells

A well is a container in <div> that causes the content to appear sunken or an inset effect on the page. To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well. The following example shows a default well −
<div class = "well">Hi, am in well !!</div>

Bootstrap - Plugins Overview

The components discussed in the previous chapters under Layout Components are just the beginning. Bootstrap comes bundled with 12 jQuery plugins that extend the features and can add more interaction to your site. To get started with the Bootstrap’s JavaScript plugins, you don’t need to be an advanced JavaScript developer. By utilizing Bootstrap Data API, most of the plugins can be triggered without writing a single line of code.

Bootstrap - Transition Plugin

The transition plugin provides a simple transition effects.
If you want to include this plugin functionality individually, then you will need transition.js once alongside the other JS files. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Bootstrap - Modal Plugin

A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.

Bootstrap - Dropdown Plugin

Using Dropdown plugin you can add dropdown menus to any components like navbars, tabs, pills and buttons.
If you want to include this plugin functionality individually, then you will need dropdown.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Bootstrap - Scroll spy Plugin

The Scroll spy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.

Bootstrap - Tab Plugin

Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, you can easily create a tabbed interface. With this plug-in you can transition through panes of local content in tabs or pills, even via drop down menus.

Bootstrap - Tool tip Plug-in

Tooltips are useful when you need to describe a link. The plugin was inspired by jQuery.tipsy plugin written by Jason Frame. Tooltips have since been updated to work without images, animate with a CSS animation, and data-attributes for local title storage.

Bootstrap - Popover Plugin

The popover is similar to tooltip, offering an extended view complete with a heading. For the popover to activate, a user just needs to hover the cursor over the element. The content of the popover can be populated entirely using the Bootstrap Data API. This method requires a tooltip.

Bootstrap - Alert Plugin

Alert messages are mostly used to display information such as warning or confirmation messages to the end users. Using alert message plugin you can add dismiss functionality to all alert messages.

Bootstrap - Button Plugin

Buttons were explained in chapter Bootstrap Buttons. With this plugin you can add in some interaction such as control button states or create groups of buttons for more components like toolbars.

Bootstrap - Collapse Plugin

The collapse plugin makes it easy to make collapsing divisions of the page. Whether you use it to build an accordion navigation or content boxes, it allows for a lot of content options.

Bootstrap - Carousel Plugin

The Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition to being responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content that you might want.

Bootstrap - Affix Plugin

The affix plugin allows a <div> to become affixed to a location on the page. You can also toggle it's pinning on and off using this plugin. A common example of this are social icons. They will start in a location, but as the page hits a certain mark, the <div> will be locked in place and will stop scrolling with the rest of the page.

Bootstrap - Grid Demo

What is a Grid?

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

Bootstrap - Table Demo

Bootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap are −
Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns.

Bootstrap - Form Demo

Form Layout

Bootstrap provides you with following types of form layouts −
  • Vertical (default) form
  • In-line form
  • Horizontal form

Bootstrap - Buttons Demo

Bootstrap provides some options to style buttons, which are summarized in the following table −
Class Description
btn Default/ Standard button.
btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.
btn-success Indicates a successful or positive action.

Bootstrap - Images Demo

Bootstrap provides three classes that can be used to apply some simple styles to images −
  • .img-rounded − adds border-radius:6px to give the image rounded corners.
  • .img-circle − makes the entire image round by adding border-radius:500px.
  • .img-thumbnail − adds a bit of padding and a gray border:

Bootstrap - Responsive Demo

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.

Bootstrap - Navigation Demo

Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share mark up and states. Swap modifier classes to switch between each style.

Bootstrap - Blog Demo

Bootstrap provides a few different options for styling Blog's. Some of blog elements are as Comment box,blog post,blog footer etc..

Bootstrap - Material Design Demo

What is a Material Design

Material design is a comprehensive guide for visual, motion, and interaction design across platforms

Bootstrap - Slider Demo

Bootstrap provides a few different options for styling Navigation slider. Some of examples are as shown below −
Example Description Download Link
Slide menu on over This example indicates about Slider Menu structure in Bootstrap

Bootstrap - Time line Demo

Bootstrap provides a few different options for styling Time line.Some of example as shown below −
Example Description Download Link
Timeline Demo This example indicates about Time line structure in Bootstrap

Bootstrap - Alert Demo

Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions. Some of alert example as shown below −

Bootstrap - Admin Interface Demo

Bootstrap provides a few different options for styling admin interface. Some of admin interfaces as shown below −

Bootstrap - Ajax Demo

Ajax is used to communicate with web pages and web servers. Some of examples which are based on ajax and bootstrap as shown below −

Bootstrap - Tabbed Slider Demo

Bootstrap provides a few different options for slider. Tabbed slider as shown below −
Example Description Download Link
Tabbed slider This example indicates about Tabbed Slider in Bootstrap Download

Bootstrap - Caption Demo

Bootstrap provides a few different options for captions. Thumbnail Caption Hover Effect as shown below −
Example Description Download Link
Caption Hover This example indicates about Caption on images in Bootstrap Download

Bootstrap - Map Demo

Bootstrap provides a few different options for map. sample example of map is as shown below −
Example Description Download Link
Maps This example indicates about Map in Bootstrap Download

Bootstrap - Calendar Demo

Bootstrap provides a few different options for calendars. sample example of calendar is as shown below −
Example Description Download Link
Responsive Date Paginator This example indicates about calendar in Bootstrap

Bootstrap - Social Icons Demo

Bootstrap provides a few different options for Social icons. sample examples of Social icons are as shown below −
Example Description Download Link
Spinning Social Icons This example indicates about Spinning Social Icons structure in Bootstrap

Bootstrap - Icons Demo

Bootstrap provides a few different options for icons as fonts. sample examples of icons are as shown below −
Example Description Download Link
Round Icon Badges This example indicates about Round Icon Badges in Bootstrap

Bootstrap - Featured Demo

Bootstrap provides a few different options for styling Bootstrap Elements.Some of bootstrap elements as shown below −
Example Description Download Link
Material Design Switch This example indicates about Material Design Switch structure in Bootstrap

Bootstrap - Questions and Answers

Bootstrap Questions and Answers has been designed with a special intention of helping students and professionals preparing for various Certification Exams and Job Interviews. This section provides a useful collection of sample Interview Questions and Multiple Choice Questions (MCQs) and their answers with appropriate explanations.

Bootstrap - Quick Guide

Bootstrap - Overview

What is Twitter Bootstrap?

Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.

Bootstrap - Useful Resources

The following resources contain additional information on Bootstrap. Please use them to get more in-depth knowledge on this topic.

Discuss Bootstrap

Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.


BackboneJS - Overview

BackboneJS is a lightweight JavaScript library that allows to develop and structure the client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM into views and bind these two using events.

BackboneJS - Environment Setup

BackboneJS is very easy to setup and work. This chapter will discuss the download and setup of the BackboneJS Library.
BackboneJS can be used in the following two ways −

BackboneJS - Applications

The BackboneJS gives a structure to the web applications that allows to separate business logic and user interface logic. In this chapter, we are going to discuss the architectural style of the BackboneJS application for implementing user interfaces. The following diagram shows the architecture of BackboneJS −

BackboneJS - Events

Events are capable of binding objects and trigger custom events i.e. you can bind the custom events by using the desired name of our choice.
The following table lists down all the methods which you can use to manipulate the BackboneJS-Events −

BackboneJS - Model

Models contain dynamic data and its logic. Logic such as conversions, validations, computed properties and access control fall under the Model category. As it contains all the application data, a model is also called as the heart of JavaScript application.

BackboneJS - Collection

Collections are ordered sets of Models. We just need to extend the backbone's collection class to create our own collection. Any event that is triggered on a model in a collection will also be triggered on the collection directly. This allows you to listen for changes to specific attributes in any model in a collection.

BackboneJS - Router

Router is used for routing the client side applications and defines the URL representation of the application's object. A router is required when web applications provide linkable, bookmarkable and shareable URL's for important locations in the app.

BackboneJS - History

It keeps a track of the history, matches the appropriate route, fires callbacks to handle events and enables the routing in the application.

BackboneJS - Sync

It is used to persist the state of the model to the server.

The following table lists down the methods which can be used to manipulate the BackboneJS-Sync

BackboneJS - View

Views are used to reflect "how your data model looks like". They represent the model's data to the user. They provide the idea behind the presentation of the model's data to the user. It handles the user input events, binds events and methods, renders model or collection and interacts with the user.

BackboneJS - Utility

The utility class defines a set of methods used for implementing the backbone utility.
The following table lists down the methods which you can use to manipulate the BackboneJS-Utility

BackboneJS - Quick Guide

BackboneJS - Overview

BackboneJS is a lightweight JavaScript library that allows to develop and structure the client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM into views and bind these two using events.

BackboneJS - Useful Resources

The following resources contain additional information on BackboneJS. Please use them to get more in-depth knowledge on this.

Discuss BackboneJS

BackboneJS is a light weight JavaScript library that allows to develop and structure client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM (Document Object Model) into views and bind these two using events.

Aurelia - Overview

The best definition of the framework can be found in Aurelia official docs −
Well, it's actually simple. Aurelia is just JavaScript. However, it's not yesterday's JavaScript, but the JavaScript of tomorrow. By using modern tooling we've been able to write Aurelia from the ground up in ECMAScript 2016. This means we have native modules, classes, decorators and more at our disposal...and you have them too.

Aurelia - Environment Setup

In this chapter we will show you how to get started with Aurelia framework. Before we do that, you will need NodeJS installed on your system.
SN Software Description
1 NodeJS and NPM NodeJS is the platform needed for Aurelia development. Checkout our NodeJS Environment Setup.

Aurelia - First Application

In this chapter we will explain Aurelia starting app that we created in our last chapter. We will also guide you through the folder structure so you can grasp the core concepts behind Aurelia framework.

Aurelia - Components

Components are main building blocks of Aurelia framework. This chapter will show you how to create simple components.

Aurelia - Component Lifecycle

Aurelia use component lifecycle methods to allow us manipulating component lificycle. In this chapter we will show you those methods and explain component lifecycle.

Aurelia - Custom Elements

Aurelia offers a way to add components dynamically. You can reuse single component on different pars of your app without need for including HTML multiple times. This chapter will explain how to achieve this.

Aurelia - Dependency Injections

In this chapter we will show you how to use Aurelia dependency injection library.
First we need to create new file dependency-test.js inside src folder. In this file, we will create simple class DependencyTest. This class will be later injected as a dependency.

Aurelia - Configuration

In this chapter we will show you how to configure Aurelia framework for your needs. Sometimes you will need to set initial configuration or run some code before the app is rendered to the users.

Aurelia - Plugins

When you start building your app, most of the time you will want to use some additional plugins. This tutorial will explain how to use plugins in Aurelia framework.

Aurelia - Data Binding

Aurelia has its own data-binding system. In this tutorial we will show you how to bind data with Aurelia, and also explain different binding mechanics.

Aurelia - Binding Behavior

In this chapter we will show you how to use behaviors. You can think of binding behavior as a filter that can change binding data and display it in different format.

Aurelia - Converters

If you need to convert some values in Aurelia app, you can use converters instead of manually converting values to desired format.

Aurelia - Events

In this chapter we will show you Aurelia events.

Event Delegate

Even delegation is useful concept where event handler is attached to one top level element instead of multiple elements on the DOM. This will improve application memory efficiency and should be used whenever possible.

Aurelia - Event Aggregator

Event aggregator should be used when your events needs to be attached to more listeners or when you need to observe some functionality of your app and wait for the data update. In this chapter we will show you simple example.

Aurelia - Forms

In this chapter we will show you who to use forms in Aurelia framework.

Text Input

First we will see how to submit an input form. The view will have two input forms for username and password. We will use value.bind for data binding.

Aurelia - HTTP

In this chapter we will show you how to work with HTTP requests in Aurelia framework.

Step 1 - Create View

Let's create four buttons that will be used for sending requests to our API.

Aurelia - Refs

In this short chapter we will show you simple example of Aurelia refs. We can use it to create a reference to a particular object. We can create a reference to elements or attributes, as seen in the following table.

Aurelia - Routing

Routing is important part of every application. In this chapter we will show you how to use router in Aurelia framework.

Step 1 - Create Pages

We already created components folder in one of the former tutorials. If you don't have it created already, you should place it inside src folder.

Aurelia - History

In this chapter we will show you how to use aurelia-history plugin.

Step 1 - Install Plugin

This plugin is already available as a part of the standard configuration. If you have set aurelia.use.standardConfiguration() as a part of a manual configuration you are ready to go.

Aurelia - Animations

In this chapter we will explain how to use CSS animations in Aurelia framework.

Step 1 - View

Our view will have one element that will be animated and a button to trigger animateElement() function.

Aurelia - Dialog

Aurelia offers a way to implement dialog (modal) window. In this chapter we will show you how to use it.

Step 1 - Install Dialog Plugin

Dialog plugin can be installed from command prompt window.
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog
For this plugin to work, we need to use manual bootstrapping. We covered this in our configuration chapter. Inside main.js file we need to add the aurelia-dialog plugin.

Aurelia - Localization

Aurelia offers i18n plugin. In this chapter we will show you how to localize your app using this plugin.

Step 1 - Install Plugin

Open command prompt window and run the following code to install i18n plugin.
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n
We also need to install backend plugin.
C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

Aurelia - Tools

In this chapter we will show you how to set up and use aurelia-tools.

Step 1 - Root Folder

Let's create root folder where we will keep all Aurelia apps.
C:\Users\username\Desktop>mkdir aurelia-projects

Aurelia - Bundling

Step 1 - Installing Prerequisites

We can install aurelia-bundler by running the following command in command prompt
C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev
If you don't have gulp installed, you can install it by running this code −

Aurelia - Debugging

In this chapter we will show you how to add Aurelia context debugger as a chrome extension.

NOTE

Before we are able to add the extension, we need to have aurelia-tools files. If you don't have it, you can check our Aurelia - Tools chapter.

Aurelia - Community

Community is one of the most important factors to consider when choosing framework. Aurelia offers fantastic support for its customers. In this chapter we will show you where you can get help when you are stuck.

Aurelia - Best Practices

Aurelia is new framework so the best practices are yet to be established. In this chapter we give you some useful guidelines you can follow.

Starting New Project

Aurelia offers aurelia-skeletons. There are couple of skeletons to choose from. The team behind Aurelia is actively supporting the skeletons, and they are always up to date with the newest version of the framework.