4

É possível eu editar do meu gosto alguma parte de um código CSS do Bootstrap? Se sim, como?

0

5 Respostas 5

2

É 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:

https://github.com/twbs/bootstrap

2

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/

http://www.minifier.org/

Abraços e bons códigos!

2

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>

-2

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.

-3

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.

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 .