1

$(document).ready(function() {
  $("#myModal").modal('show');
  $('#myModal').on('show.bs.modal', function(e) {
    $('.chosen-select').chosen();
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  `enter code here`
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Group</h4>
      </div>


      <div class="modal-body">
                      <ul class="nav nav-tabs" id="myTab">
                    <li class="active"><a data-target="#home" data-toggle="tab">Opção 1</a></li>
                    <li><a data-target="#profile" data-toggle="tab">Opção 2</a></li>
                    <li><a data-target="#messages" data-toggle="tab">Opção 3</a></li>
                    <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="home">
                        <br />
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <button type="button" id="gerarboleto" class="btn btn-primary center-block" data-dismiss="modal">Opção 1</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="profile">Opção 2</div>
                    <div class="tab-pane" id="messages">Opção 3</div>
                    <div class="tab-pane" id="settings">Oção 4</div>
                </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Em cada menu eu quero mostrar botões diferentes, como posso fazer isso?

Segue a imagem:

inserir a descrição da imagem aqui

3
  • Como assim botões diferentes? Tipo: jsfiddle.net/ufbr6uwv/9 Precisa detalhar mais seu problema.
    – Aline
    Commented 2/05/2017 às 18:13
  • Não, veja na imagem que postei, onde tem círculo vermelho Commented 2/05/2017 às 18:16
  • 1
    =T não vou conseguir ver.
    – Aline
    Commented 2/05/2017 às 18:34

1 Resposta 1

0

se você deseja apenas uma formatação para seus botões você pode inserir uma classe class="btn-opcao-1" e adicionar um CSS para ela, assim cada botão vai ser diferente do outro.

Se não tem tanto conhecimento de css veja nesse link uma ferramenta que pode te ajudar com a formatação, apenas copie o código e coloque no seu arquivo css.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .