Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
61 lines (39 sloc) 1.56 KB

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'));