"Register la vitrina"
Bootstrap 3.3.0 Snippet by miguelbustamante

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container login"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <div class="panel with-nav-tabs panel-warning"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1warning" data-toggle="tab">Empresa</a></li> <li><a href="#tab2warning" data-toggle="tab">Personal</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1warning"> <div class="row"> <div class="col-lg-12 col-md-12"> <form role="form"> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="First Name" tabindex="1"> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="Last Name" tabindex="2"> </div> </div> </div> <div class="form-group"> <input type="text" name="display_name" id="display_name" class="form-control input-lg" placeholder="Display Name" tabindex="3"> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" tabindex="4"> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5"> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="6"> </div> </div> </div> <div class="row"> <div class="col-xs-4 col-sm-3 col-md-3"> <span class="button-checkbox"> <button type="button" class="btn" data-color="info" tabindex="7">I Agree</button> <input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1"> </span> </div> <div class="col-xs-8 col-sm-9 col-md-9"> By clicking <strong class="label label-primary">Register</strong>, you agree to the <a href="#" data-toggle="modal" data-target="#t_and_c_m">Terms and Conditions</a> set out by this site, including our Cookie Use. </div> </div> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div> <div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">Sign In</a></div> </div> </form> </div> </div> </div> <div class="tab-pane fade" id="tab2warning"> <div class="row"> <div class="col-lg-12 col-md-12"> <form role="form"> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="First Name" tabindex="1"> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="Last Name" tabindex="2"> </div> </div> </div> <div class="form-group"> <input type="text" name="display_name" id="display_name" class="form-control input-lg" placeholder="Display Name" tabindex="3"> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" tabindex="4"> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5"> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="6"> </div> </div> </div> <div class="row"> <div class="col-xs-4 col-sm-3 col-md-3"> <span class="button-checkbox"> <button type="button" class="btn" data-color="info" tabindex="7">I Agree</button> <input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1"> </span> </div> <div class="col-xs-8 col-sm-9 col-md-9"> By clicking <strong class="label label-primary">Register</strong>, you agree to the <a href="#" data-toggle="modal" data-target="#t_and_c_m">Terms and Conditions</a> set out by this site, including our Cookie Use. </div> </div> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div> <div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">Sign In</a></div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">I Agree</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div>
/* Credit to bootsnipp.com for the css for the color graph */ .colorgraph { height: 5px; border-top: 0; background: #FF9600; } .login h2{ color: #FFE270; } .panel.with-nav-tabs .panel-heading{ padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs{ border-bottom: none; } .panel.with-nav-tabs .nav-justified{ margin-bottom: -1px; } /********************************************************************/ /*** PANEL DEFAULT ***/ .with-nav-tabs.panel-default .nav-tabs > li > a, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; } .with-nav-tabs.panel-default .nav-tabs > .open > a, .with-nav-tabs.panel-default .nav-tabs > .open > a:hover, .with-nav-tabs.panel-default .nav-tabs > .open > a:focus, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus { color: #777; background-color: #ddd; border-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.active > a, .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus { color: #555; background-color: #fff; border-color: #ddd; border-bottom-color: transparent; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu { background-color: #f5f5f5; border-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #777; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #555; } /********************************************************************/ /*** PANEL PRIMARY ***/ .with-nav-tabs.panel-primary .nav-tabs > li > a, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > .open > a, .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover, .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; background-color: #3071a9; border-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.active > a, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { color: #428bca; background-color: #fff; border-color: #428bca; border-bottom-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu { background-color: #428bca; border-color: #3071a9; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #3071a9; } .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { background-color: #4a9fe9; } /********************************************************************/ /*** PANEL SUCCESS ***/ .with-nav-tabs.panel-success .nav-tabs > li > a, .with-nav-tabs.panel-success .nav-tabs > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li > a:focus { color: #3c763d; } .with-nav-tabs.panel-success .nav-tabs > .open > a, .with-nav-tabs.panel-success .nav-tabs > .open > a:hover, .with-nav-tabs.panel-success .nav-tabs > .open > a:focus, .with-nav-tabs.panel-success .nav-tabs > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li > a:focus { color: #3c763d; background-color: #d6e9c6; border-color: transparent; } .with-nav-tabs.panel-success .nav-tabs > li.active > a, .with-nav-tabs.panel-success .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.active > a:focus { color: #3c763d; background-color: #fff; border-color: #d6e9c6; border-bottom-color: transparent; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu { background-color: #dff0d8; border-color: #d6e9c6; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #3c763d; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #d6e9c6; } .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #3c763d; } /********************************************************************/ /*** PANEL INFO ***/ .with-nav-tabs.panel-info .nav-tabs > li > a, .with-nav-tabs.panel-info .nav-tabs > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li > a:focus { color: #31708f; } .with-nav-tabs.panel-info .nav-tabs > .open > a, .with-nav-tabs.panel-info .nav-tabs > .open > a:hover, .with-nav-tabs.panel-info .nav-tabs > .open > a:focus, .with-nav-tabs.panel-info .nav-tabs > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li > a:focus { color: #31708f; background-color: #bce8f1; border-color: transparent; } .with-nav-tabs.panel-info .nav-tabs > li.active > a, .with-nav-tabs.panel-info .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.active > a:focus { color: #31708f; background-color: #fff; border-color: #bce8f1; border-bottom-color: transparent; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu { background-color: #d9edf7; border-color: #bce8f1; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #31708f; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #bce8f1; } .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #31708f; } /********************************************************************/ /*** PANEL WARNING ***/ .with-nav-tabs.panel-warning .nav-tabs > li > a, .with-nav-tabs.panel-warning .nav-tabs > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li > a:focus { color: #8a6d3b; } .with-nav-tabs.panel-warning .nav-tabs > .open > a, .with-nav-tabs.panel-warning .nav-tabs > .open > a:hover, .with-nav-tabs.panel-warning .nav-tabs > .open > a:focus, .with-nav-tabs.panel-warning .nav-tabs > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li > a:focus { color: #8a6d3b; background-color: #faebcc; border-color: transparent; } .with-nav-tabs.panel-warning .nav-tabs > li.active > a, .with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus { color: #8a6d3b; background-color: #fff; border-color: #faebcc; border-bottom-color: transparent; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu { background-color: #fcf8e3; border-color: #faebcc; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #8a6d3b; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #faebcc; } .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; background-color: #8a6d3b; } /********************************************************************/ /*** PANEL DANGER ***/ .with-nav-tabs.panel-danger .nav-tabs > li > a, .with-nav-tabs.panel-danger .nav-tabs > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li > a:focus { color: #a94442; } .with-nav-tabs.panel-danger .nav-tabs > .open > a, .with-nav-tabs.panel-danger .nav-tabs > .open > a:hover, .with-nav-tabs.panel-danger .nav-tabs > .open > a:focus, .with-nav-tabs.panel-danger .nav-tabs > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li > a:focus { color: #a94442; background-color: #ebccd1; border-color: transparent; } .with-nav-tabs.panel-danger .nav-tabs > li.active > a, .with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus { color: #a94442; background-color: #fff; border-color: #ebccd1; border-bottom-color: transparent; } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu { background-color: #f2dede; /* bg color */ border-color: #ebccd1; /* border color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a { color: #a94442; /* normal text color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus { background-color: #ebccd1; /* hover bg color */ } .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus { color: #fff; /* active text color */ background-color: #a94442; /* active bg color */ }
$(function(){ $('[data-toggle="popover"]').popover(); $('.button-checkbox').each(function(){ var $widget = $(this), $button = $widget.find('button'), $checkbox = $widget.find('input:checkbox'), color = $button.data('color'), settings = { on: { icon: 'glyphicon glyphicon-check' }, off: { icon: 'glyphicon glyphicon-unchecked' } }; $button.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')); $checkbox.triggerHandler('change'); updateDisplay(); }); $checkbox.on('change', function () { updateDisplay(); }); function updateDisplay() { var isChecked = $checkbox.is(':checked'); // Set the button's state $button.data('state', (isChecked) ? "on" : "off"); // Set the button's icon $button.find('.state-icon') .removeClass() .addClass('state-icon ' + settings[$button.data('state')].icon); // Update the button's color if (isChecked) { $button .removeClass('btn-default') .addClass('btn-' + color + ' active'); } else { $button .removeClass('btn-' + color + ' active') .addClass('btn-default'); } } function init() { updateDisplay(); // Inject the icon if applicable if ($button.find('.state-icon').length == 0) { $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> '); } } init(); }); });

Related: See More


Questions / Comments: