"Admin Nav Bar - Buttons - v3"
Bootstrap 3.1.0 Snippet by escapedlion

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39"> <title>Support</title> <!-- Force IE to turn off past version compatibility mode and use current version mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <!-- Get the width of the users display--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Text encoded as UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- icons --> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <!-- bootstrap --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default"> <!-- theme --> <link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <style> body {background-color: white;} table#TixManagementContent {background-color: #fff;} .navbar-btn.navbar-left {margin-left: 10px;} .navbar-btn.navbar-right {margin-right: 10px;} </style> </head> <body> <!-- start header --> <center> <table width="990px" id="TixManagementContent" class="TixManagementContent" background-color:""red""> <tbody> <tr> <td align="left"> <div id="boxed-page"> <div id="wrapper" class="bootstrap"> <!-- end header --> <div class="row"> <nav class="navbar navbar-default" role="navigation"> <div class=" navbar-btn navbar-left"> <button class="btn btn-default"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">Menu</span> </button> </div> <div class=" navbar-btn navbar-left"> <button class="btn btn-default"> <span class="glyphicon glyphicon-dashboard"></span> <span class="label-icon">Dashboard</span> </button> </div> <div class="nav navbar-nav"> <form class="navbar-form navbar-search" role="search"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default btn-outline btn-search dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-search"></span> <span class="label-icon">Search</span> <span class="caret"></span> </button> <ul class="dropdown-menu pull-left" role="menu"> <li> <a href="#" data-width="widthUser"> <span class="glyphicon glyphicon-user"></span> <span class="label-icon">Search By User</span> </a> </li> <li> <a href="#" data-width="widthOrg"> <span class="glyphicon glyphicon-book"></span> <span class="label-icon">Search By Organization</span> </a> </li> <li> <a href="#" data-width="widthSearch"> <span class="glyphicon glyphicon-search"></span> <span class="label-icon">Search</span> </a> </li> </ul> </div> <div id="search-text-input" class="widthSearch"> <input type="text" class="form-control"> </div> <div class="input-group-btn"> <button class="btn btn-default btn-outline"> GO </button> </div> </div> </form> </div> <div class="navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="label-icon">Preferences</span> </button> <ul class="dropdown-menu" style="width:300px; padding:0px;"> <li> <form class="form-horizontal" id="preferences" action="" method="post" accept-charset="utf-8"> <div class="panel panel-default" id="preferences" style="margin:0px;"> <div class="panel-heading"> <span class="glyphicon glyphicon-wrench"></span> <span class="panel-label">User Preferences</span> </div> <div class="panel-body"> <div class="form-group"> <label for="theme_name"class="col-lg-6 control-label" style="font-color:#000000"> Theme </label> <div class="col-lg-6"> <select class="form-control" id="theme_name" name="theme_name"> <option value="amelia"> Amelia </option> <option value="bootstrap"> Default </option> <option value="cerulean"> Cerulean </option> <option value="cosmo"> Cosmo </option> <option value="cyborg"> Cyborg </option> <option selected value="flatly"> Flatly </option> <option value="journal"> Journal </option> <option value="readable"> Readable </option> <option value="simplex"> Simplex </option> <option value="slate"> Slate </option> <option value="spacelab"> Spacelab </option> <option value="united"> United </option> <option value="yeti"> Yeti </option> <option value="whiteplum"> WhitePlum </option> </select> </div> </div> <div class="form-group"> <label for="background_color" class="col-lg-6 control-label" style="font-color:#000000"> Background </label> <div class="col-lg-6"> <select class="form-control" id="background_color" name="background_color"> <option selected value="#FFFFFF"> White </option> <option value="#C0C0C0"> Silver </option> <option value="#808080"> Gray </option> <option value="#000000"> Black </option> <option value="#FF0000"> Red </option> <option value="#800000"> Maroon </option> <option value="#FFFF00"> Yellow </option> <option value="#808000"> Olive </option> <option value="#00FF00"> Lime </option> <option value="#008000"> Green </option> <option value="#00FFFF"> Aqua </option> <option value="#008080"> Teal </option> <option value="#0000FF"> Blue </option> <option value="#000080"> Navy </option> <option value="#FF00FF"> Fuchsia </option> <option value="#800080"> Purple </option> <option value="#e0e0e0"> Tix </option> </select> </div> </div> <div class="form-group"> <label for="text_color" class="col-lg-6 control-label" style="font-color:#000000"> Text Color </label> <div class="col-lg-6"> <select class="form-control" id="text_color" name="text_color"> <option value="#FFFFFF"> White </option> <option value="#C0C0C0"> Silver </option> <option value="#808080"> Gray </option> <option selected value="#000000"> Black </option> <option value="#FF0000"> Red </option> <option value="#800000"> Maroon </option> <option value="#FFFF00"> Yellow </option> <option value="#808000"> Olive </option> <option value="#00FF00"> Lime </option> <option value="#008000"> Green </option> <option value="#00FFFF"> Aqua </option> <option value="#008080"> Teal </option> <option value="#0000FF"> Blue </option> <option value="#000080"> Navy </option> <option value="#FF00FF"> Fuchsia </option> <option value="#800080"> Purple </option> </select> </div> </div> <div class="form-group"> <label for="text_size" class="col-lg-6 control-label" style="font-color:#000000"> Text size </label> <div class="col-lg-6"> <select class="form-control" id="text_size" name="text_size"> <option value="32">32px</option> <option value="24">24px</option> <option value="20">20px</option> <option value="16">16px</option> <option value="12" selected>12px</option> </select> </div> </div> <div class="form-group"> <label class="col-lg-6 control-label" style="font-color:#000000"> Icon Label </label> <div class="col-lg-6"> <label class="radio-inline"> <input id="inlineradio1" name="display_label" value="" type="radio">Show </label> <label class="radio-inline"> <input id="inlineradio2" name="display_label" value="hide" type="radio">Hide </label> </div> </div> </div> <div class="panel-footer"> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="submit" class="btn btn-primary" style="width:80px;">Update</button> <button type="submit" class="btn btn-default" style="width:80px;">Reset</button> </div> </div> </div> </div> </form> </li> </ul> </div> </div> <div class="navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default btn-outline dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-bell"></span> <span class="label-icon">Alerts</span> </button> <ul class="dropdown-menu" style="width:500px; padding:0px;"> <li> <div class="col-lg-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><i class="fa fa-money"></i> Recent Transactions</h3> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-hover table-striped tablesorter"> <thead> <tr> <th>Order # <i class="fa fa-sort"></i></th> <th>Order Date <i class="fa fa-sort"></i></th> <th>Name <i class="fa fa-sort"></i></th> <th>Amount <i class="fa fa-sort"></i></th> </tr> </thead> <tbody> <tr> <td>3326</td> <td>10/21/2013</td> <td>3:29 PM</td> <td>$321.33</td> </tr> <tr> <td>3325</td> <td>10/21/2013</td> <td>3:20 PM</td> <td>$234.34</td> </tr> <tr> <td>3324</td> <td>10/21/2013</td> <td>3:03 PM</td> <td>$724.17</td> </tr> <tr> <td>3323</td> <td>10/21/2013</td> <td>3:00 PM</td> <td>$23.71</td> </tr> <tr> <td>3322</td> <td>10/21/2013</td> <td>2:49 PM</td> <td>$8345.23</td> </tr> <tr> <td>3321</td> <td>10/21/2013</td> <td>2:23 PM</td> <td>$245.12</td> </tr> <tr> <td>3320</td> <td>10/21/2013</td> <td>2:15 PM</td> <td>$5663.54</td> </tr> <tr> <td>3319</td> <td>10/21/2013</td> <td>2:13 PM</td> <td>$943.45</td> </tr> </tbody> </table> </div> <div class="text-right"> <a href="#">View All Transactions <i class="fa fa-arrow-circle-right"></i></a> </div> </div> </div> </div> </div><!-- /.row --> </div><!-- /#page-wrapper --> </div><!-- /#wrapper --> </li> </ul> </div> </div> </nav> <!-- /.navbar-collapse --> </div> <div class="row"> <div class="well"> <h1><span class="current-theme">Bootstrap</span></h1> <p> <button type="button" class="btn btn-lg btn-primary">Primary</button> <button type="button" class="btn btn-lg btn-inverse">Inverse</button> <button type="button" class="btn btn-lg btn-info">Info</button> <button type="button" class="btn btn-lg btn-warning">Warning</button> <button type="button" class="btn btn-lg btn-danger">Danger</button> <button type="button" class="btn btn-lg btn-success">Success</button> <button type="button" class="btn btn-lg btn-default">Default</button> </p> <p> <button type="button" class="btn btn-primary btn-outline">Primary</button> <button type="button" class="btn btn-lg btn-outline btn-inverse">Inverse</button> <button type="button" class="btn btn-lg btn-outline btn-info">Info</button> <button type="button" class="btn btn-lg btn-outline btn-warning">Warning</button> <button type="button" class="btn btn-lg btn-outline btn-danger">Danger</button> <button type="button" class="btn btn-lg btn-outline btn-success">Success</button> <button type="button" class="btn btn-lg btn-outline btn-default">Default</button> </p> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> <span class="glyphicon glyphicon-dash"></span> Organization Dashboard </h3> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-2"> <a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;"> <div id="box_1"><span class="fa fa-clock-o fa-3x"></span></div> <div id="box_2" class="icon-label">Time Zone</div> <button class="btn btn-default btn-block">Pacific</button> </a> </div> <div class="col-lg-2"> <a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;"> <div id="box_1"><span class="fa fa-desktop fa-3x"></span></div> <div id="box_2" class="icon-label">Platform</div> <button class="btn btn-default btn-block">Tix2</button> </a> </div> <div class="col-lg-2"> <a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;"> <div id="box_1"><span class="fa fa-shopping-cart fa-3x"></span></div> <div id="box_2" class="icon-label">Gateway</div> <button class="btn btn-default btn-block">Authorize.net</button> </a> </div> <div class="col-lg-2"> <a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;"> <div id="box_1"><span class="fa fa-print fa-3x"></span></div> <div id="box_2" class="icon-label">Fullfilment</div> <button class="btn btn-default btn-block">Yes</button> </a> </div> <div class="col-lg-2"> <a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;"> <div id="box_1"><span class="fa fa-suitcase fa-3x"></span></div> <div id="box_2" class="icon-label">Sales Rep</div> <button class="btn btn-default btn-block">Silvia Mahoney</button> </a> </div> <div class="col-lg-2"> <a href="#" class="btn btn-primary btn-lg btn-block dash-widget" role="button" style="padding:2px;"> <div id="box_1"><span class="fa fa-user fa-3x"></span></div> <div id="box_2" class="icon-label">Contact</div> <button class="btn btn-default btn-block">Steve Moore</button> </a> </div> </div> </div> </div> </div> <!-- start footer --> </div> </div> </td> </tr> </tbody> </table> </center> <!-- end footer --> </body>
@import url("//netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css"); @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"); body {background-color: white;} .btn-outline { background-color: transparent; color: inherit; transition: all .5s; } .btn-inverse { background-color: #ffffff; color: inherit; transition: all .5s; } .btn-primary.btn-outline { color: #428bca; } .btn-success.btn-outline { color: #5cb85c; } .btn-info.btn-outline { color: #5bc0de; } .btn-warning.btn-outline { color: #f0ad4e; } .btn-danger.btn-outline { color: #d9534f; } .btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { color: #fff; }
$(function(){ $(".input-group-btn .dropdown-menu li a").click(function(){ var selText = $(this).html(); //working version - for single button // //$('.btn:first-child').html(selText+'<span class="caret"></span>'); //working version - for multiple buttons // $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText+'<span class="caret"></span>'); }); }); function save_settings() { localStorage.setItem("background_color" , $( "#background_color" ).val()); localStorage.setItem("text_color", $( "#text_color" ).val()); localStorage.setItem("text_size", $( "#text_size" ).val()); localStorage.setItem("theme_name", $( "#theme_name" ).val()); localStorage.setItem("display_label",$('input[name="display_label"]:checked').val()); apply_preferences_to_page(); } function load_settings() { var background_color = localStorage.getItem( "background_color" ); var text_color = localStorage.getItem( "text_color" ); var text_size = localStorage.getItem( "text_size" ); var theme_name = localStorage.getItem( "theme_name" ); var display_label = localStorage.getItem( "display_label" ); $("#background_color").val(background_color); $("#text_color").val(text_color); $("#text_size").val(text_size); $("#theme_name").val(theme_name); $("#display_label").val(display_label); apply_preferences_to_page(); } function apply_preferences_to_page() { var background_color = localStorage.getItem( "background_color"); var text_color = localStorage.getItem("text_color"); var text_size = localStorage.getItem("text_size"); var theme_name = localStorage.getItem("theme_name"); var display_label = localStorage.getItem("display_label"); $("body").css("backgroundColor",background_color); $("body").css("color",$("#text_color").val()); $("body").css("fontSize",$("#text_size").val() + "px"); $("body").attr("class",theme_name); $('link[title="theme"]').attr('href','http://netdna.bootstrapcdn.com/bootswatch/3.0.3/'+theme_name+'/bootstrap.min.css'); $(".current-theme").html(theme_name); $(".label-filter").html(theme_name); $(".label-icon").attr("class","label-icon "+display_label); display_preferences(); } function display_preferences() { //the variable that will hold the results var dataLog = ""; var i = 0; //how many items are in the database starting with zero var logLength = localStorage.length-1; dataLog = "<thead><tr class='active'><th>Item Name</th><th>Item Data</th></tr></thead><tbody>" //now we are going to loop through each item in the database for (i = 0; i <= logLength; i++) { //lets setup some variables for the key and values var itemKey = localStorage.key(i); var itemData = localStorage.getItem(itemKey); //now that we have the item, lets add it to the table dataLog += '<tr><td>'+itemKey+'</td><td>'+itemData+'</td></tr>'; } //if there were no items in the database if (dataLog == "") dataLog = '<li class="empty">Log Currently Empty</li>'; //update the ul with the list items $("#theLog").html(dataLog); } $(function() { load_settings(); $('form#preferences').submit(function(event){ event.preventDefault(); save_settings(); }); }); </script>

Related: See More


Questions / Comments: