1

É possível criar classes CSS contendo outras classes do Bootstrap? Já pesquisei mas não encontrei nada a respeito.

Algo do tipo:

.minhaclasse {

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    cursor: default;
    background-color: #dff0d8;
    border-bottom-color: transparent;
}
}

.minhaclasse2 {

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    cursor: default;
    background-color: #dff3d8;
    border-bottom-color: transparent;
}
}

Mas assim não é. :/

Tem como?

Pergunta relacionada

1 Resposta 1

2

Sim!

Você pode criar uma classe para ser utilizada junto com a classe do componente Bootstrap, dessa forma você só altera o que realmente deseja mudar. Veja esse exemplo usando o código que você usou na pergunta:

.nav-tabs.minha-classe > li.active > a,
.nav-tabs.minha-classe > li.active > a:hover,
.nav-tabs.minha-classe > li.active > a:focus {
  background-color: #FFEB3B;
  border-color: #FFEB3B; 
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

.nav-tabs.minha-classe2 > li.active > a,
.nav-tabs.minha-classe2 > li.active > a:hover,
.nav-tabs.minha-classe2 > li.active > a:focus {
  background-color: #4CAF50;
  border-color: #4CAF50;
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

.nav-tabs.minha-classe3 > li.active > a,
.nav-tabs.minha-classe3 > li.active > a:hover,
.nav-tabs.minha-classe3 > li.active > a:focus {
  background-color: #F44336;
  border-color: #F44336;
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs minha-classe">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

<ul class="nav nav-tabs minha-classe2">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

<ul class="nav nav-tabs minha-classe3">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

Note que usei .nav-tabs.nome-da-classe, isso fala pro css "quando o componente tiver a classe nav-tabs e a minha-classe use isso ....

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 .