Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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






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

×