JSFiddle - React, Tailwind, and code Playground

Bootstrap JS Functions

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
            </button> <a class="navbar-brand" href="#">Brand It</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
              ...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);

* { font-family:'Lato'; border-radius: 0 !important; }

.row-stat {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 1.25em;
    padding: 17px 13px 21px;
}
.row-stat-label {
    color: #999;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.row-stat-value {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0.25em;
}
.row-stat-badge {
    font-size: 85%;
    position: relative;
    top: -3px;
}
.row-stat {
    position: relative;
}
.row-stat:after, .row-stat:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ffffff;
    border-color: -moz-use-text-color #ddd #ddd;
    border-image: none;
    border-radius: 0 0 3px 3px;
    border-right: 1px solid #ddd;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    bottom: -3px;
    content:"";
    display: block;
    height: 1px;
    left: 3px;
    position: absolute;
    right: 3px;
}
.row-stat:before {
    bottom: -5px;
    left: 6px;
    right: 6px;
}

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0

jQuery(document).ready(function ($) {
    $('[data-toggle="tooltip"]').tooltip();

    $('[data-toggle="popover"]').popover({
        trigger: 'hover'
    });

    $('.navbar .dropdown').hover(function () {
        $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(50).fadeIn('fast');
    }, function () {
        var na = $(this)
        na.find('.dropdown-menu').first().stop(true, true).delay(50).fadeOut('fast', function () {
            na.removeClass('extra-nav-class')
        })
    });

    $('.dropdown-submenu').hover(function () {
        $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(50).fadeIn('fast');
    }, function () {
        var na = $(this)
        na.find('.dropdown-menu').first().stop(true, true).delay(50).fadeOut('fast', function () {
            na.removeClass('extra-nav-class')
        })
    });

    $('.dropdown').hover(function () {
        $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(50).fadeIn('fast');
    }, function () {
        var na = $(this)
        na.find('.dropdown-menu').first().stop(true, true).delay(50).fadeOut('fast', function () {
            na.removeClass('extra-nav-class')
        })
    });

    $('.btn-group').hover(function () {
        $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(50).fadeIn('fast');
    }, function () {
        var na = $(this)
        na.find('.dropdown-menu').first().stop(true, true).delay(50).fadeOut('fast', function () {
            na.removeClass('extra-nav-class')
        })
    });
});