"Discount Review"
Bootstrap 3.2.0 Snippet by DiTso

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <style type="text/css"> .nav-tabs li a, .nav-tabs li a:active, .nav-tabs li a:focus { outline:0px !important; -webkit-appearance:none; text-decoration:none; color: #000000;} /* panel */ .panel {margin-top: 25px;} .panel .panel-heading { padding: 5px 5px 0 5px;} .panel .nav-tabs {border-bottom: none;} </style> <style> .panel-edit { max-height: 0; overflow-y: hidden; top: -50px; border: 0px; -webkit-transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94); -moz-transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94); -o-transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94); transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94); } .open { max-height: 300px ; } #panel-content { padding: 10px; margin-top: 5px; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; height: 200px; background-color: #fcfcfc; } </style> <style> .switch { position: relative; display: inline-block; vertical-align: top; width: 102px; height: 31px; background-color: transparent; cursor: pointer; box-sizing: content-box; overflow: hidden; } .switch-input:checked ~ .switch-handle { left: 70px; } .switch-label { border-color: blue; border-width:2px; border-radius: 2px; position: relative; display: block; height: 30px; font-size: 15px; text-transform: uppercase; background: none repeat scroll 0% 0% white; transition: all 0.15s ease-out 0s; } .switch-handle { position: absolute; top: 2px; left: 2px; width: 30px; height: 26px; border-width:1px; border-color: r; border-radius: 1px; background: none repeat scroll 0% 0% white; transition: left 0.15s ease-out 0s; background-color: red; } .switch-input { position: absolute; top: 0px; left: 0px; opacity: 0; } .switch-label:before, .switch-label:after { position: absolute; top: 50%; margin-top: -0.5em; line-height: 1; transition: inherit; } .switch-label:before { content: attr(data-off); right: 11px; color: rgb(209, 212, 215); } .switch-label:after { content: attr(data-on); left: 11px; border-color: red; opacity: 0; } .switch-input:checked ~ .switch-label { background: none repeat scroll 0% 0% red; } .switch-input:checked ~ .switch-label:before { opacity: 0; } .switch-input:checked ~ .switch-label:after { opacity: 1; } .switch-default > .switch-input:checked ~ .switch-label { background: none repeat scroll 0% 0% rgb(209, 212, 215); } </style> <style> .form-control { background-color: #fff; background-image: none; border-radius: 4px; box-shadow: none; outline: none; border-width: 2px; color: #555; display: block; font-size: 14px; height: 34px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } .form-control:focus { border-color: #66afe9; box-shadow: none; outline: none; border-width: 2px; } </style> <div class="container" style="padding-top: 25px;"> <div class="panel panel-default"> <div class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Project name</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#cant-do-all-the-work-for-you" data-toggle="tooltip" data-placement="top" title="Add Contact"><i class="glyphicon glyphicon-plus"></i></a></li> <li><a href="#" class="hide-search" data-command="toggle-search" data-toggle="tooltip" data-placement="top" title="Toggle Search"><i class="glyphicon glyphicon-cog"></i></a></li> </ul> </div> </div> <div class="panel-edit" id="panel-edit"> <div id="panel-content"> <form class="form-horizontal" > <div class="col-sm-4"> <div class="form-group"> <label for="name" class="col-sm-5 control-label">Test Mode</label> <div class="col-sm-7"> <label class="switch switch-default pull right"> <input class="switch-input" checked="checked" type="checkbox"> <span class="switch-label" data-on="ON" data-off="OFF"></span> <span class="switch-handle"></span> </label> </div> </div> <div class="form-group"> <label for="name1" class="col-sm-5 control-label">Email Address</label> <div class="col-sm-7"> <input type="text" name="name1" class="form-control" placeholder="control1" /> </div> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label for="name" class="col-xs-4 control-label">Label1</label> <div class="col-xs-8"> <input type="text" class="form-control" placeholder="control1" /> </div> </div> <div class="form-group"> <label for="name" class="col-xs-4 control-label">label2</label> <div class="col-xs-8"> <input type="text" class="form-control" placeholder="control2" /> </div> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label for="name" class="col-xs-4 control-label">Label1</label> <div class="col-xs-8"> <input type="text" class="form-control" placeholder="control1" /> </div> </div> <div class="form-group"> <label for="name" class="col-xs-4 control-label">label2</label> <div class="col-xs-8"> <input type="text" class="form-control" placeholder="control2" /> </div> </div> </div> Select events and click below<BR> <BR> <INPUT TYPE="submit" CLASS="btn btn-outline btn-default" id="toggle" VALUE="Submit"> </form> </div> </div> <div class="row" style="display: none;"> <div class="col-xs-12"> <div class="input-group c-search"> <input type="text" class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button> </span> </div> </div> </div> <div class="panel-body"> <h3>Letters</h3> <FORM ACTION="" METHOD="post"> <INPUT TYPE="hidden" NAME="FormName" VALUE="PrintLetters"> <TABLE class="table table-striped"> <THEAD> <TR><TH>Print</TH><TH style="text-align:left">Subscription</TH><TH style="text-align:left">Venue</TH><TH>Date/Time</TH><TH>Quantity</TH></TR> </THEAD> <TBODY> <TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Winter)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR> <TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Spring)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR> <TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Summer)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR> <TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Fall)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR> </TBODY> </TABLE> Select events and click below<BR><BR> <INPUT TYPE="submit" CLASS="btn btn-outline btn-default" VALUE="Submit"> </FORM> </div> </div> </div>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); body { padding: 30px 0px 60px; } .panel > .list-group .list-group-item:first-child { /*border-top: 1px solid rgb(204, 204, 204);*/ } @media (max-width: 767px) { .visible-xs { display: inline-block !important; } .block { display: block !important; width: 100%; height: 1px !important; } } #back-to-bootsnipp { position: fixed; top: 10px; right: 10px; } .c-search > .form-control { border-radius: 0px; border-width: 0px; border-bottom-width: 1px; font-size: 1.3em; padding: 12px 12px; height: 44px; outline: none !important; } .c-search > .form-control:focus { outline:0px !important; -webkit-appearance:none; box-shadow: none; } .c-search > .input-group-btn .btn { border-radius: 0px; border-width: 0px; border-left-width: 1px; border-bottom-width: 1px; height: 44px; } .c-list { padding: 0px; min-height: 44px; } .title { display: inline-block; font-size: 1.7em; font-weight: bold; padding: 5px 15px; } ul.c-controls { list-style: none; margin: 0px; min-height: 44px; } ul.c-controls li { margin-top: 8px; float: left; } ul.c-controls li a { font-size: 1.7em; padding: 11px 10px 6px; } ul.c-controls li a i { min-width: 24px; text-align: center; } ul.c-controls li a:hover { background-color: rgba(51, 51, 51, 0.2); } .c-toggle { font-size: 1.7em; } .name { font-size: 1.7em; font-weight: 700; } .c-info { padding: 5px 10px; font-size: 1.25em; }
$(function () { /* BOOTSNIPP FULLSCREEN FIX */ if (window.location == window.parent.location) { $('#back-to-bootsnipp').removeClass('hide'); } $('[data-toggle="tooltip"]').tooltip(); $('#fullscreen').on('click', function(event) { event.preventDefault(); window.parent.location = "http://bootsnipp.com/iframe/4l0k2"; }); $('a[href="#cant-do-all-the-work-for-you"]').on('click', function(event) { event.preventDefault(); $('#cant-do-all-the-work-for-you').modal('show'); }) $('[data-command="toggle-search"]').on('click', function(event) { event.preventDefault(); $(this).toggleClass('hide-search'); if ($(this).hasClass('hide-search')) { $('.c-search').closest('.row').slideUp(100); }else{ $('.c-search').closest('.row').slideDown(100); } }) $('#contact-list').searchable({ searchField: '#contact-list-search', selector: 'li', childSelector: '.col-xs-12', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });

Related: See More


Questions / Comments: