JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grid Layout - Bootstrap Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./">Adminia Admin</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li>
<a href="#"><span class="badge badge-warning">7</span></a>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle " href="#">
Rod Howard <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="./account.html"><i class="icon-user"></i> Account Setting </a>
</li>
<li>
<a href="./change_password.html"><i class="icon-lock"></i>...
CSS
/*------------------------------------------------------------------
[Layout Stylesheet]
Project: Adminia Admin
Version: 1.0
Last change: 05/11/2012
Assigned to: Rod Howard (rh)
[Table of contents]
1. Global
2. Navbar / .navbar
3. Main Nav / #main-nav
4. Content / #content
5. Footer / #footer
6. Widget / .widget
7. Miscellaneous
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[1. Global]
*/
body {
font: 13px/1.7em 'Open Sans', arial, sans-serif;
background: url(../img/body-bg.png) repeat 0 0;
}
p {
font: 13px/1.7em 'Open Sans', arial, sans-serif;
}
h1 {
margin-bottom: .25em;
}
h2 {
margin-bottom: .5em;
color: #4A515B;
}
h3 {
margin-bottom: .75em;
font-weight: 600;
color: #F90;
}
h4, h5, h6 {
margin-bottom: 1.25em;
color: #666;
}
hr {
border-top-color: #DDD;
}
input {
font: 13px/1.7em 'Open Sans', arial, sans-serif;
}
/*------------------------------------------------------------------
[2. Navbar / .navbar]
*/
.navbar {
font-size: 12px;
}
.navbar .brand {
position: relative;
top: 2px;
font-size: 18px;
font-weight: 600;
}
/*------------------------------------------------------------------
[3. Sidebar Nav / #main-nav]
*/
#main-nav.nav-tabs.nav-stacked > li {
margin-bottom: 4px;
}
#main-nav.nav-tabs.nav-stacked > li > a {
padding: 10px 8px;
font-size: 12px;
font-weight: 600;
color: #4A515B;
background: #E9E9E9;
background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%); /* Chrome10+,Safari5.1+ */
...
JavaScript
/* ===================================================
* bootstrap-transition.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function( $ ) {
$(function () {
"use strict"
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support && {
end: (function () {
var transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
return transitionEnd
}())
}
})()
})
}( window.jQuery );/* ==========================================================
* bootstrap-alert.js v2.0.2
*...