HTML Sites responsivos = bootstrap?

[Renan Leite BL]

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.

  

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

[iHollyZinhO]

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.

[DiF]

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

[Renan Leite BL]

@DiF @iHollyZinhO Valeuuu, vocês são feras

[Felipe Paz]

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