É possível eu editar do meu gosto alguma parte de um código CSS do Bootstrap? Se sim, como?
5 Respostas
É possível sim. Basta abrir o código no seu editor de preferência e mandar ver.
Todo desenvolvedor tem sua IDE preferida, mas você pode alterar até no bloco de notas em uma emergência (ou se for masoquista).
E como o repositório do fonte do boostrap é o Github, você também pode criar uma conta lá, fazer um fork do projeto e editar a sua cópia online. O endereço do fonte é esse:
Você pode sim alterar o código do bootstrap através de algum editor (IDE) de sua preferência.
Mas se atente que há dois arquivos em cada subpasta de Bootstrap (por exemplo, bootstrap.js e bootstrap.min.js), que são os arquivos de código e suas versões minificadas, ou seja, mais leves.
Você geralmente vai utilizar no script de seu código a versão minificada, mas ela é difícil de modificar. Um conselho é alterar apenas a versão normal e usar algum serviço para minificar o código e usá-lo sem problemas.
Alguns exemplos:
https://javascript-minifier.com/
Abraços e bons códigos!
Sim você pode embora pessoalmente eu não recomendo editar diretamente o código do bootstrap, pois se você precisar atualizar a versão por exemplo, você terá que alterar tudo novamente, recomendo personalizar criando CSS ou JS a parte. Veja um exemplo:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>Cores Padrões</h2>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-danger">Danger</button>
/**ALTERANDO AS CORES PADRÕES DO BOOTSTRAP COM ARQUIVO CSS PERSONALIZADO**/
.btn.btn-primary,
.btn.btn-primary:hover{
background-color:green;
border-color:green;
}
.btn.btn-default,
.btn.btn-default:hover{
background-color:blue;
border-color:blue;
color:#fff;
}
.btn.btn-danger,
.btn.btn-danger:hover{
background-color:orange;
border-color:orange;
}
/**CRIANDO CLASSES PERSONALIZADAS**/
.btn.btn-muted,
.btn.btn-muted:hover{
background-color:gray;
border-color:gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>Cores Personalizadas</h2>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-danger">Danger</button>
<h2>Classes personalizadas</h2>
<button class="btn btn-primary btn-muted">Primary</button>
Sim é possível editar o código. Porém são muitas classes dependentes umas das outras, um ajuste no lugar errado pode descaracterizar todo o seu site. Minha sugestão é aprenda a customizar o seu Bootstrap. Para isso, pode utilizar a página oficial: http://getbootstrap.com/customize/ ou tentar outros site que permitam visualizar rapidamente: http://bootstrap-live-customizer.com/. Neste último, depois de customizar, basta baixar o arquivo .CSS ou .LESS.
Também pode modificar direto pela classe do objeto. Para isso, no editor html basta dar um Ctrl + F, vai abrir barra de pesquisa e lá, basta digitar a classe desejada e então modificá-la. Por exemplo, a cor hover de um link: .navbar-nav .nav-link.