JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">STATO-APP</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.jsp">Home</a></li>
<li class="active" class="dropdown">
<a href="queries.jsp" class="dropdown-toggle" data-toggle="dropdown">Demo Queries <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="queries.jsp">Demo queries by type</a></li>
<li class="divider"></li>
<li><a href="queryForm.jsp?queryType=all">All demo queries</a></li>
<li><a href="queryForm.jsp?queryType=tests">Statistical tests demo queries</a></li>
<li><a href="queryForm.jsp?queryType=plots">Statistical plots demo queries</a></li>
<li><a href="queryForm.jsp?queryType=measures">Statistical measures demo queries</a></li>
<li><a href="queryForm.jsp?queryType=designs">Study designs demo...
CSS
.carousel.carousel-fade .item {
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
.unstyled li {
display: inline;
vertical-align: baseline;
padding: 0 16px;
position: relative;
}
.spinner {
display: inline-block;
opacity: 0;
max-width: 0;
-webkit-transition: opacity 0.25s, max-width 0.45s;
-moz-transition: opacity 0.25s, max-width 0.45s;
-o-transition: opacity 0.25s, max-width 0.45s;
transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}
.popover.fade {
z-index:10000;
}
.popover.fade.in {
z-index:10001;
}
.has-spinner.active {
cursor:progress;
}
.has-spinner.active .spinner {
opacity: 1;
max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}
.carousel .item {
width: 100%;
height: 600px;
background-color: silver;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
@media (min-width: 768px) {
...
JavaScript
function showPopup(id) {
$(id).popover('show');
}
function hidePopup(id) {
$(id).popover('hide');
}