667 lines
39 KiB
HTML
667 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<title>INSPINIA | Tabs & Panels</title>
|
||
|
||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
|
||
<link href="css/animate.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="wrapper">
|
||
|
||
<nav class="navbar-default navbar-static-side" role="navigation">
|
||
<div class="sidebar-collapse">
|
||
<ul class="nav" id="side-menu">
|
||
<li class="nav-header">
|
||
<div class="dropdown profile-element"> <span>
|
||
<img alt="image" class="img-circle" src="img/profile_small.jpg" />
|
||
</span>
|
||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
|
||
<span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">David Williams</strong>
|
||
</span> <span class="text-muted text-xs block">Art Director <b class="caret"></b></span> </span> </a>
|
||
<ul class="dropdown-menu animated fadeInRight m-t-xs">
|
||
<li><a href="profile.html">Profile</a></li>
|
||
<li><a href="contacts.html">Contacts</a></li>
|
||
<li><a href="mailbox.html">Mailbox</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="login.html">Logout</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="logo-element">
|
||
IN+
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="index.html">Dashboard v.1</a></li>
|
||
<li><a href="dashboard_2.html">Dashboard v.2</a></li>
|
||
<li><a href="dashboard_3.html">Dashboard v.3</a></li>
|
||
<li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="layouts.html"><i class="fa fa-diamond"></i> <span class="nav-label">Layouts</span> <span class="label label-primary pull-right">NEW</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Graphs</span><span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="graph_flot.html">Flot Charts</a></li>
|
||
<li><a href="graph_morris.html">Morris.js Charts</a></li>
|
||
<li><a href="graph_rickshaw.html">Rickshaw Charts</a></li>
|
||
<li><a href="graph_chartjs.html">Chart.js</a></li>
|
||
<li><a href="graph_peity.html">Peity Charts</a></li>
|
||
<li><a href="graph_sparkline.html">Sparkline Charts</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">Mailbox </span><span class="label label-warning pull-right">16/24</span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="mailbox.html">Inbox</a></li>
|
||
<li><a href="mail_detail.html">Email view</a></li>
|
||
<li><a href="mail_compose.html">Compose email</a></li>
|
||
<li><a href="email_template.html">Email templates</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="widgets.html"><i class="fa fa-flask"></i> <span class="nav-label">Widgets</span> </a>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-edit"></i> <span class="nav-label">Forms</span><span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="form_basic.html">Basic form</a></li>
|
||
<li><a href="form_advanced.html">Advanced Plugins</a></li>
|
||
<li><a href="form_wizard.html">Wizard</a></li>
|
||
<li><a href="form_file_upload.html">File Upload</a></li>
|
||
<li><a href="form_editors.html">Text Editor</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">App Views</span> <span class="pull-right label label-primary">SPECIAL</span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="contacts.html">Contacts</a></li>
|
||
<li><a href="profile.html">Profile</a></li>
|
||
<li><a href="projects.html">Projects</a></li>
|
||
<li><a href="project_detail.html">Project detail</a></li>
|
||
<li><a href="file_manager.html">File manager</a></li>
|
||
<li><a href="calendar.html">Calendar</a></li>
|
||
<li><a href="faq.html">FAQ</a></li>
|
||
<li><a href="timeline.html">Timeline</a></li>
|
||
<li><a href="pin_board.html">Pin board</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span><span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="search_results.html">Search results</a></li>
|
||
<li><a href="lockscreen.html">Lockscreen</a></li>
|
||
<li><a href="invoice.html">Invoice</a></li>
|
||
<li><a href="login.html">Login</a></li>
|
||
<li><a href="login_two_columns.html">Login v.2</a></li>
|
||
<li><a href="register.html">Register</a></li>
|
||
<li><a href="404.html">404 Page</a></li>
|
||
<li><a href="500.html">500 Page</a></li>
|
||
<li><a href="empty_page.html">Empty page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-globe"></i> <span class="nav-label">Miscellaneous</span><span class="label label-info pull-right">NEW</span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="toastr_notifications.html">Notification</a></li>
|
||
<li><a href="nestable_list.html">Nestable list</a></li>
|
||
<li><a href="timeline_2.html">Timeline v.2</a></li>
|
||
<li><a href="forum_main.html">Forum view</a></li>
|
||
<li><a href="google_maps.html">Google maps</a></li>
|
||
<li><a href="code_editor.html">Code editor</a></li>
|
||
<li><a href="modal_window.html">Modal window</a></li>
|
||
<li><a href="validation.html">Validation</a></li>
|
||
<li><a href="tree_view.html">Tree view</a></li>
|
||
<li><a href="chat_view.html">Chat view</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="active">
|
||
<a href="#"><i class="fa fa-flask"></i> <span class="nav-label">UI Elements</span><span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="typography.html">Typography</a></li>
|
||
<li><a href="icons.html">Icons</a></li>
|
||
<li><a href="draggable_panels.html">Draggable Panels</a></li>
|
||
<li><a href="buttons.html">Buttons</a></li>
|
||
<li><a href="video.html">Video</a></li>
|
||
<li class="active"><a href="tabs_panels.html">Tabs & Panels</a></li>
|
||
<li><a href="notifications.html">Notifications & Tooltips</a></li>
|
||
<li><a href="badges_labels.html">Badges, Labels, Progress</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="grid_options.html"><i class="fa fa-laptop"></i> <span class="nav-label">Grid options</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-table"></i> <span class="nav-label">Tables</span><span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="table_basic.html">Static Tables</a></li>
|
||
<li><a href="table_data_tables.html">Data Tables</a></li>
|
||
<li><a href="jq_grid.html">jqGrid</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-picture-o"></i> <span class="nav-label">Gallery</span><span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li><a href="basic_gallery.html">Lightbox Gallery</a></li>
|
||
<li><a href="carousel.html">Bootstrap Carusela</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#"><i class="fa fa-sitemap"></i> <span class="nav-label">Menu Levels </span><span class="fa arrow"></span></a>
|
||
<ul class="nav nav-second-level">
|
||
<li>
|
||
<a href="#">Third Level <span class="fa arrow"></span></a>
|
||
<ul class="nav nav-third-level">
|
||
<li>
|
||
<a href="#">Third Level Item</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">Third Level Item</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">Third Level Item</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</li>
|
||
<li><a href="#">Second Level Item</a></li>
|
||
<li>
|
||
<a href="#">Second Level Item</a></li>
|
||
<li>
|
||
<a href="#">Second Level Item</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="css_animation.html"><i class="fa fa-magic"></i> <span class="nav-label">CSS Animations </span><span class="label label-info pull-right">62</span></a>
|
||
</li>
|
||
<li class="landing_link">
|
||
<a target="_blank" href="Landing_page/index.html"><i class="fa fa-star"></i> <span class="nav-label">Landing Page</span> <span class="label label-warning pull-right">NEW</span></a>
|
||
</li>
|
||
<li class="special_link">
|
||
<a href="package.html"><i class="fa fa-database"></i> <span class="nav-label">Package</span></a>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
<div id="page-wrapper" class="gray-bg">
|
||
<div class="row border-bottom">
|
||
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
|
||
<div class="navbar-header">
|
||
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
|
||
<form role="search" class="navbar-form-custom" method="post" action="search_results.html">
|
||
<div class="form-group">
|
||
<input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<ul class="nav navbar-top-links navbar-right">
|
||
<li>
|
||
<span class="m-r-sm text-muted welcome-message">Welcome to INSPINIA+ Admin Theme.</span>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
|
||
<i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-messages">
|
||
<li>
|
||
<div class="dropdown-messages-box">
|
||
<a href="profile.html" class="pull-left">
|
||
<img alt="image" class="img-circle" src="img/a7.jpg">
|
||
</a>
|
||
<div class="media-body">
|
||
<small class="pull-right">46h ago</small>
|
||
<strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
|
||
<small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<div class="dropdown-messages-box">
|
||
<a href="profile.html" class="pull-left">
|
||
<img alt="image" class="img-circle" src="img/a4.jpg">
|
||
</a>
|
||
<div class="media-body ">
|
||
<small class="pull-right text-navy">5h ago</small>
|
||
<strong>Chris Johnatan Overtunk</strong> started following <strong>Monica Smith</strong>. <br>
|
||
<small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<div class="dropdown-messages-box">
|
||
<a href="profile.html" class="pull-left">
|
||
<img alt="image" class="img-circle" src="img/profile.jpg">
|
||
</a>
|
||
<div class="media-body ">
|
||
<small class="pull-right">23h ago</small>
|
||
<strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br>
|
||
<small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<div class="text-center link-block">
|
||
<a href="mailbox.html">
|
||
<i class="fa fa-envelope"></i> <strong>Read All Messages</strong>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
|
||
<i class="fa fa-bell"></i> <span class="label label-primary">8</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-alerts">
|
||
<li>
|
||
<a href="mailbox.html">
|
||
<div>
|
||
<i class="fa fa-envelope fa-fw"></i> You have 16 messages
|
||
<span class="pull-right text-muted small">4 minutes ago</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<a href="profile.html">
|
||
<div>
|
||
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
|
||
<span class="pull-right text-muted small">12 minutes ago</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<a href="grid_options.html">
|
||
<div>
|
||
<i class="fa fa-upload fa-fw"></i> Server Rebooted
|
||
<span class="pull-right text-muted small">4 minutes ago</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<div class="text-center link-block">
|
||
<a href="notifications.html">
|
||
<strong>See All Alerts</strong>
|
||
<i class="fa fa-angle-right"></i>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
<li>
|
||
<a href="login.html">
|
||
<i class="fa fa-sign-out"></i> Log out
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</nav>
|
||
</div>
|
||
<div class="row wrapper border-bottom white-bg page-heading">
|
||
<div class="col-lg-10">
|
||
<h2>Tabs & Panels</h2>
|
||
<ol class="breadcrumb">
|
||
<li>
|
||
<a href="index.html">Home</a>
|
||
</li>
|
||
<li>
|
||
<a>UI Elements</a>
|
||
</li>
|
||
<li class="active">
|
||
<strong>Tabs & Panels</strong>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="col-lg-2">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="wrapper wrapper-content animated fadeIn">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>Basic IN+ Panel <small class="m-l-sm">This is custom panel</small></h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||
<i class="fa fa-wrench"></i>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-user">
|
||
<li><a href="#">Config option 1</a>
|
||
</li>
|
||
<li><a href="#">Config option 2</a>
|
||
</li>
|
||
</ul>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<h2 >
|
||
This is standard IN+ Panel<br/>
|
||
</h2>
|
||
<p>
|
||
<strong>Lorem ipsum dolor</strong>
|
||
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
|
||
<p>
|
||
<small>
|
||
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
|
||
</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="panel blank-panel">
|
||
|
||
<div class="panel-heading">
|
||
<div class="panel-title m-b-md"><h4>Blank Panel with text tabs</h4></div>
|
||
<div class="panel-options">
|
||
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a data-toggle="tab" href="#tab-1">First Tab</a></li>
|
||
<li class=""><a data-toggle="tab" href="#tab-2">Second Tab</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-body">
|
||
|
||
<div class="tab-content">
|
||
<div id="tab-1" class="tab-pane active">
|
||
<strong>Lorem ipsum dolor sit amet, consectetuer adipiscing</strong>
|
||
|
||
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
|
||
|
||
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When.</p>
|
||
</div>
|
||
|
||
<div id="tab-2" class="tab-pane">
|
||
<strong>Donec quam felis</strong>
|
||
|
||
<p>Thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath </p>
|
||
|
||
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="panel blank-panel">
|
||
|
||
<div class="panel-heading">
|
||
<div class="panel-title m-b-md"><h4>Blank Panel with icons tabs</h4></div>
|
||
<div class="panel-options">
|
||
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a data-toggle="tab" href="#tab-4"><i class="fa fa-laptop"></i></a></li>
|
||
<li class=""><a data-toggle="tab" href="#tab-5"><i class="fa fa-desktop"></i></a></li>
|
||
<li class=""><a data-toggle="tab" href="#tab-6"><i class="fa fa-signal"></i></a></li>
|
||
<li class=""><a data-toggle="tab" href="#tab-7"><i class="fa fa-bar-chart-o"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-body">
|
||
|
||
<div class="tab-content">
|
||
<div id="tab-4" class="tab-pane active">
|
||
<strong>Donec quam felis</strong>
|
||
|
||
<p>Who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee </p>
|
||
|
||
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, </p>
|
||
</div>
|
||
|
||
<div id="tab-5" class="tab-pane">
|
||
<strong>One morning, when Gregor Samsa.</strong>
|
||
|
||
<p>Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack!" my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. </p>
|
||
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. </p>
|
||
</div>
|
||
<div id="tab-6" class="tab-pane">
|
||
<strong>Lorem ipsum dolor sit</strong>
|
||
|
||
<p>Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just </p>
|
||
|
||
<p>Who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee </p>
|
||
</div>
|
||
<div id="tab-7" class="tab-pane">
|
||
<strong>Aenean imperdiet</strong>
|
||
|
||
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. </p>
|
||
|
||
<p>Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack!" my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. </p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="ibox">
|
||
<div class="ibox-title">
|
||
<h5>Bootstrap Panels <small>Custom background colors.</small></h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4">
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
Default Panel
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="panel panel-primary">
|
||
<div class="panel-heading">
|
||
Primary Panel
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="panel panel-success">
|
||
<div class="panel-heading">
|
||
Success Panel
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-4">
|
||
<div class="panel panel-info">
|
||
<div class="panel-heading">
|
||
<i class="fa fa-info-circle"></i> Info Panel
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="panel panel-warning">
|
||
<div class="panel-heading">
|
||
<i class="fa fa-warning"></i> Warning Panel
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="panel panel-danger">
|
||
<div class="panel-heading">
|
||
Danger Panel with Footer
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
|
||
</div>
|
||
<div class="panel-footer">
|
||
Panel Footer
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>Collaps panels</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||
<i class="fa fa-wrench"></i>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-user">
|
||
<li><a href="#">Config option 1</a>
|
||
</li>
|
||
<li><a href="#">Config option 2</a>
|
||
</li>
|
||
</ul>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div class="panel-body">
|
||
<div class="panel-group" id="accordion">
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
<h5 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a>
|
||
</h5>
|
||
</div>
|
||
<div id="collapseOne" class="panel-collapse collapse in">
|
||
<div class="panel-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseTwo" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
<h4 class="panel-title">
|
||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapseThree" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="jumbotron">
|
||
<h1>Jumbotron</h1>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||
<p><a role="button" class="btn btn-primary btn-lg">Learn more</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="pull-right">
|
||
10GB of <strong>250GB</strong> Free.
|
||
</div>
|
||
<div>
|
||
<strong>Copyright</strong> Example Company © 2014-2015
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Mainly scripts -->
|
||
<script src="js/jquery-2.1.1.js"></script>
|
||
<script src="js/bootstrap.min.js"></script>
|
||
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
|
||
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
|
||
|
||
<!-- Custom and plugin javascript -->
|
||
<script src="js/inspinia.js"></script>
|
||
<script src="js/plugins/pace/pace.min.js"></script>
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|