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:  
Renan Leite BL

HTML Sites responsivos = bootstrap?

Recommended Posts

Fala galera do CdH,

 

Eu estou montando um site/projeto mas ainda não sei deixa-lo responsivo,

Alguem poderia me indicar algo para estudar?

 

Dei uma pesquisada e uma ferramenta que mais indicam é o Bootstrap, os sistemas grandes também utilizam bootstrap ou fazem tudo manualmente?

E assim... eu não sei por que ele usa apenas 12 colunas, eu to querendo fazer um menu horizontal que ocupe 100% do width e com um menuzinho na ponta esquerda... como por exemplo o site do  YouTube.

menu_youtube.thumb.png.17b2353846b4bf3f7c6f5875c4dafcd8.png  

Isso teria mais de 12 colunas, entende?

E tipo, quando eu clico no menu lateral do youtube, espreme a "main" da página (ela também se redimensiona...). 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu fiz uma página index muito parecida com o que você está querendo fazer. Eu fiz ela totalmente na mão, sem usar Bootstrap ou outros programas que auxiliam. Eu primeiro fiz a parte do acesso para Desktop e depois de pronta, iniciei a criação dela para smartphones. Não é muito trabalhoso se você souber programar os botões usando Javascript, etc.

 

Primeiramente eu coloquei essa linha no topo da página

<meta name="viewport" content="width=device-width, initial-scale=1">

Depois eu criei div para Desktop e Smartphone. Dentro de cada divisão dessa fica o design da página para cada um dos dispositivos. Na tag style da página, eu coloquei da seguinte forma resumidamente:

#Desktop
{
	display: initial;
}

#Smartphone
{
  	display: none;
}

@media screen and (max-width: 480px) 
{
	#Desktop
  	{
    	display: none;
 	}

  	#Smartphone
  	{
    	display: initial;
  	}
}

Toda a funcionalidade dos botões foram feitas a partir do Javascript.

  • Curtir 1
  • Amei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Renan Leite BL

Não necessariamente precisa ser o bootstrap para dar a responsividade.

Você pode simplesmente fazer isso usando o Media querie do CSS3. 

 

O bootstrap é só um framework que facilita.

  • Amei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Renan Leite BL vamos por partes. Sites responsivos trabalham com media queries e, na sua grande maioria, js, para poder dinamizar ainda mais a responsividade do site. Portanto, se você quiser trabalhar com responsividade, você precisa aprender sobre as famosas media queries do css. Bootstrap, Materialize, Fundation, Skeleton e tantos outros são frameworks ( conjuntos de ferramentas e funções) que deixam o desenvolvimento super mais rápido já que esta parte de responsividade já foi tratada pelo framework em uso, contudo, nada impede de você, em algum momento ou outro alterar manualmente alguma propriedade do css do tal framework. Sobre as 12 colunas que você mencionou, estes frameworks dividiram a tela em 12 partes iguais. Portanto, se você quer ter um menu 100% mais um à esquerda, veja bem que, na mesma altura, os dois não vão poder estar já que este teu menu vai ocupar 100% do espaço. O menu à esquerda vai ter de ficar ou mais pra cima, ou mais pra baixo ou então, o outro menu não poderá ocupar 100%. Lógica matemática!!! Entendeu?? Nisso entram as colunas, pois, desta forma, você pode dizer que teu menu principal vai ter 10 colunas e teu menu à esquerda 2 colunas, somando as 12 colunas. Enfim, resumindo tudo isso, aprenda como se utilizar o css com responsividade (media queries) e depois parta para algum framework. No youtube tem inúmeros e excelentes tutoriais ensinando como usar o bootstrap.

  • Amei 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

×