O Bootstrap 3 possui uma opção de etapas pré-construídas para formulários?

Question

Não foi possível encontrar nada nos documentos, mas talvez alguém saiba melhor ou possa sugerir uma solução alternativa usando as propriedades disponíveis para hackear juntos?

Se não estiver no bootstrap, alguém conhece uma gem (Rails) ou gerador que possa criar CSS/jQuery/JS?

Answer 1

Você também pode tentar esta versão do Assistente de Botorrap 3 Nav no GitHub, menos arquivo é incluído:

https://github.com/acornejo/bootstrap-nav-wizard

demo aqui: http://acornejo.github.io/bootstrap-nav-wizard/

Preview (orig):

Preview (personalizado):

Answer 2

Talvez você esteja procurando por isso.Confira a demonstração abaixo.Basta redimensionar a janela caso ela não se pareça com a imagem abaixo.

Violino

HTML

<h3>Wizard</h3>
<div class="wizard">
    <a><span class="badge">1</span> Set Global Properties</a>
    <a><span class="badge">2</span> Specify Entry Scheme</a>
    <a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
    <a><span class="badge">4</span> Check Your Data and Generate Portal</a>
</div>

CSS (ou SCSS em vez disso)

.wizard a {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}
.wizard a:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.wizard a:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
    border: none;
}
.wizard a:first-child {
    -webkit-border-radius: 4px 0 0 4px;
       -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
    -webkit-border-radius: 0 4px 4px 0;
       -moz-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
}
.wizard .badge {
    margin: 0 5px 0 18px;
    position: relative;
    top: -1px;
}
.wizard a:first-child .badge {
    margin-left: 0;
}
.wizard .current {
    background: #007ACC;
    color: #fff;
}
.wizard .current:after {
    border-left-color: #007ACC;
}