Beautiful women doing geeky stuff

Bootstrap and JavaSript

Related Posts

23/03/2013 Categories: Bootstrap JavaScript

Notes from "Introduction to Bootstrap" Scott Alan

To have your button toggle on and off like checkboxes - nice turn on/off effect add to your button "buttons-checkbox" or button-radio (only one button can be selcted at the time)

<div id="btngroup" class="btn-group" data-toggle="buttons-checkbox">

Important! The button state is not set until after you click event fires

data-...-text ( bootstrap will insert/replace this text on the existing text on the button


Modals - introduce modal dialogs on the page (can be used with progress bar)

you need something (a link) to initiate dialog

<h2 id="modal">
<a href="#themodal" role="button" class="btn" data-toggle="modal">start dialog</a>
<div id="themodal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
Modal header</h3>
<div class="modal-body">
Lore ipsum</p>
<div class="progress progress-striped">
<div id="doitprogress" class="bar">
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a id="yesbutton" href="#" class="btn" aria-hidden="true">jhjhjh</a>

$(function () {

var yesButton = $("#yesbutton");
var theModal = $("#themodal");
var progress = $("#doitprogress"); () {


var counter = 0;
var countDown = function () {
if (counter == 11) {
else {
progress.width(counter * 10 + "%");
setTimeout(countDown, 500);
setTimeout(countDown, 500);



Using bootstrap tooltip in place of browser tooltip give you control over tooltip placement, duration etc.
you can specify tooltip options programativly (in JS) or declaratively (data-)

Pop-overs: similar to tooltips but more persistant - you activate them by clicking on the element you need a script and:

Lore ipsum ..........
<a href="#" ref="popover"
data-content="Here is the text of the popover"
data-original-title="Title of the popover">A</a>, lorem ipsum....


Scrollspy - easy way to make a menu synchornised with user's position on the page

<section class="navspy">
<ul id="navigation" class="nav nav-pills nav-stacked affix"
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
</section> Important! all the links in your <ul> have to point to DOM elements that exists on the page

You also need to add to your body element <body data-spy="scroll" data-target=".navspy">


Typeahead - creates a text input where user can select form a list of options taht will drop down
You can make it by aading to your <input id"languageInput" type="text"
data-provide="typeahead" data-items="3"
data-source ="[&quot;A&quot;,&quot;B&quot;]>
Other way you can achieve it by using a script


Carousel - for a nice efect use pictures of the same resolution!
<div id="slidingcarousel" class="carousel slide"
<div class="carousel-inner">
<div class="item">
<img src="images/A.jpg"/>
<div class="carousel-caption">
<h3>Picture A</h3>
<p>Picture A is awsome</p>
<a class="#carosuel-control left" href="#slidingvarousel" data-slide="prev">&lsaquo;</a>
<a class="?carosuel-control right" href="#slidingvarousel" data-slide="next">&lsaquo;</a>

You can add buttons and/or links in the text (<p>)

$(funtion () {
interval: 2000