Ir ao conteúdo
  • Cadastre-se
JOE RUTH

CSS arquivo bootstrap.min.css como arrumar

Recommended Posts

Olá, Boa Tarde.

Estou com um problema. Sou nova com relação ao uso do framework bootstrap. Baixei a versão 3.3.7.

Ao abrir o arquivo bootstrap.min.css no editor Atom, ele fica todo bagunçado e não consigo identificar as tags.

Alguém sabe como arrumar o arquivo para ficar bem legível?

 

Editado por JOE RUTH

Compartilhar este post


Link para o post
Compartilhar em outros sites

@JOE RUTH Olá, seja bem vindo em nosso Clube do Hardware.

 

48 minutos atrás, JOE RUTH disse:

ele fica todo bagunçado e não consigo identificar as tags.

Alguém sabe como arrumar o arquivo para ficar bem legível?

Na verdade, ele não está bagunçado.  O que você baixou é a versão "min"  onde ele é reduzido os espaços e linhas para reduzir o tamanho do arquivo e melhorando o carregamento.

 

Se quiser editar o CSS, deve ser a outra versão, que é a de desenvolvedor. 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

O problema é que essa versão do arquivo não foi desenvolvida para leitura humana.

 

Nesse sentido, quando um arquivo tem ".min.css" significa que ele foi minificado, ou seja, o desenvolvedor utilizou alguma ferramenta para remover caracteres desnecessários para a renderização, como espaços. Devido a isso, fica difícil que humanos consigam ler, adequadamente.

 

Veja um trecho de código CSS sem minificação:

.exemplo-seletor1 {
	color: pink;
	font-family: Arial;
	font-size: 16;
}

.exemplo-seletor2 {
	color: pink;
	font-family: Arial;
	font-size: 16;
}

.exemplo-seletor3 {
	color: pink;
	font-family: Arial;
	font-size: 16;
}

.exemplo-seletor4 {
	color: pink;
	font-family: Arial;
	font-size: 16;
}

.exemplo-seletor5 {
	color: pink;
	font-family: Arial;
	font-size: 16;
}

.exemplo-seletor6 {
	color: pink;
	font-family: Arial;
	font-size: 16;
}

.exemplo-seleto7 {
	color: pink;
	font-family: Arial;
	font-size: 16;
}

Agora, como minificação:

.exemplo-seleto7,.exemplo-seletor1,.exemplo-seletor2,.exemplo-seletor3,.exemplo-seletor4,.exemplo-seletor5,.exemplo-seletor6{color:pink;font-family:Arial;font-size:16}

Como pode-se ver, a segunda versão estiliza do mesmo jeito, mas não tem quebra de linhas ou espaços (desnecessário para o navegador), portanto, o arquivo final será muito menor e o usuário irá baixar mais rápido.

 

Agora, caso queira ler o arquivo CSS do Bootstrap, deve-se procurar pelo CSS sem esse tal de ".min.css", no diretório bootstrap-3.3.7-dist\css.

 

Além do mais, quando terminar o estudo básico de Bootstrap, sugiro que aprenda sobre pré-processadores. Assim, vai aprender a usar o Bootstrap de uma maneira melhor.

 

Links úteis

  1. Minificar pra que? Uma breve explicação;
  2. Arquivo .zip do Bootstrap 3.3.7.
Editado por Joao_Lucaas
Acrescentei detalhes
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se o seu problema for em ler esse CSS para alterar alguma classe dele, eu recomendo que voce crie uma folha de estilo e linke ela em sua página e vá alterando as classes desejadas e marque com !important, ou melhor ainda se quiser, pode até extender a classe desejada modificando o arquivo Less do Bootstrap.

 

Para isso primeiro você deve utilizar o arquivo Less do Bootstrap no lugar do bootstrap.min.css e ao invés linkar o bootstrap no HTML você o importa do seu arquivo .less com @import '../caminho-do-seu-bootstrap/bootstrap/less/bootstrap.less'

 

Faça isso antes das suas definições e dessa forma o código vai funcionar e você não precisa usar o !important, já que pela hierarquia o seu CSS ficará por cima.

Editado por fspjonny
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×