Components
Over a dozen reusable components built to provide Leap users with a decent web browsing experience
Buttons and Dropdowns
Button Dropdowns
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML. Make the button and the menu item anchor links .leap-interactive.
<div class="dropdown ">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle leap-interactive" data-toggle="dropdown">Primary <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a class="leap-interactive" href="#">Action</a></li>
<li><a class="leap-interactive" href="#">Another action</a></li>
<li><a class="leap-interactive" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a class="leap-interactive" href="#">Separated link</a></li>
</ul>
</div>
</div>
Button Groups
Wrap a series of buttons with .btn in .btn-group. Make all buttons have the class leap-interactive.
<div class="btn-group">
<button type="button" class="btn btn-default leap-interactive">Left</button> <button type="button" class="btn btn-default leap-interactive">Middle</button> <button type="button" class="btn btn-default leap-interactive">Right</button>
</div>
Thumbnails
Extend Leapstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
Default example
By default, Leapstrap's thumbnails are designed to showcase linked images with minimal required markup. Add CSS class leap-interactive and you'll get a border.
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail leap-interactive"> <img data-src="holder.js/100%x180" alt="..."> </a>
</div>
...
</div>
HTML content
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail leap-thumbnail leap-interactive" leap-disable-tap="true">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>
Thumbnail label
</h3>
<p>
...
</p>
<p>
<a href="#" class="btn btn-primary leap-interactive" role="button">Button</a> <a href="#" class="btn btn-default leap-interactive" role="button">Button</a>
</p>
</div>
</div>
</div>
</div>
Media object
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
Default media
The default media allow to float a media object (images, video, audio) to the left or right of a content block. Add CSS classes media-leap leap-interactive to get a border on hover.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media media-leap leap-interactive" leap-disable-tap="true">
<a class="pull-left" href="#"> <img class="media-object" src="..." alt="..."> </a>
<div class="media-body">
<h4 class="media-heading">
Media heading
</h4>
...
</div>
</div>
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.
Examples
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
No default class
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
Dismissable alerts
Build on any alert by adding an optional .alert-dismissable and close button.
Warning! Best check yo self, you're not looking too good.
<div class="alert alert-leap alert-warning alert-dismissable leap-interactive" leap-disable-tap="true">
<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Ensure proper behavior across all devices
Be sure to use the <button> element with the data-dismiss="alert" data attribute.
Links in alerts
Use the .alert-link utility class to quickly provide matching colored links within any alert.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-leap alert-success alert-dismissable leap-interactive" leap-disable-tap="true">
<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="alert-link leap-interactive">...</a>
</div>
<div class="alert alert-leap alert-info alert-dismissable leap-interactive" leap-disable-tap="true">
<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="alert-link leap-interactive">...</a>
</div>
<div class="alert alert-leap alert-warning alert-dismissable leap-interactive" leap-disable-tap="true">
<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="alert-link leap-interactive">...</a>
</div>
<div class="alert alert-leap alert-danger alert-dismissable leap-interactive" leap-disable-tap="true">
<button type="button" class="close leap-interactive" data-dismiss="alert" aria-hidden="true">×</button> <a href="#" class="alert-link leap-interactive">...</a>
</div>
Panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Leap Panel example
Hovering over a leap-panel gives a basic border outline effect.
Leap panel example (hover over me)
<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
<div class="panel-body">
Leap panel example (hover over me)
</div>
</div>
Panel options
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Panel heading without title
Panel content
Panel title
Panel content
Panel content
<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
<div class="panel-heading">
Panel heading without title
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default panel-leap leap-interactive" leap-disable-tap="true">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
Contextual alternatives
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
<div class="panel panel-primary panel-leap leap-interactive" leap-disable-tap="true">
...
</div>
<div class="panel panel-success panel-leap leap-interactive" leap-disable-tap="true">
...
</div>
<div class="panel panel-info panel-leap leap-interactive" leap-disable-tap="true">
...
</div>
<div class="panel panel-warning panel-leap leap-interactive" leap-disable-tap="true">
...
</div>
<div class="panel panel-danger panel-leap leap-interactive" leap-disable-tap="true">
...
</div>
Wells
Leap well
Use the Leap well as a simple effect on an element to give it a general hover effect.
Hover over me, I'm in a well!
<div class="well well-leap leap-interactive">
...
</div>
Labels
Example
Example heading New
<h3>
Example heading <span class="label label-default">New</span>
</h3>
Available variations
Add any of the below mentioned modifier classes to change the appearance of a label.
Default Primary Success Info Warning Danger
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
Badges
Easily highlight new or unread items by adding a <span class="badge"> to links, Leapstrap navs, and more.
<a class="leap-interactive" href="#">Inbox <span class="badge">42</span></a>
Self collapsing
When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.
Cross-browser compatibility
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
