Tutorials Free Related To I.T Fields.

PhoneGap Very use full future knowledge and past knowledge

2015-03-25T15:41:00.000+05:00

Some short History of PhoneGap

PhoneGap created by nitobi in 2009,
nitobi bought by adobe in 2011,
PhoneGapnDonated to Apache Foundation in 2011,
PhoneGap renamed Cordova in 2011

What is PhoneGap:

PhoneGap is an open source programming language for mobile application, it is cross plat form for develop mobile application, which is use to html5, css3, JavaScript, it’s support a browser base scripting language for make a functionality like JavaScript and we will make a very interactive U.I with html5 and css3 now a days have been come very use full and very fast frame works for PhoneGap like jQuery Mobile, Angularjs With ionic frame work famous frame work etc…,

PhoneGap is a first mobile cross platform work to use full open source , it’s support a very lite IDEs for coding purpose like note pade++, Sublime text, I will recommend, you will use sublime text 3 Because you will install packages PhoneGap. My thinking as a developer PhoneGap future is very good and excellent because we will make a big mobile application in a very short time and very use full and interactive application with PhoneGap. If you want to work in PhoneGap, once you should know about basic Html5, css3, JavaScript after you shout know nodejs npm then also know some use full frame works like jquery moble and angularjs. PhoneGap also provide you will build and debug your application online through phonegap.build, it’s give us a complete online cross plat form build just we will do our application www folder make a zip file and upload the build.phonegap.com then we will get .apk,. xap,. ipa application and install our phone and enjoy it.

Conclusion

I hope it was very help full for you and easy to understand. If you like my tutorial please gives me your feedback through google+ comments and facebook comments. And don’t forget to share this wonder full knowledge of everyone.

What is view controllers and scope in angularjs

2015-01-26T19:56:00.000+05:00

View Controllers And Scope

Today we learn about views, controllers and scope in angularjs. If you don't know about directive, data binding, filters in angularjs you will must read this tutorial, then you will learn this tutorial otherwise you will can't understand this tutorial. Now lets start first we will discuses about view. We are use view when we will be work on a professional way with angularjs, in previous tutorial you learn Directive, Data Bind, Filter this is called also view But we don’t want to put all of our logic into the View because it’s not very maintainable or testable or all those types of things.

Now We Create A View

First you will make a one div and make a view and give a controller name within div tag data-ng-controller then show the list with data-ng-repeat directive

View contorller and scope

No We Create A Controller

You will make a one function and pass a $scope parameter then you will make a one Array and join the $scope parammter and then you will make a objects within array. Now your controller is ready.

View contorller and scope

Full Example

Now you will see the full example and understand.

View contorller and scope

Check Now Example In Your Browser

Now you will see the full source code. You will copy the all code and paste in you favorite text editor like Sublime Text 3 and save it the name of file is angularExampe.html. Now you will see the result

Out Put

Out put

I hope this tutorial was very help full for you and easy to understand. If you like this tutorial please give me your feedback and share it every one.

What is directives filters data binding in angularjs

2015-01-23T18:39:00.000+05:00

What Is Directives?

Directives is use in HTML tags you are seeing ng-app, ng-model, ng-bind that is an all Angular directive. I will define some use full directive.

ng-app initialize the angularjs app it's place on tag. ng-app tell you this is angularjs app.
ng-init This directive use to initialize the application data.
ng-model this directive use to binds value of the Html controls like (input, select, textarea) etc.

Directive Expressions and data bind

What Is Expression?

Expressions are really cool because if I wanted to put “2 + 2” and try to write out the result I could do that. You can’t put conditional logic in here because you shouldn’t be putting that type of conditional logic in your views.

What Is Data Binding?

Data binding is use to any value to synchronize and show the result with out refreshing the web page. For example if you want to show your name when you write in text box just you make the ng-model="nameModel" within input text box tag then you will bind the tag like ng-bind="nameModel" within p paragraph tag. We are also use data bind through expression.

What Is Filters?

Now we learn how to make filters in angularjs first we will be made one array and we will be made two objects within array now lets start.

Example

Now add the filters

Example two

What is ng-repead Directive?

