Here we have various Metro specific components.

Command Buttons Special action buttons

Examples and markup

Command styles can be applied to anything with the .win-command class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Commands with icons

To use one of the font icons provided with BootMetro, use a .win-commandicon and a .icon-* class.

Hover each command to display an explanatory tooltip.

   <button class="win-command" rel="tootlip" title="Simple command with only an icon">
      <span class="win-commandicon icon-settings"></span>
   </button>
   
   <button class="win-command" rel="tootlip" title="Command with icon and label">
      <span class="win-commandicon icon-settings"></span>
      <span class="win-label">With label</span>
   </button>
   
   <button class="win-command" rel="tootlip" title="Command with icon with border ring">
      <span class="win-commandicon win-commandring icon-settings"></span>
   </button>
   
   <button class="win-command" rel="tootlip" title="Command with icon and label with border ring">
      <span class="win-commandicon win-commandring icon-settings"></span>
      <span class="win-label">With ring & label</span>
   </button>

Basic Commands with dark theme

Hover each command to display an explanatory tooltip.


Commands with images

To use a custom image, use a .win-commandimage class.

   <button class="win-command" rel="tootlip" title="Simple command with an image inside">
      <span class="win-commandimage">
         <img src="content/img/sample-tiles.png" width="40" height="40" alt=""/>
      </span>
   </button>
   
   <button class="win-command" rel="tootlip" title="Command with image and label">
      <span class="win-commandimage">
         <img src="content/img/sample-tiles.png" width="40" height="40" alt=""/>
      </span>
      <span class="win-label">With label</span>
   </button>
   
   <button class="win-command" rel="tootlip" title="Command with image with border ring">
      <span class="win-commandimage win-commandring">
         <img src="content/img/sample-tiles.png" width="40" height="40" alt=""/>
      </span>
   </button>
   
   <button class="win-command" rel="tootlip" title="Command with image and label with border ring">
      <span class="win-commandimage win-commandring">
         <img src="content/img/sample-tiles.png" width="40" height="40" alt=""/>
      </span>
      <span class="win-label">With ring & label</span>
   </button>

Customization

   <button class="win-command orange" rel="tootlip" title="Command with icon and label with border ring, with a custom color">
      <span class="win-commandicon win-commandring icon-settings"></span>
      <span class="win-label">Customized</span>
   </button>

This is a sample CSS used to customized the above orange command:

   .win-command.orange .win-commandicon,
   .win-command.orange .win-label {
      color: #F09609;
   }
   .win-command.orange .win-commandring {
      border-color: #F09609;
   }
   .win-command.orange:hover .win-commandring {
       background-color: rgba(240, 150, 9, 0.4);
   }

Command button sizes

Metro Progress Bars For loading, redirecting, or action status

Examples and markup

Determinate

Use the determinate progress bar style when a task is determinate, that is when it has a well-defined duration or a predictable end.

   <div class="progress">
     <div class="bar" style="width: 60%;"></div>
   </div>

Indeterminate

Use this style for tasks that are not determinate that are non-modal (don't block user interaction).

   <div class="progress progress-indeterminate">
     <div class="bar"></div>
   </div>

Indeterminate Ring

Use this style for tasks that are not determinate that are non-modal (don't block user interaction).

   <div class="progress progress-indeterminate">
     <div class="win-ring small"></div>
   </div>

Modals bootstrap-modal.js

Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Static example

A rendered modal with header, body, and set of actions in the footer.

Modal header

One fine body…

Close Save changes 
   <div class="modal hide fade">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h3>Modal header</h3>
     </div>
     <div class="modal-body">
       <p>One fine body…</p>
     </div>
     <div class="modal-footer">
       <a href="#" class="btn">Close</a>
       <a href="#" class="btn btn-primary">Save changes</a>
     </div>
   </div>

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

To show a Metro style message dialog, add a class message.

To show a Metro style warning or error dialog, add a class warning.

Show Flyout (classic modal) Show Metro Message Show Error/Warning 
   <!-- Button to trigger modal -->
   <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
   
   <!-- Modal -->
   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
       <h3 id="myModalLabel">Modal header</h3>
     </div>
     <div class="modal-body">
       <p>One fine body…</p>
     </div>
     <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       <button class="btn btn-primary">Save changes</button>
     </div>
   </div>

Usage

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

$('#myModal').modal(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name type default description
backdrop boolean true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
show boolean true Shows the modal when initialized.
remote path false

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

   $('#myModal').modal({
     keyboard: false
   })

.modal('toggle')

Manually toggles a modal.

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

$('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide instance method has been called.
hidden This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete). 
   $('#myModal').on('hidden', function () {
     // do something…
   })

DatePicker

Code from: http://www.eyecon.ro/bootstrap-datepicker/

Attached to a field with the format specified via options.

   <input type="text" id="dp1" value="02-16-2012" class="span2 datepicker">

Attachet to a field with the format specified via data tag.

   <input type="text" id="dp2" data-date-format="mm/dd/yy" value="02-16-2012" class="span2 datepicker">

As component.

   <div data-date-format="dd-mm-yyyy" data-date="12-02-2012" id="dp3" class="input-append datepicker">
      <input type="text" readonly="" value="12-02-2012" size="16" class="span2">
      <span class="add-on"><i class="icon-calendar"></i></span>
      </div>

FlipView

The FlipView control lets flip through views or items one at a time. Flip buttons appear on mouse hover and let people flip to the next or previous item.

Note: The FlipView control is a customization of the Carousel component, so it requires the carousel javascript plugin.

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

   <div id="myCarousel" class="carousel flipview slide">
     <!-- Carousel items -->
     <div class="carousel-inner">
       <div class="active item">…</div>
       <div class="item">…</div>
       <div class="item">…</div>
     </div>
     <!-- Carousel nav -->
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
   </div>

Settings