Posso mudar a cor do botão de inicialização?
Uso A referência dos botões CSS do Bootstrap .
eu crio um botão: class="btn btn-primary".
quero que o fundo seja preto, e a cor do texto seja branca. Como posso fazê-lo?
7 answers
<style type="text/css"> no seu HTML ou colocar isso em um arquivo CSS separado)
.black-background {background-color:#000000;}
.white {color:#ffffff;}
Então, dê ao seu botão estas classes
<input type="submit" class="btn btn-primary black-background white" value="Text" />
Esta pergunta já foi respondida aqui: Estilando botões de inicialização no twitter
Eu recomendaria seguir o conselho acima; a prática comum é sobrepor a folha de estilo predefinida/boostrap com os seus próprios estilos, em vez de editar o predefinido/bootstrap directamente ou adicionar novas classes de estilo. A fundação funciona da mesma maneira.
Maneira fácil e rápida com
.btn-black{background-color:#000;color: #FFF;}
.btn-black:hover{color: #FFF;}
E
<button type="button" class="btn btn-black" ...
Outras formas podem incluir:
- Usar uma página de personalização própria: http://getbootstrap.com/customize/
- Aprenda a usar menos ficheiros ou sass.
- dê uma olhada em temas livres em: http://bootswatch.com estava prestes a esquecer este.
Posso sugerir o primeiro se o segundo parecer muito complicado, porque existem vários tipos de botões e você pode personalizar cada botão cores bg, bem como outras propriedades. Quando se quiser actualizar os seus ficheiros ou configuração, poderá enviar a sua própria configuração para obter novos ficheiros ou alterar a sua configuração.
E isso torna a solução menos complicada e mais viável.Usar (classe= "btn btn-navbar primário-inverso") no seu botão class.No preciso de escrever qualquer CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btn-dark{
background-color:black;
color:white;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-dark">Basic Button</button>
</div>
</body>
</html>