Google Closure Library UI styled with Twitter Bootstrap
JavaScript
Switch branches/tags
Nothing to show
Latest commit 0ddcb95 Apr 18, 2012 @urmuzov directory reorganization
Permalink
Failed to load latest commit information.
css Dialog css bugfix Nov 7, 2011
javascript/bootstrap directory reorganization Apr 18, 2012
README.md Initial commit Oct 9, 2011

README.md

About

closure-bootstrap is a collection of Closure Library UI controls styled with Twitter Bootstrap.

This collection will be increased over time.

Usage

You need to link bootstrap.css to your page. Look at Twitter Bootstrap page to find out how.

Buttons

Rendering:

var button = new bootstrap.Button('Button Text');
button.setSize(bootstrap.Button.Size.LARGE);
button.setKind(bootstrap.Button.Kind.DANGER);
button.render(goog.dom.getElement('button1'));

Decorating:

You need to use button tag with class="btn" like this:

<button id="button2" class="btn">Button Text</button>
...
var button = goog.ui.decorate(goog.dom.getElement('button2'));

TabBars (Tabs and Pills)

Rendering:

var tabs = new bootstrap.Tabs(); // or new bootstrap.Pills();
tabs.addChild(new bootstrap.Tab('tab1'), true);
tabs.addChild(new bootstrap.Tab('tab2'), true);
tabs.addChild(new bootstrap.Tab('tab3'), true);
tabs.setSelectedTabIndex(0);
tabs.render(goog.dom.getElement('tabs1'));

Decorating:

You need to add class tab to all your tabs:

<ul id="tabs2" class="tabs">
    <li class="tab active"><a href="#">Home</a></li>
    <li class="tab"><a href="#">Profile</a></li>
    <li class="tab"><a href="#">Messages</a></li>
    <li class="tab"><a href="#">Settings</a></li>
    <li class="tab"><a href="#">Contact</a></li>
</ul>
...
var tabs = goog.ui.decorate(goog.dom.getElement('tabs2'));