We are using another directive ng-repeate, this directive is use to get the values from array and objects. You are seeing nam in names In this case “nam” is not the same thing as I just demonstrated: “nam” is just a variable. If i put “foo” here then i would bind to “foo” here.

Out put

You will must read 4th tutorial What is controller, View, Scope in AngularJS

what is e-commerce define full with types free

2015-01-21T20:54:00.002+05:00

E-commerce

In it's simple list from e-commerce is the buying and selling products and services by businesses and customer over the internet.

E-Commerce

There are four types of e-commerce.

Business To Business (B2B)
Business To Customer (B2c)
Business To Government (B2G)
Customer To Customer (C2C)

Business To Business (B2B)

Business to business (B2B) is simply define as e-commerce between companies about 80% of e-commerce is of this type example. intel(Microprocessor selling) to Dell and Compaq and other companies.

Business To Customer (B2C)

Business to customer (B2B) as e-commerce between companies and customer involves customer gathering information purchasing physical goods or receiving product over and electronics network example dell selling me a laptop.

Business To Government (B2G)

Business to government (B2G) is generally define as commerce between companies and the public sector. If refers to the use of the internet for public procurement licensing procedures and other government related operations
Example:
Businesses pay taxes, file reports or sale goods and services agencies.

Customer To Customer (C2C)

Customer to customer (C2C) is simply commerce between private individual and customer example a asif buying a mobile form nadeen

How to use angularjs library with download

2015-01-20T20:54:00.000+05:00

How to use angularjs library and download?
First you will get knowledge about angularjs like introduction what is angularjs and you will read

Angularjs The Challenge With SPAs

after you will get started with AngularJS just head over to http://angularjs.org

Angularjs.org

You’ll notice here that I can go to GitHub and I can actually get to all of the scripts there, or I can just

hit “Download” which is very simple.

Angularjs Download

Then we can go with the minified, uncompressed or zipped version.
You also have access to a CDN. The CDN will give you access around the world to regional data
centres that in this case, Google host.
Then we also potentially get some caching benefits, some parallelism benefits of browsers being
able to load different scripts because they’re different domains. There’s actually some good benefits
by going with the CDN if you want it.
But for now I’m just going to go for latest and minified and download it. This is just going to give me
this angular.min.js that you’ll see.

Downloading Start

Example

Angularjs Example

Conclusion

We have successfully understand angularjs how it's work with screen shoot example. I hope it was helpful and easy to understand don't forget to share and give your feedback on this tutorial.

Angularjs The Challenge With SPAs

2015-01-20T20:16:00.000+05:00

The chanlange with SPAs

If you don't know whats is angularjs please first you will see this tutorial. There are some chanlangies for SPA listed below.

Angularjs Logo

DOM Manipulation
Routing
Data Binding
History
Catching
Ajax/Promises
Module Loading
Object Moduling
View Loading

AngularJS is one core library.

I really like that concept because I don’t have to rely on a million other scripts and worrying about

those different script versions playing nicely into the future.

Now what are some of the features?

Data Binding
MVC
Routing
Testing
jQlite
Template
History
Factories
View Model
Controllers
Directives
Services
Dependency Injection
Validation

Conclusion

I hope this tutorial was helpful. If you like this tutorial don't forget share and give your feedback.
You will must read 3rd tutorial Directive, Data Binding, Expression, Filters, Repeat in AngularJS

How to install package control in sublime text

2015-01-19T23:52:00.000+05:00

INSTALL MANY USE FULL PACKAGE CONTROL

How to install package control in sublime text

Today we learn how to install packages in sublime text 3 or 2. First if you have no sublime text 3 then you will download here and install it with full register fee. Now we are going to how to install packages , you will open the sublime text and press the short cut key ctrl+' or you will go on top menu bar select View > Show Console then you will see the console on the bottom.

Show Console In Sublime Text

Now you will go on this web site copy the all code and past with in bottom console area then you will press enter, now you have done install package control.

Sublime Text Console Are Picture

Now you will install many useful packages and many open source programming languages like Html5 Snippet, Css3, JavaScript Snippet, Bootstrap3, jQuery, Angularjs, Php, git etc..., that's all snippet to install and you will enjoy all in one. Now i will tell you how to install these all snippet you will press CTRL+SHIFT+P or on top menu bar and you will select the Preferences > Package Control then show the package control text box you will write with in text box package control:insall package and press enter just you will wait 5 or 10 second, now you will see the all packages like html, php, jQuery, Angularjs etc, just as you like write the package name now for example you will write html you have installed html snippets package successfully now you can see the result on your console area.

