elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el ttwitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Nuevo con bootstrap
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Nuevo con bootstrap  (Leído 2,487 veces)
zaphiel

Desconectado Desconectado

Mensajes: 15


Ver Perfil
Nuevo con bootstrap
« en: 2 Enero 2015, 22:28 pm »

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.


En línea

dimitrix


Desconectado Desconectado

Mensajes: 4.847



Ver Perfil WWW
Re: Nuevo con bootstrap
« Respuesta #1 en: 3 Enero 2015, 08:19 am »

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/



En línea




zaphiel

Desconectado Desconectado

Mensajes: 15


Ver Perfil
Re: Nuevo con bootstrap
« Respuesta #2 en: 3 Enero 2015, 12:27 pm »

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
« Última modificación: 3 Enero 2015, 16:31 pm por #!drvy » En línea

th_anderson

Desconectado Desconectado

Mensajes: 3


Develop with pasion & power


Ver Perfil
Re: Nuevo con bootstrap
« Respuesta #3 en: 12 Enero 2015, 22:03 pm »

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
  1. <div class="columna-A"></div>
  2. <div class="columna-B"></div>
  3. <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
  1. <div class="columna-A col-md-4"></div>
  2. <div class="columna-B col-md-4"></div>
  3. <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
  1. <div class="col-md-6"></div>
  2. <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
  1. <div class="col-md-6 col-xs-6"></div>
  2. <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 :D



Mod: Obligatorio el uso de etiquetas GeSHi.

« Última modificación: 13 Enero 2015, 11:34 am por #!drvy » En línea

Albert Einstein dijo: “La imaginación es más importante que el conocimiento. El conocimiento es limitado, la imaginación rodea el mundo”.
zaphiel

Desconectado Desconectado

Mensajes: 15


Ver Perfil
Re:
« Respuesta #4 en: 15 Junio 2015, 21:35 pm »

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
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Bootstrap
Desarrollo Web
kakashi20 5 2,374 Último mensaje 13 Junio 2014, 06:29 am
por flacc
Vulnerabilidad, admin panel Bootstrap
Bugs y Exploits
Kelys 1 2,086 Último mensaje 13 Junio 2014, 06:35 am
por MCKSys Argentina
bootstrap con treeGrid
Desarrollo Web
fdap91 1 1,672 Último mensaje 22 Agosto 2014, 17:43 pm
por robe007
Temas premium free para BootStrap?
Desarrollo Web
[u]nsigned 0 926 Último mensaje 13 Febrero 2015, 20:02 pm
por [u]nsigned
[Resuelto] Inicializar bootstrap-tooltip en Bootstrap v3.0.3
Desarrollo Web
DarK_FirefoX 0 2,774 Último mensaje 6 Abril 2015, 17:28 pm
por DarK_FirefoX
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines