Pestañas

Este componente sólo se puede usar en sitios externos a argentina.gob.ar.

Tabs

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus porro officia hic fugit nihil, rem dolorum inventore nulla, dignissimos aut. Beatae omnis asperiores incidunt, reprehenderit suscipit eligendi? Voluptas, facilis, eveniet.

Sección

Contacto


                      <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
                            <li><a data-toggle="tab" href="#seccion">Sección</a></li>
                            <li><a data-toggle="tab" href="#contacto">Contacto</a></li>
                      </ul>
                      <div class="tab-content bg-white" style="padding:20px;border: 1px solid #ddd;border-top:none;">
                            <div id="home" class="tab-pane fade in active">
                                <h3>HOME</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, facilis, eveniet.</p>
                            </div>
                            <div id="seccion" class="tab-pane fade">
                                <h3>Sección</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, facilis, eveniet.</p>
                            </div>
                            <div id="contacto" class="tab-pane fade">
                                <h3>Contacto</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, facilis, eveniet.</p>
                            </div>
                      </div>

Pills

Home

Sección

Contacto


                      <ul class="nav nav-pills">
                            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
                            <li><a data-toggle="tab" href="#seccion">Sección</a></li>
                            <li><a data-toggle="tab" href="#contacto">Contacto</a></li>
                      </ul>
                      <div class="tab-content bg-white">
                            <div id="home" class="tab-pane fade in active">
                                <h3>HOME</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, facilis, eveniet.</p>
                            </div>
                            <div id="seccion" class="tab-pane fade">
                                <h3>Sección</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, facilis, eveniet.</p>
                            </div>
                            <div id="contacto" class="tab-pane fade">
                                <h3>Contacto</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, facilis, eveniet.</p>
                            </div>
                      </div>

Pills verticales

Title

HOME

Sección

Contacto


                      <div class="row">
                          <div class="col-sm-3">
                              <h4>Title</h4>
                              <ul class="nav nav-pills nav-stacked" style="margin-top: 0;">
                                  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
                                  <li><a data-toggle="tab" href="#seccion">Sección</a></li>
                                  <li><a data-toggle="tab" href="#contacto">Contacto</a></li>
                              </ul>
                          </div>
                          <div class="col-sm-9">
                                <div class="tab-content">
                                    <div id="home" class="tab-pane fade in active">
                                        <h3>HOME</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                    <div id="seccion" class="tab-pane fade">
                                        <h3>Sección</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                    <div id="contacto" class="tab-pane fade">
                                        <h3>Contacto</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                          </div>
                      </div>

Componentes

Pestañas

Tabs

HOME

Sección

Contacto

Pills

Home

Sección

Contacto

Pills verticales

Title

HOME

Sección

Contacto