Using Wizard in HTML( .Net)
Add following Division in Html page
Add this in Document.ready()
$(document).ready(function () { $('#rootwizard').bootstrapWizard({ 'tabClass': 'bwizard-steps' }); });
Add the following CSS
.breadcrumb { background-color: transparent; } .breadcrumb > li + li:before { /*color: #CCCCCC;*/ padding: 0px; content: ""; } .breadcrumb > li { margin-bottom: 0px; padding: 0px; } .bwizard-steps { display: inline-block; margin: 0; padding: 0; background: #fff; } .bwizard-steps .active { color: #fff; background: #367fa9; } .bwizard-steps .active:after { border-left-color: #367fa9; } .bwizard-steps .active a { color: #fff; cursor: default; padding-top: 2px; } .bwizard-steps .active .label { background-color: #333; } .bwizard-steps .inactive { color: #fff; background: #00acd6; } .bwizard-steps .inactive:after { border-left-color: #00acd6; } .bwizard-steps .inactive a { color: #fff; cursor: default; padding-top: 2px; } .bwizard-steps .inactive .label { background-color: #333; } .bwizard-steps .label { position: relative; top: -1px; margin: 0 5px 0 0; padding: 1px 5px 2px; } .bwizard-steps li { display: inline-block; position: relative; /*margin-right: 5px;*/ padding: 12px 17px 5px 30px; *display: inline; *padding-left: 17px; background:#00c0ef; line-height: 13px; list-style: none; zoom: 1; margin-bottom: 10px; } .bwizard-steps li:first-child { padding-left: 12px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .bwizard-steps li:first-child:before { border: none; } .bwizard-steps li:last-child { margin-right: 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .bwizard-steps li:last-child:after { border: none; } .bwizard-steps li:before { position: absolute; left: 0; top: 0; height: 0; width: 0; border-bottom: 15px inset transparent; border-left: 15px solid #fff; border-top: 15px inset transparent; content: ""; } .bwizard-steps li:after { position: absolute; right: -15px; top: 0; height: 0; width: 0; border-bottom: 15px inset transparent; border-left: 15px solid #00c0ef; border-top: 15px inset transparent; content: ""; z-index: 2; } .bwizard-steps a { color:#fff; } .bwizard-steps a:hover { text-decoration: none; } .bwizard-steps.clickable li:not(.active) { cursor: pointer; } .bwizard-steps.clickable li:hover:not(.active) { background: #ccc; } .bwizard-steps.clickable li:hover:not(.active):after { border-left-color: #ccc; } .bwizard-steps.clickable li:hover:not(.active) a { color: #08c; } @media (max-width: 10px) { /* badges only on small screens */ .bwizard-steps li:after, .bwizard-steps li:before { border: none; } .bwizard-steps li, .bwizard-steps li.active, .bwizard-steps li:first-child, .bwizard-steps li:last-child { margin-right: 0; padding: 0; background-color: transparent; } }
Using Wizard in HTML( .Net)
Reviewed by Rejeti Praveen Kumar
on
03:50
Rating:

No comments: