HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="margin-top: 100px;">
         <div class="row">
            <section>
               <div class="wizard">
                  <div class="wizard-inner">
                     <div class="connecting-line"></div>
                     <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                           <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Departamento Pessoal">
                           <span class="round-tab">
                           Departamento Pessoal
                           </span>
                           </a>
                        </li>
                        <li role="presentation" class="disabled">
                           <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Recursos Humanos">
                           <span class="round-tab">
                           Recursos Humanos
                           </span>
                           </a>
                        </li>
                        <li role="presentation" class="disabled">
                           <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Assessoria Contábil">
                           <span class="round-tab">
                           Assessoria Contábil
                           </span>
                           </a>
                        </li>
                        <li role="presentation" class="disabled">
                           <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Assessoria Tributária">
                           <span class="round-tab">
                           Assessoria Tributária
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.title {
         display: block;
         font-weight: bold;
         font-size: 1.5em;
         }
         .desc {
         display: block;
         font-size: 1.5em;
         }
         .price {
         font-size: 1.25em;
         }
         .panel-body {
         min-height: 7em;
         }
         .btn-group .btn span,
         .btn-group .btn input[type='checkbox'] {
         padding-top: 0.5em;
         padding-bottom: 0em;
         }
         .total-area {
         margin-top: 2em;
         font-weight: bold;
         text-align: right;
         }
         .btn-group .btn label {
         cursor: pointer;
         }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function () {
         //Initialize tooltips
         $('.nav-tabs > li a[title]').tooltip();
         
         //Wizard
         $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
         
           var $target = $(e.target);
         
           if ($target.parent().hasClass('disabled')) {
               return false;
           }
         });
         
         $(".next-step").click(function (e) {
         
           var $active = $('.wizard .nav-tabs li.active');
           $active.next().removeClass('disabled');
           nextTab($active);
         
         });
         $(".prev-step").click(function (e) {
         
           var $active = $('.wizard .nav-tabs li.active');
           prevTab($active);
         
         });
         });
         
         function nextTab(elem) {
         $(elem).next().find('a[data-toggle="tab"]').click();
         }
         function prevTab(elem) {
         $(elem).prev().find('a[data-toggle="tab"]').click();
         }
         var checkOptions = {
         id: "",
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Orçamento Online - JK ASSESSORIA EMPRESARIAL"
Bootstrap 3.3.0 Snippet by Jorgedev

Related: See More

Questions / Comments:

"Orçamento Online - JK ASSESSORIA EMPRESARIAL" Bootstrap 3.3.0 Snippet by Jorgedev

Related: See More

Questions / Comments:

"Orçamento Online - JK ASSESSORIA EMPRESARIAL"
Bootstrap 3.3.0 Snippet by Jorgedev