Install Package In Sublime Text 3

Conclusion

I hope you will understand easily, and i hope this tutorial was help full for you, if you like this tutorial share with every one and don't forget to give me your feedback if you have any problem please comment here.

Use full shortcut keys for sublime text 3

2015-01-17T00:43:00.000+05:00

Amazing shortcut keys for sublime text 3

Today i define how to use many shortcut keys in sublime text 3. When you will doing your programming skills when you will need these all shortcut keys and these shortcut keys very helpful for you. These shortcut keys for only windows user. If you have no sublime text 3 you will download here free with registration.

ctrl + shift + p

This shortcut key is use to set snippets, set syntax for example you will wrote hmtl now you will see html structure is created. This shortcut key also use for handle menu bar option control just you will enter the option name like you will wrote just save all your document will be saved.

ctrl + p
This shortcut key is use to open any file of you project. Like this you will wrote index.php you will see index.php file open.

ctrl + r
ctrl + shift + r
These two shortcut keys are use to do same work just different between crtl+r and crtl+shift+r. Search content on single file rather then ctrl+shift+r search content all files in our project.

ctrl + d
ctrl + mouse-click, mouse-click, mouse-click…
If you want to select same word just press crtl+d. For example "imran" is a word and "imran" word is use to multiple time in you project now you will press him ctrl+d, you will see all "imran" word is selected.

shift + F11
You will see your code full screen on you computer screen.

ctrl + k + b
This shortcut key is use to sublime text 3 project side bar panel hide or show.
ctrl + /
This shortcut key is use to comment your code.

ctrl + shift + d
This shortcut key is use to duplicate any text.

alt + shift + 1 to 4
alt + shift + 5
It's shortcut key is very wonderful. You will opened multiple file with in you project.

ctrl + G
This shortcut key is use to go any line fast. Just you will wrote the line number.

Conclusion

I hope this tutorial was help full for you. If you like this tutorial don't forget to share with every one and give me you feedback.

Sublime text 3 build 3065 free registration

2015-01-03T17:27:00.000+05:00

Sublime Text 3

You will download here and click on SKIP ADD then you will download him then install sublime text 3 in your computer. Then i will tell you how to register free sublime text 3 absolutely free. Now i am starting to give you some information about sublime text 3. It’s very lite to perform develop web application and hybrid application for mobile apps. I recommend you to use sublime text 3 it’s very help full for you. You will install many packages, and you will use very fast snippets to any open source programming language. Sublime text 3 are also giving you many use full shortcut keys.

Sublime Text Logo

How to register sublime text 3. This tips for window x86

Step 1: First you will go on sublime text 3 installation directory by default my sublime text 3 directory is C:\Program Files\Sublime Text 3.

Step 2: Now you will cut the sublime_text.exe and paste it on your computer desktop.

sublime_text.exe file icon

Step 3: You will download here hxDen software click SKIP ADD and double click on hxDen.exe. If you are using window 7 you will run as administrator hxDen.exe.

HxDen Software Icon

Step 4: Now you will go in hxDen menu file > open and go on desktop directory and open the sublime_text.exe with in HexDen software.

HexDen Open Option

Step 5: Press Ctrl+R show the popup now you will see three option and put these all values just you will do copy paste:

Search and replace with and change datatype into Hex-values

1-Search for : 76 6E 02 00 83 C4 10 F7 D8 1A C0 FE C0 8D 4D D8

2-Replace with : 76 6E 02 00 83 C4 10 90 90 1A C0 FE C0 8D 4D D8

4-Datatype : Hex-values

Look like this when your content is match

Step 6: Save it press Ctrl+S now you will cut from your desktop sublime_text.exe and past your sublime text 3 installation directory my computer by default directory is C:\Program Files\Sublime Text 3.

Note:

If you will see this type of file sublime_text.exe.bak on your desktop you don't worry delete it.

Delete this file

How to register sublime text 3. This tips for window x64

Step 1: First you will go on sublime text 3 installation directory by default my sublime text 3 directory is C:\Program Files\Sublime Text 3.

Step 2: Now you will cut the sublime_text.exe and paste it on your computer desktop.

Step 3: You will download here hxDen software click SKIP ADD and double click on hxDen.exe. If you are using window 7 you will run as administrator hxDen.exe.

Step 4: Now you will go in hxDen menu file > open and go on desktop directory and open the sublime_text.exe with in HexDen software

Step 5: Press Ctrl+R show the popup now you will see three option and put these values:

1-Search for : 4D E7 E8 0D 93 03 00 85 C0 0F 94 C0 88 05 46 05

2-Replace with : 4D E7 E8 0D 93 03 00 3B C0 0F 94 C0 88 05 46 05

3-Datatype : Hex-values

Step 6: Save it press Ctrl+S now you will cut from your desktop sublime_text.exe and past your sublime text 3 installation directory my computer by default directory is C:\Program Files\Sublime Text 3.

Conclusion

We have successfully understand how to register sublime text 3 for windows x86 and windows x64. I hope it was helpful and easy to understand don't forget to share and give your feedback on this tutorial.
You will must see this tutorial amazing shortcut keys in sublime text.

style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-5262154641986114"
data-ad-slot="8242360384">

Angularjs full course step by step get started.

2015-01-03T10:40:00.002+05:00

Angularjs course all in one for beginners easy to learn

#1 Module 1: Introduction And Getting Started

#1 The Challenge With SPAs

#2 AngularJS.org And Download

#2 Module 2: Directives, Filters, Data Binding And ng-repeat With Examples.

#3 Module 3: Views, Controllers and Scope Creating a View and Controller

#4 Module 4: Modules, Routes and Factories

#1 Modules are Containers

#2 Creating a Module

#3 Creating a Controller in a Module

#4 The Role of Routes

#5 Defining Routes

#6 Defining Routes Demo

#7 Using Factories and Services

#8 The Role of the Factory

#9 Factory Demo

#10 Wrap-Up Demo: Pulling It All Together

Angularjs information for beginners.

2015-01-03T10:28:00.000+05:00

2. Why to use AngularJS?

There are following reasons to choose AngularJS as a web development framework:

1. It is based on MVC pattern which helps you to organize your web apps or web application properly.

2. It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions

in order to define very powerful templates.

3. It also allows you to create your own directives, making reusable components that fill your needs and

abstract your DOM manipulation logic.

4. It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models)

seamlessly. In this way any change in model will update the view and vice versa without any DOM

manipulation or event handling.

5. It encapsulates the behaviour of your application in controllers which are instantiated with the help of

dependency injection.

6. It supports services that can be injected into your controllers to use some utility code to fulfil your need.

For example, it provides $http service to communicate with REST service.

7. It supports dependency injection which helps you to test your angular app code very easily.

8. Also, AngularJS is mature community to help you. It has widely support over the internet.

Introduction of Angularjs

2015-01-02T03:04:00.001+05:00

Introduction To Angularjs

Angularjs Logo

What is AngularJS?

AngularJS is a JavaScript framework, it has been made by google, it is super fast JavaScript framework. AngularJS has changed the way to web development. this is not dependent on jQuery to perform its operations. AngularJs also use in PhoneGap mobile apps. We can make the real time application in AngularJS.
You will must read 2nd tutorial the chanlange with SPAs

The chanlange with SPAs

Introduction to advance css3

2015-01-02T02:43:00.000+05:00

Introduction:

To day we will learn css3 (Cascading Style Sheets). You already know that simple css but we are discussed about advance css3. I recommend first you will have a basic understanding of the Html then you will learn. Css3 introduced many new features like Selectors, Box Model, Backgrounds and Borders, Image Values and Replaced Content, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout, User Interface etc. we have three different ways to use css3.

Internal css
Inline css
External css

1. Internal css:

First we are discussed internal css. Internal css use with in head tag with style tag.

For example:

<!DOCTYPE html>

<html>

<head>

<style>

p{color:red; font-size: 20px;}

</style>

</head>

<body>

IRtutor.blogspot.com.

</body>

</html>

2. Inline css:

Inline css use to when we want to use css line by line for example if we want to give some style in heading tag, first we will give the style attribute with in heading tag then we will give the style property for example style=”color: blue;”, “color” is a property and “blue” is a value of color.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 style="color: blue;">IRtutor.blogspot.com.</h1>

</body>

</html>

3. External css:

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file.

Each page must include a link to the style sheet with the tag. The tag goes inside the head section:

<head>

</head>

Conclusion:

This was classed one. Today we have successfully understand to basics Css3. End of Class one.

How to make stylish div in very short way

2014-12-22T21:39:00.001+05:00

Stylish div box

How to make Stylish div in very short time

Today we will learn how to make interactive box with div through html and css just you add simple css with in div tag. This box you will can use any where in your web when you will be developing web. It will very use full and help full for you. Now we getting start how to create interactive box. Now open your favourite editer like sumlime text 3 and make a structure of html and make simple div and put the simple css with in div tag.

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<div style="width: 300px; height: 300px; border: 1px solid; background-color: #9E64E1;">
 <h1 align="center">Stylish Div Box</h1>

</div>
</body>
</html>

Stylish Div Box

Now you can want to add every things in this box like Fourm, Quotes, Buttons etc place you want to any where.

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>

<div style="width: 300px; height: 300px; border: 1px solid; background-color: #9E64E1;">
 
Example <input type="text" /> <br>
Example <input type="text" /> <br>
Example <input type="text" /> <br>
<button>Button</button>
</div>
</body>
</html>

Example
Example
Example

nav bar in bootstrap 3 how you can apply own style

2014-12-19T16:24:00.000+05:00

IRtutor.blogspot.com Example of Twitter Bootstrap 3 Static Navbar Extended

Interactive nav bar in bootstrap 3 how you can apply own style part 1

Today we learn how to can apply own style in bootstrap 3 nav bar

First you will add the bootstrap 3 library place in head tag.
Then add your own css in head tag.

<!-- HTML generated using hilite.me

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Now you will Add the Css with in head tag.

