Here we have various Metro specific components.
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.
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>
Hover each command to display an explanatory tooltip.
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>
<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); }
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>
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>
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 are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
A rendered modal with header, body, and set of actions in the footer.
One fine body…
<div class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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>
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
.
<!-- 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>
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>
Call a modal with id myModal
with a single line of JavaScript:
$('#myModal').modal(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
|
Activates your content as a modal. Accepts an optional options object
.
$('#myModal').modal({ keyboard: false })
Manually toggles a modal.
$('#myModal').modal('toggle')
Manually opens a modal.
$('#myModal').modal('show')
Manually hides a modal.
$('#myModal').modal('hide')
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… })
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>
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.
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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>