Skip to content
Google Closure Library UI styled with Twitter Bootstrap
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css
javascript/bootstrap
README.md

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'));
Something went wrong with that request. Please try again.