<style type="text/css">
   
    .mynav{
        
     background-image: linear-gradient(#54B4EB, #2FA4E7 60%, #1D9CE5);
     background-repeat: no-repeat;
     border-bottom: 1px solid #178ACC;
     box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
     border-radius: 0px;
}

.navbar-default {
     background-color: #7C63FA;
     border-color: #000000;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus ,
.navbar-default .navbar-nav > li > a {
     color: #FFF;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
     color: #FFF;
     background-color: #948BBF;
}
  
</style>

You will add nav bar code with in body tag.

 <nav role="navigation" class="navbar navbar-default">
       
        <div class="navbar-header myvav">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <!-- Collection of nav links, forms, and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Drafts</a></li>
                        <li><a href="#">Sent Items</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Trash</a></li>
                    </ul>
                </li>
            </ul>
            <form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Search" class="form-control">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>

Now your interactive nav bar is ready.

Just you will add css and you will make interactive nav bars part2 please wait 5sec and skip add
-->

Passport size picture in a professional way Part 2

2014-12-05T15:41:00.000+05:00

Passport size picture in a professional way Part 2

Now add a picture you croped in previous part and Press Ctrl+T and adjust the picture in roller of box 2 by 2.
Then Select Move Tool shortcut key is "V" and press Ctrl+Alt+drag the picture through mouse in all ruller boxes while presing the Ctrl+Alt button.
See below screenshot

we have ready the pasport size pictures

Learn more watch part 1 and wait 5 sec "SKIP ADD"

If you have any problem so please comment below.

Passport size picture in a professional way part 1

2014-12-05T15:27:00.001+05:00

Passport size picture in a professional way Part 1

In this tutorial we will learn how to make professional passport size picture these are very easy steps to learn. Now open the Adobe photoshop. And do theses settings

Press Ctrl+N.
Set the layer size to 8 by 10.
press Ctrl+R then it will show the roller on top right side.
you will set the roller 0 by 0.
If you have not set a roller you can see the screen shot and you will be able to set the roller automatically.

Now settings are complete we can go on to the next step

Now select the move tool shortcut key is "V".
Drag the roller 2 by 2 top and right side.

Add you picture in photoshop
Then select the crop tool shortcut key is "C".
Crop you picture.

Learn more watch part 2 and wait 5 sec "SKIP ADD"

If you have any problem please comment below.

Add icons in bootstrap 3 button very simple steps

2014-12-03T03:08:00.001+05:00

How To Add Icon In Bootstrap 3 Buttons.

In previous tutorial easy to learn how to create interactive buttons in bootstrap 3 now we learn how to add icons in bootstrap 3 button. Let's start now.

<a href="#" class="btn btn-default"><span class="glyphicon glyphicon-adjust"></span>IRtutor.blogspot.com</a>

Show Preview

IRtutor.blogspot.com

If you want to show icon on right side it's very simple to move span on right side you will see icon shows on right side.

<a href="#" class="btn btn-default">IRtutor.blogspot.com<span class="glyphicon glyphicon-adjust"></span></a>

Show Preview

IRtutor.blogspot.com

If you want to change icon as you like you will change icons one by one use these span and clases.

Bootstrap3 easy to learn how to create interactive buttons step by step.

2014-12-02T04:45:00.001+05:00

Simple Html structure

Helo Friends! How Are You? I Hope You are All Fine And Enjoy Our Tutorials. We will Start, How To Create Bootstrap 3 Interactive Buttons.

First open your favourite text editor like Notepade++, Sublime text3 etc. And create a simple html structure like this. If you want to this code copy and past your text editer.

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>

Now We Make Simple Html Button Then Apply Bootstrap 3

You are Thinking What is this? I already know About This ok ok i Know That, but some people don't Know about this that's why i will start from initial level. Now add bootstrap library. If you don't know how to add bootstrap library to learn This our tutorial complete guide here. "CLICK ON THIS LINK AND SKIP AD"

  <!DOCTYPE html>
<html>
  <head>
    <title>IRtutor.blogspot.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    
    <a href="#">IRtutor.blogspot.com</a>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

Now you can see simple html ancher link not a interactive bootstrap 3 button don't worry let's start now bootstrap 3 interactive buttons.

Show Preview

IRtutor.blogspot.com

Now Apply Bootstrap 3 In Ancher Links & Buttons

  <!DOCTYPE html>
<html>
  <head>
    <title>IRtutor.blogspot.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    
     <a href="#" class="btn btn-default">IRtutor.blogspot.com</a>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

<a href="#" class="btn btn-block btn-lg btn-default">IRtutor.blogspot.com</a>

Although you don't know what is 'responsive view' See This Tutorial.

Show Preview

IRtutor.blogspot.com

Add icons in bootstrap 3 button very simple steps

Bootstrap 3 part 2 create awesome Layout responsive view free

2014-12-01T13:40:00.002+05:00

This Tutorial Is Part Two. If You Want To See Part One.

Create Awesome Layout In Bootstrap 3

Open The favorite text editor like notepade++ and paste this code.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive layout free in bootstrap 3</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    
  </head>

  <body>

  <div class="container">
    <nav role="navigation" class="navbar navbar-inverse">
        
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
<div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
<form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Search" class="form-control">
                </div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>
    <div class="row">
        <div class="col-md-3">
<h1>
This is left Side Bar</h1>
</div>
<div class="col-md-6">
<h1>
This is your webside body. Place your any content Here.</h1>
</div>
<div class="col-md-3">
<h1>
Right Side Bar</h1>
</div>
</div>
</div>
<footer class="footer">
      <div class="container">
        <p>
© Copyright 2015 IRtutor</p>
</div>
</footer>
     
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </body>
</html>

Now You Can See Screenshot.

This Tutorial Is Part Two. If You Want To See Part One.

Bootstrap 3 Easy Steps Getting Started part One

2014-12-01T13:35:00.000+05:00

Bootstrap 3 Easy Steps Getting Started part One

This Tutorial Is Part One. If You Want To See Part Two.

What is Bootstrap3?

Bootstrap3 is a free collection of tools for creating websites and web applications.
Bootstrap3 contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components.
Bootstrap3 also contains optional JavaScript extensions.
Bootstrap3 is open source and available on GitHub.

It's Very Important To Know For Bootstrap3

Since Bootstrap3 uses HTML elements and CSS properties that require the use of the HTML5 doctype, include the HTML5 doctype at the beginning of the page, along with the correct character set:

<!DOCTYPE html>

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<meta charset="utf-8" />

Keep in mind that Bootstrap 3 is mobile-first. Mobile-first styles are found throughout the entire Bootstrap3 library instead of in separate files. To ensure proper rendering and touch zooming, also add the viewport meta tag inside the head element: The width=device-width sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 sets the initial zoom level when the page is first loaded by the browser.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Only Online Work Bootstrap3 With CDN Download Link

If you don't want to download and host Bootstrap3 yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provide CDN support for Bootstrap's CSS and JavaScript. Also include jQuery:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Offline Work Bootstrap3 And Download Bootstrap3 Own Computer

If you want to download on own machine and work offline library to follow the very simple way copy the CDN library url see screenshot.

http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

  https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

  http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js

Let's Start Now Final

Open your favorite text editor like notepade++, sublimeText3 and paste this code.

<!DOCTYPE html>
<html>
  <head>
    <title>Easy Steps Getting Started With Bootstrap3</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
    <h1>Hallow IRtutor Welcom my First Bootstrap 3 Web Page.</h1>
    </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Note

You always place any javascript file down ward. And css any file always place at top because css file is very lite to javascript file that's why first load css then load javascript your web site performance will be very Good.

This Tutorial Is Part One. If You Want To See Part Two.

Learn Free Tutorials Easy Steps

2014-11-29T14:36:00.005+05:00

IRtutor Provide A Way To Learn Free IT Education Online. Our Mission Is To Learn IT Education Free With You Very Simple Steps To Follow Our Tutorials. We Will Introduce Many New Technologies And Many Use Full Tutorials.

Tutorials Free Related To I.T Fields.

PhoneGap Very use full future knowledge and past knowledge

Some short History of PhoneGap

What is PhoneGap:

Conclusion

What is view controllers and scope in angularjs

View Controllers And Scope

Now We Create A View

View contorller and scope

No We Create A Controller

Full Example

Check Now Example In Your Browser

Out Put

What is directives filters data binding in angularjs

What Is Directives?

What Is Expression?

What Is Data Binding?

What Is Filters?

What is ng-repead Directive?

what is e-commerce define full with types free

E-commerce

Business To Business (B2B)

Business To Customer (B2C)

Business To Government (B2G)

Customer To Customer (C2C)

How to use angularjs library with download

Angularjs The Challenge With SPAs

Example

Conclusion

Angularjs The Challenge With SPAs

The chanlange with SPAs

Conclusion

How to install package control in sublime text

INSTALL MANY USE FULL PACKAGE CONTROL

Conclusion

Use full shortcut keys for sublime text 3

Amazing shortcut keys for sublime text 3

Conclusion

Sublime text 3 build 3065 free registration

Sublime Text 3

How to register sublime text 3. This tips for window x86

Note:

How to register sublime text 3. This tips for window x64

Conclusion

Angularjs full course step by step get started.

Angularjs course all in one for beginners easy to learn

Contents

#1 Module 1: Introduction And Getting Started

#1 The Challenge With SPAs

#2 AngularJS.org And Download

#2 Module 2: Directives, Filters, Data Binding And ng-repeat With Examples.

#3 Module 3: Views, Controllers and Scope Creating a View and Controller

#4 Module 4: Modules, Routes and Factories

#1 Modules are Containers

#2 Creating a Module

#3 Creating a Controller in a Module

#4 The Role of Routes

#5 Defining Routes

#6 Defining Routes Demo

#7 Using Factories and Services

#8 The Role of the Factory

#9 Factory Demo

#10 Wrap-Up Demo: Pulling It All Together

Angularjs information for beginners.

Introduction of Angularjs

Introduction To Angularjs

What is AngularJS?

Introduction to advance css3

How to make stylish div in very short way

Stylish div box

How to make Stylish div in very short time

Stylish Div Box

nav bar in bootstrap 3 how you can apply own style

Interactive nav bar in bootstrap 3 how you can apply own style part 1

Now you will Add the Css with in head tag.

You will add nav bar code with in body tag.

Now your interactive nav bar is ready.

Passport size picture in a professional way Part 2

Passport size picture in a professional way Part 2

If you have any problem so please comment below.