#bootstrap tools

Tiny Bootstrap Elements – WordPress Plugin (Add-ons)

Purchase $14.00 Tiny Bootstrap Elements is the perfect tool for WordPress to add Bootstrap elements to your pages.

Add a Bootstrap toolbar to WordPress editor, access to visual editors to create/edit :

Buttons (+ icons)

Icons

Tables

Templates (create only)

Breadcrumbs

Paginations

Pagers

Labels

Badges

Alerts

Panels

Can be used with any WordPress theme: if your theme is based on Bootstrap, just…

Tiny Bootstrap Elements – WordPress Plugin (Add-ons)

Purchase $14.00 Tiny Bootstrap Elements is the perfect tool for WordPress to add Bootstrap elements to your pages.

Add a Bootstrap toolbar to WordPress editor, access to visual editors to create/edit :

Buttons (+ icons)

Icons

Tables

Templates (create only)

Breadcrumbs

Paginations

Pagers

Labels

Badges

Alerts

Panels

Can be used with any WordPress theme: if your theme is based on Bootstrap, just…

New Post has been published on http://www.htmluse.com/twitter-bootstrap-affix/

Twitter Bootstrap Affix

Creating Pinned Element with Twitter Bootstrap

In this tutorial we will learn how to create a pinned (fixed positioned) element and toggle it’s pinning on and off using Twitter Bootstrap affix plug-in. The pinning of an element is enabled through changing the value of its position CSS property from static to fixed.

To do this, the affix plug-in toggles between three classes: .affix, .affix-top, and .affix-bottom. Each class represents a particular state.

Initially, the plug-in adds .affix-top or .affix-bottom class to indicate the element is in its top-most or bottom-most position.

When the element scrolling past the offset limit provided by the "data-offset-" attribute the plug-in replaces the .affix-top or .affix-bottom class with the .affix class (sets position: fixed;), which trigger the actual affixing.

At this point the appropriate CSS top or bottom property is required to determine the position of affix element on the viewport.

Check out the following example to see the affix plug-in in real action.

Enable Affix via Data Attributes

You can easily add affix behavior to any element — just add data-spy="affix" to the element you want to spy on. Then use "data-offset-" attributes to define when to toggle the pinning of an element ‘on’ and ‘off’.

Example

Try this code »

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">

<li class="active"><a href="#one">Section One</a></li>

<li><a href="#two">Section Two</a></li>

<li><a href="#three">Section Three</a></li>

</ul>

Note:The "data-offset-" attributes only specify how many pixels that you must scroll in order to toggle the pinning of an element, it did not set the position of pinned element. You must define the top or bottom CSS property for the pinned element specifically in your style sheet to set its position in the viewport.

Enable Affix via JavaScript

You may also enable the affix plugin manually using the JavaScript — just call the affix() method with the "id" or "class" selector of the required element in your JavaScript code.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$("#myNav").affix(

offset:

top: 190

);

);

</script>

Options

There are certain options which may be passed to affix() Bootstrap method to customize the functionality of the affix plug-in.

Name Type Default Value Description offset number | function | object 10 Specify the number of pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To set offset for a single direction, or multiple unique offsets — just provide an object like offset: top:50, bottom:100

You can also use a function if you want to dynamically provide an offset in case of responsive designs.

target selector | node | jQuery element the window object Specifies the target element of the affix.

Events

Bootstrap’s affix class includes few events for hooking into modal functionality.

Event Description affix.bs.affix This event fires immediately before the element has been affixed. affixed.bs.affix This event is fired after the element has been affixed. affix-top.bs.affix This event fires immediately before the element has been affixed to top. affixed-top.bs.affix This event is fired after the element has been affixed to top. affix-bottom.bs.affix This event fires immediately before the element has been affixed-bottom. affixed-bottom.bs.affix This event is fired after the element has been affixed to bottom.

The following example displays an alert message when navigation menu has been affixed.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$("#myNav").on('affixed.bs.affix', function()

alert("The navigation menu has been affixed. Now it doesn't scroll with the page.");

);

);

New Post has been published on http://www.htmluse.com/twitter-bootstrap-scrollspy/

Twitter Bootstrap ScrollSpy

Creating ScrollSpy with Twitter Bootstrap

