Tag Archives: html tutorials online

Html Attributes


Html Attributes: Html element’s attribute are used to provide some more information about the element.


This way you can use Attributes Syntax


Note 1 : Attributes are always defined in the start tag of the element.
Note 2 : Single Quote or double Quote any one can be used.
Example :


Lets Understand with very simple examples:

Html Attributes Example : Title

Example









Demo text....Demo text....Demo text....Demo text....Demo text....Demo text....Demo text....Demo text....Demo text....Demo text....Demo text....Demo text....

Try it »

Output :

Html Attributes Example

Html Attributes Example

Attributes Example : href

Output :

jQuery Selectors


jQuery Selectors are used to select the element. jQuery selectors play an important role in jQuery library.


JQuery Selectors

jQuery Seletors are based on such as : Name, Id, Classes and many more…

The very basic selector(Name) example :

jQuery Selctors Example :





 
 
  
	

This id test div one .....and background is added using jquery...

This id test div two.....and background is added using jquery...

Try it »

Main jQuery Selectors

[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No,Selector
1, Name : The example of name tag are

2, Class :The example of class selector is –

Here class selector is “test”.
3, ID : The example of ID selector is –

Here class selector is “MainDiv”
[/table]

More jQuery Selectors

[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No,Selector,Example
1, $(“*”) : Selects all elements in the page. , See Detail & Demo »
2, $(this) :Selects current element.,See Detail & Demo »
3, $(“p.myclass”) : Selects all <p> which have class “myclass”.,See Detail & Demo »
4, $(“ol li:first”) : Selects first <li> element of the <ol>,See Detail & Demo »
5, $(“ol li:last”) : Selects last <li> element of the <ol>,See Detail & Demo »
6, $(“[href]”) : Selects all elements with “href” attributes.,See Detail & Demo »
7, $(“tr : even”) : Selects all even tr elements of the table.,See Detail & Demo »
8, $(“tr : odd”) : Selects all odd tr elements of the table.,See Detail & Demo »
[/table]

Bootstrap Tooltip


Bootstrap tooltips works as small popup. Bootstrap tooltips are used to provide the hint when user hover’s on any link , button or label.

Tooltips becomes important for new visitors by providing them information about the link or button when they hover on them. You can place the tooltop at any position top, left, right or bottom of link. By default the tootltip color is black.


Bootstrap Tooltip Syntax And Example

Required javascript to create tooptips. Here is an example –

Add Js Code to Enable tooltips


Example


Try it »

The above Example will produce following output-

Bootstrap tooltip example

Bootstrap Tooltip Positions

You can change tooltip position by using data-placement attribute. Here are following positions of tooltips-

  • Top- Attribute data-placement = “top” is used for tooltip top position.
  • Bottom- Attribute data-placement = “bottom” is used for tooltip bottom position.
  • Left- Attribute data-placement = “left” is used for tooltip left position.
  • Right- Attribute data-placement = “right” is used for tooltip right position.

The above example will output something like this-

Bootstrap tooltip example

Add Bootstrap positions using JavaScript

You can also add positions using javascript. Here we are going to bind tooltip positions using javascript and class of element-

  • Top- $(selector).tooltip({placement : ‘top’}) is used for tooltip top position.
  • Bottom- $(selector).tooltip({placement : ‘bottom’}) is used for tooltip bottom position.
  • Left- $(selector).tooltip({placement : ‘left’}) is used for tooltip left position.
  • Right- $(selector).tooltip({placement : ‘right’}) is used for tooltip right position.

Example



Try it »

The Output of the above example will be –

Bootstrap tooltip demo

Options

Lets Have an overview on available options

Here are options available which can used via data-attribute or JavaScript.

[table width=”100%” colwidth=”20|100|100|160″ colalign=”left|left|center|left|left|left”]
Option,Type,Default Value,Data Attribute, Description,Demo
animation,boolean,true, data-animation,Used to add fade transition to the tooltip.,
placement,string,’top’,data-placement,Used to add tooltip position. Default position is top.,
html,boolean,false,data-html,Used to add html content in tooltip.,
selector,string,false,data-selector,Adds tooltip to the specified selector.,
title,string|function, “”,data-title, Adds text to the tooltip title.,
trigger,string,hover focus,data-trigger,binds event how it tooltip trigger will happen example- on click- on hover – on focus or manually.,
container,string,false,data-container, Appends tooltip in container element Example “body”.,
delay,number|object,0,data-delay, Defines the seconds to show and hide tooltip.,

[/table]

Bootstrap Buttons

Bootstrap Buttons : Bootstrap provides button styles which can be used as per our need. Bootstrap’s basic button can be created with simple class name .btn which will add simple button responsive style and compatible to different devices. Here in this tutorial we are going to explain how you can create buttons In Bootstrap With different- different examples. You can also use our online editor to edit and run the code online.

Bootstrap also provides classes to create the buttons of different sizes. You can also use the different button style which represents different state and message.

Bootstrap Buttons Example

Bootstrap provides some inbuilt buttons which you can use easily for example it provides default, primary, success, info, warning, danger and link buttons .

To Use these classes you just need to the following classes-

  • Bootstrap Default Button(.btn-default) – Class .btn-default is used to create Default Button.
  • Bootstrap Primary Button(.btn-primary) – Class .btn-primary is used to create Primary Button
  • Bootstrap Success Button(.btn-success) – Class .btn-success is used to create Success Button
  • Bootstrap Info Button(.btn-info) – Class .btn-info is used to create Info Button
  • Bootstrap Warning Button(.btn-warning) – Class .btn-warning is used to create Warning Button
  • Bootstrap Danger Button(.btn-danger) – Class .btn-danger is used to create Danger Button
  • Bootstrap Link Button(.btn-link) – Class .btn-link is used to create Link Button

Example

Now let us create an example to understand the buttons in Bootstrap.

Bootstrap Buttons : Example

  

Try it »

Bootstrap Buttons

Bootstrap Button size

We sometimes need different-different button sizes, bootstrap provides you buttons of different-different sizes such as – Large, small, block level buttons.
Here are following button sizes available in bootstrap –

[table width=”100%” colwidth=”20|100|50 |50″ colalign=”left|left|left|left”]
no,Size,Class, Description
1 , Large Button, .btn-lg, This is used to create large button
2 , Default Button,.btn, This is used to create regular button
3 , Small Button,.btn-sm, This is used to create small button
4 , Extra Small Button,.btn-xs,This is used to create Extra small button
5 , Block Button,.btn-block, This is used to create block level button
[/table]


Bootstrap Button Size :






 

Try it »

Bootstrap Buttons Sizes


Bootstrap Buttons States

You can represent the states with the Active and Disabled states.
.active class is used to make the button in active state.
.disabled class is used to make the button in disabled state.

Bootstrap Button States : Active/Disabled

  
  

Try it »


Bootstrap Buttons State

If want to create or learn about the button groups go to the Next Page ….

Bootstrap Button Groups » »