iSynergy Bootstrap mock-up

by colin_young

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" 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="#">iSynergy</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <!-- Application selector -->
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Application <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li role="presentation">
                        <a role="menuitem" href="#">Sample</a></li>
                    <li role="presentation">
                        <a role="menuitem" href="#">Test - Internationalization</a></li>
                    <li role="presentation">
                        <a role="menuitem" href="#">Test - Quotes Marks</a></li>
                    <li role="presentation">
                        <a role="menuitem" href="#">Test - States Index</a></li>
                </ul>
            </li>
            <li title="Forms" data-toggle="tooltip" data-placement="right"><a href="#" class="dropdown" data-toggle="dropdown"><span class="glyphicon glyphicon-list-alt"></span> <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li role="presentation">
                        <a...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
    margin-top: 70px;
}

html, body { 
    height:100%
}

.popover {
	max-width: 100%;
	width: auto;
    z-index: 10100;
}

thead th {
    font-weight: bold;
}

#doc-viewer div.row div {
    padding: 10px 0 10px 0;
    text-align: center;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */
$('[data-toggle="popover"]').popover({
    container: '#view-doc-container',
    html: true,
    content: function() {
        return $($(this).data('contentwrapper')).html();
    }
});

$('[data-toggle="tooltip"]').tooltip();