The scrollspy is a navigation mechanism that directing visitors to the different sections of a page that has huge amount of content. Also the menu targets based on the scrolling position will be automatically highlighted to indicate the visitors where they are currently on the page. It saves the time and makes the content of your pages more accessible to the visitor.

Example

Try this code »

<body data-spy="scroll" data-offset="0" data-target="#myScrollspy">

<div class="container">

<div class="row">

<div class="span3" id="myScrollspy">

<ul class="nav nav-tabs nav-stacked affix">

<li class="active"><a href="#section1">Section One</a></li>

<li><a href="#section2">Section Two</a></li>

<li><a href="#section3">Section Three</a></li>

</ul>

</div>

<div class="span9">

<div class="section1">

<h2>Section One</h2>

<p>This is section one…</p>

</div>

<div class="section2">

<h2>Section Two</h2>

<p>This is section two…</p>

</div>

<div class="section3">

<h2>Section Three</h2>

<p>This is section three…</p>

</div>

</div>

</div>

</div>

Creating ScrollSpy via Data Attributes

You can easily add scrollspy behavior to your topbar navigation by adding data-spy="scroll" to the element you want to spy on (typically this would be the body) and the data-target=".navbar" (to select the navbar).

Example

Try this code »

<!--Navbar HTML-->

<div id="myNavbar" class="navbar navbar-inverse navbar-static">

<div class="navbar-inner">

<div class="container">

<a class="brand" href="#">Scrollspy</a>

<ul class="nav nav-tab">

<li class="active"><a href="#section1">Section 1</a></li>

<li><a href="#section2">Section 2</a></li>

<li><a href="#section3">Section 3</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#section4dot1">Section 4.1</a></li>

<li><a href="#section4dot2">Section 4.2</a></li>

<li><a href="#section4dot3">Section 4.3</a></li>

</ul>

</li>

<li><a href="#section5">Section 5</a></li>

</ul>

</div>

</div>

</div>

<!--Content section-->

<div data-spy="scroll" data-target="#myNavbar" data-offset="0">

<div id="section1">

<h2>Section 1</h2>

<p>This is section one…</p>

</div>

<div id="section2">

<h2>Section 2</h2>

<p>This is section two…</p>

</div>

<div id="section3">

<h2>Section 3</h2>

<p>This is section three…</p>

</div>

<div id="section4">

<h2>Section 4</h2>

<p>This is section four…</p>

<div id="section4dot1">

<p>This is section four point one…</p>

</div>

<div id="section4dot2">

<p>This is section four point two…</p>

</div>

<div id="section4dot3">

<p>This is section four point three…</p>

</div>

</div>

</div>

Creating ScrollSpy via JavaScript

You may also add scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the "id" or "class" selector of the navbar in your JavaScript code.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".scroll-area").scrollspy(target: "#myNavbar")

);

</script>

Methods

These are the standard bootstrap’s scrollspy methods:

.scrollspy(‘refresh’)

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like this:

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$('[data-spy="scroll"]').each(function ()

var $spy = $(this).scrollspy('refresh')

);

);

</script>

Options

There are certain options which may be passed to scrollspy() Bootstrap method to customize the functionality of a scrollspy.

Name Type Default Value Description offset number 10 Number of pixels to offset from top when calculating position of scroll.

Events

Bootstrap’s scrollspy class includes few events for hooking into scrollspy functionality.

Event Description activate.bs.scrollspy This event fires whenever a new item becomes activated by the scrollspy.

The following example displays an alert message to the user when a new item becomes highlighted by the scrollspy.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$("#myNavbar").on("activate.bs.scrollspy", function ()

var currentItem = $(".nav li.active > a").text();

$("#info").empty().html("Currently you are viewing - " + currentItem);

)

);

New Post has been published on http://www.htmluse.com/twitter-bootstrap-carousel/

Twitter Bootstrap Carousel

Creating Carousels with Twitter Bootstrap

The carousels popularly known as slide shows are some of the best ways of showcasing huge amount of contents within a small space on the web pages. It is a dynamic presentation of contents where text and images are made visible or accessible to the user by cycling through several items. The following example shows you how to build a simple carousel like image rotator using Twitter Bootstrap carousel plug-in:

Example

Try this code »

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

<!-- Carousel items -->

<div class="carousel-inner">

<div class="item active">

<h2>Slide 1</h2>

<div class="carousel-caption">

<h3>First slide label</h3>

<p>Lorem ipsum dolor sit amet consectetur…</p>

