"Multiple Theme Navbar"
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> <link href="http://netdna.bootstrapcdn.com/bootswatch/3.0.3/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" title="theme"> <style> * { transition: all 1s ease-in-out; } body {background-color: white;} .navbar-basic { background-color: #F8F8F8; background-image: linear-gradient(#F8F8F8, #F8F8F8 1%, #F8F8F8); border-color: #E7E7E7; border-width:1px; border-radius: 6px; } .navbar-left .btn {margin-left: 10px;} .navbar-right .btn {margin-right: 10px;} </style> </head> <body> <BR></BR> <div class="row"> <div class="container" style="width:990px;"> <div class="row"> <div class="col-lg-4"> <div class="well"> <form class="bs-example form-horizontal"> <fieldset> <legend>Theme Selector</legend> <div class="form-group"> <label for=""theme_name"" class="col-lg-4 control-label">Theme</label> <div class="col-lg-8"> <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"> <div class="col-lg-8 col-lg-offset-4"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </fieldset> </form> </div> </div> </div> </div> <!-- My Nav Bar --> <div class="row"> <div class="container" style="width:990px;"> <nav class="navbar navbar-basic" 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="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-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 "> GO </button> </div> </div> </form> </div> <div class="navbar-nav navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="label-icon">Preferences</span> </button> </div> </div> <div class=" navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-bell"></span> <span class="label-icon">Alerts</span> </button> </div> </div> </nav> </div> </div> <hr> <!-- Nav Bar 4 --> <div class="row"> <div class="container" style="width:990px;"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">4 Inv</a> </div> <div class="navbar-collapse collapse navbar-inverse-collapse"> <div class="navbar-btn navbar-left" style="margin-right:10px;"> <button class="btn btn-default btn-outline"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">Def Out</span> </button> </div> <div class="navbar-btn navbar-left" style="margin-right:10px;"> <button class="btn btn-default"> <span class="glyphicon glyphicon-dashboard"></span> <span class="label-icon">Def Sld</span> </button> </div> <div class="navbar-btn navbar-left" style="margin-left:10px;"> <button class="btn btn-primary btn-outline"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">Pri Out</span> </button> </div> <div class="navbar-btn navbar-left" style="margin-left:10px;"> <button class="btn btn-primary"> <span class="glyphicon glyphicon-dashboard"></span> <span class="label-icon">Pri Sld</span> </button> </div> <div class="navbar-btn navbar-left" style="margin-left:10px;"> <button class="btn btn-info btn-outline"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">info Out</span> </button> </div> <div class="navbar-btn navbar-left" style="margin-left:10px;"> <button class="btn btn-info"> <span class="glyphicon glyphicon-dashboard"></span> <span class="label-icon">info Sld</span> </button> </div> <div class="navbar-btn navbar-left" style="margin-left:5px; margin-right:5px;"> <button class="btn btn-inverse btn-outline"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">inv Out</span> </button> </div> </div> </nav> </div> </div> <!-- 3 navbar --> <div class="row"> <div class="container" style="width:990px;"> <nav class="navbar navbar-default"> <a class="navbar-brand" href="#">3 Def</a> <div class="navbar-header"> <div class="navbar-btn navbar-left" > <button class="btn btn-primary btn-outline"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">Pri Out</span> </button> </div> <div class="navbar-btn navbar-left" > <button class="btn btn-primary"> <span class="glyphicon glyphicon-dashboard"></span> <span class="label-icon">Pri Sld</span> </button> </div> </div> <div class="nav navbar-nav"> <form class="navbar-form navbar-search" role="search"> <div class="input-group"> <div class="input-group-btn navbar-btn"> <button type="button" class="btn btn-default 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-left" > <button class="btn btn-default btn-outline"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">Def Out</span> </button> </div> </nav><!-- /.nav-collapse --> </div> </div> <hr> <div class="row"> <div class="container" style="width:990px;"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">2 Def</a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdown header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav><!-- /.navbar --> </div> </div> <div class="row"> <div class="container" style="width:990px;"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">1 Inv</a> </div> <div class="navbar-collapse collapse navbar-inverse-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdown header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div><!-- /.navbar --> </nav><!-- /example --> </div> </div> </body> </html>
$(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("icon_label",$('input[name="icon_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 icon_label = localStorage.getItem( "icon_label" ); $("#background_color").val(background_color); $("#text_color").val(text_color); $("#text_size").val(text_size); $("#theme_name").val(theme_name); $("#icon_label").val(icon_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 stored_icon_label = localStorage.getItem("icon_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); if(stored_icon_label=="Yes") { $(".icon_label").show(); } if(stored_icon_label=="No") { $(".icon_label").hide(); } 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: