CSS arquivo bootstrap.min.css como arrumar

[JOE RUTH]

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?

 

[DiF]

@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. 

[groutmoustache]

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.

[Visitante]

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.