</div>

</div>

<div class="item">

<h2>Slide 2</h2>

<div class="carousel-caption">

<h3>Second slide label</h3>

<p>Aliquam sit amet gravida nibh, facilisis gravida…</p>

</div>

</div>

<div class="item">

<h2>Slide 3</h2>

<div class="carousel-caption">

<h3>Third slide label</h3>

<p>Praesent commodo cursus magna vel…</p>

</div>

</div>

</div>

<!-- Carousel nav -->

<a class="carousel-control left" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="carousel-control right" href="#myCarousel" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

— The output of the above example will look something like this:

Activate Carousels via Data Attributes

Twitter Bootstrap enables you to control the position of the carousel easily via data attributes. The data-slide attribute accepts the keywords prev or next, which changes the slide position relative to it’s current position. The data-slide attribute typically applied on the previous and next buttons.

Alternatively, you can use data-slide-to to pass a raw slide index to the carousel slides.

Example

Try this code »

<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">

<!-- Carousel indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

<!-- Carousel items -->

<div class="carousel-inner">

<div class="item active">

<h2>Slide 1</h2>

<div class="carousel-caption">

<h3>First slide label</h3>

<p>Lorem ipsum dolor sit amet consectetur…</p>

</div>

</div>

<div class="item">

<h2>Slide 2</h2>

<div class="carousel-caption">

<h3>Second slide label</h3>

<p>Aliquam sit amet gravida nibh, facilisis gravida…</p>

</div>

</div>

<div class="item">

<h2>Slide 3</h2>

<div class="carousel-caption">

<h3>Third slide label</h3>

<p>Praesent commodo cursus magna vel…</p>

</div>

</div>

</div>

<!-- Carousel nav -->

<a class="carousel-control left" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="carousel-control right" href="#myCarousel" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

Activate Carousels via JavaScript

You may also activate a carousel manually using the JavaScript — just call the carousel() method with the "id" or "class" selector of the wrapper element in your JavaScript code.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$("#myCarousel").carousel();

);

</script>

Options

There are certain options which may be passed to carousel() Bootstrap method to customize the functionality of a carousel widget.

Name Type Default Value Description interval number 5000 Specifies the amount of time to delay (in milliseconds) between one slide to another in automatic cycling. If false, carousel will not automatically cycle. pause string “hover” Pauses the cycling of the carousel on mouse enter and resumes the cycling of the carousel on mouse leave. wrap boolean true Specifies whether the carousel should cycle continuously or have hard stops.

Check out the following example to see these options works:

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$("#myCarousel").carousel(

interval : 3000,

pause: false

);

);

</script>

You can also set these options using the data attributes on accordion — just append the option name to data-, like data-interval="3000", data-pause="hover" as demonstrated in the basic implementation.

Methods

These are the standard bootstrap’s carousels methods:

.carousel(options)

This method initializes the carousel with optional options and starts cycling through items.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$("#myCarousel").carousel(

interval : 3000

);

);

</script>

.carousel(‘cycle’)

This method start carousel for cycling through the items from left to right.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".start-slide").click(function()

$("#myCarousel").carousel('cycle');

);

);

</script>

.carousel(‘pause’)

This method stops the carousel from cycling through items.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".pause-slide").click(function()

$("#myCarousel").carousel('pause');

);

);

</script>

.carousel(number)

This method cycles the carousel to a particular frame (start with 0, similar to an array).

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".slide-three").click(function()

$("#myCarousel").carousel(3);

);

);

</script>

.carousel(‘prev’)

This method cycles the carousel to the previous item.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".prev-slide").click(function()

$("#myCarousel").carousel('prev');

);

);

</script>

.carousel(‘next’)

This method cycles the carousel to the next item.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$(".next-slide").click(function()

$("#myCarousel").carousel('next');

);

);

</script>

Events

Bootstrap’s carousel class includes few events for hooking into carousel functionality.

Event Description slide.bs.carousel This event fires immediately when the slide instance method is called. slid.bs.carousel This event is fired when the carousel has completed its slide transition.

The following example displays an alert message to the user when sliding transition of a carousel item has been fully completed.

Example

Try this code »

<script type="text/javascript">

$(document).ready(function()

$('#myCarousel').on('slid.bs.carousel', function ()

alert("The sliding transition of previous carousel item has been fully completed.");

);

);