Nuevo con bootstrap

[zaphiel]

Buenas compañeros.

Estoy haciendo una web y necesito usar responsive design y bootstrap para que se adapte a todo y el menu cambie de formato,  pero no se como empezar,  se html y css a nivel medio, algún consejo?

Gracias

Enviado desde mi OnePlus One usando Tapatalk 4.

[dimitrix]

Todaos los softwares tipo bootstrap, jquery, codeigniters, se caracterizan por tener muuucha documentación oficinal y no oficial.

Empezando con Bootstrap (oficial):
http://getbootstrap.com/getting-started/

Documentación HTML (no oficial - recomendada)
http://www.w3schools.com/html/

Documentación CSS (no oficial - recomendada)
http://www.w3schools.com/css/

[zaphiel]

Hola, he visto la documentación y he encontrado lo que necesito, pero no se bien como hacer el css ahora.

Algo asi es lo que quiero hacer, menu top, un menu fijo arriba que cambie en dispositivos pequeños, he adaptado el html que da a mi menu pero me sale el css, esta en bootstrap.css o bootstrap.min.css pero no consigo hacerlo bien.

Gracias!



Vale,  ya tengo el menu,  que tonto...

Una cosa,  para redimensionar tamaño de div basta con usar %?

Enviado desde mi OnePlus One usando Tapatalk 4.

Mod: No hacer doble post

[th_anderson]

Buenas Zaphiel, para empezar con bootstrap (Versión 3) lo mejor es como has hecho el header (si lo que quieres es mantenerlo fijo , a este se le llama sticky-header).

Sigamos pues,
Para empezar bien , te queda el scaffolding que es como lo llaman los señores de twitter, que es scaffolding? pues basicamente lo normal es que tus webs tengan columnas, estas se ordenan en PC de la siguiente forma:

Columna A ||| Columna B ||| Columna C .

Para que esto se adapte a mobile es IMPOSIBLE crear tres columnas dado que el ancho del móvil va a ser muy limitado dado que las columnas quedarían así:

Columna A,
Columna B,
Columna C,

Como hacer esto es muy facil:

Supongamos que cada columna es un div pues le vamos a pasar por class la nomenclatura utilizada:

Código (html4strict) [Seleccionar] Expandir

<div class="columna-A"></div>
<div class="columna-B"></div>
<div class="columa-C"></div>

Ahora le integramos bootstrap:
Para mirarte las classes de bootstrap a fondo aqui las tienes explicadas en español y perfectamente:
http://librosweb.es/bootstrap_3/capitulo_2/tipos_de_rejillas.html
col-*-nºcol

Para mostrar tal y como deciamos las columnas esto quedaria asi:

Código (html4strict) [Seleccionar] Expandir

<div class="columna-A col-md-4"></div>
<div class="columna-B col-md-4"></div>
<div class="columna-C col-md-4"></div>

Te preguntaras, y porque 4 y no 3 si son 3 columnas no? Seria lo logico... Pues no bootstrap interpreta que la suma de tus columnas debe dar un maximo de 12. De tal forma que 4+4+4=12  

Si quisieramos hacer dos columnas entonces seria:

Código (html4strict) [Seleccionar] Expandir

<div class="col-md-6"></div>
<div class="col-md-6"></div>

6+6 = 12

Esto en mobile quedaria así
col-md-6 (COLUMNA A)
col-md-6 (COLUMNA B)

Si tu quisieras tenerlo en mobile de la siguiente forma:

Col-A || Col-B

Tendrias que hacerlo así:

Código (html4strict) [Seleccionar] Expandir

<div class="col-md-6 col-xs-6"></div>
<div class="col-md-6 col-xs-6"></div>

La clase col-xs-* lo que hace es interpretar para pantallas pequeñas. Mientras que md es para pantallas medianas.

En el link anterior lo vas a pillar todo rapidismo pero aún y así nunca esta de mas echar una mano, enviame un mensaje si necesitas alguna ayudita mas



Mod: Obligatorio el uso de etiquetas GeSHi.

[zaphiel]

Buf muchas gracias,  al final no surgió así que no tuve que seguir,  pero lo haré para aprender y tenerlo yo,  me miraré eso que dices.  Las etiquetas GeShi no me suenan

Enviado desde mi OnePlus One