comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[FRAMEWORK][BootStrap] MiniTutorial Parte 1

  • 0 Respuestas
  • 1290 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado arthusu

  • *
  • Underc0der
  • Mensajes: 552
  • Actividad:
    3.33%
  • Reputación 2
  • Yo solo se que no se nada - Socrátes
    • Ver Perfil
    • Arthusu BLOG
  • Skype: arthusuxD
« en: Octubre 01, 2013, 07:24:26 am »
 Introducción 
 Bueno amigos esta es la primera parte de algunas series que haré sobre bootstrap, en las cuales empezaremos explicando cosas basicas y al final crearemos nuestra plantilla.
  ¿Que es Bootstrap?
    Bootstrap es una librería front-end que esta mantenida por dos desarrolladores que anteriormente trabajaban en twiter (Mark otto y Jacob Thornton). Que puede ser modificable para utilizarla en tus desarrollos webs, además de que es web responsive design.
    Estructura de Bootstrap
Citar
bootstrap/ ├── css/ │   ├── bootstrap.css │   ├── bootstrap.min.css ├── js/ │   ├── bootstrap.js │   ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png 

 Esa es la estructura básica para usar bootstrap
 Como puedes observar estos son los archivos mínimos necesarios para empezar a utilizar bootstrap...
  Plantilla Básica HTML usando Bootstrap Para empezar creando una plantilla basica usando bootstrap no es necesario, crear demasidado codigo, lo de aqui seria jugar con clases que vienen en los css, que veremos mas adelante...
 
 

 
 
 Como puedes ver el resultado arriba ya esta aplicado los estilos a la cabecera que escribi... utilize los estilos comprimidos al igual el js comprimido... una cosa aqui es que si te das cuenta estoy guardando mi proyecto en mi localhost, lo cual no es necesario (lo hago por gusto) ya que como es front-end no es necesario utilizar un servidor web para poder probarlo.
 Además es importante el uso de !DOCTYPE como etiqueta en este caso se requiere para usarlo en navegadores modernos.
  Estilos globales y su importancia 

 Una de las cosas importantes es que en nuestros estilos podemos ver como bootstrap.css utiliza normalize.css que lo que hace es resetear nuestros html a 0, es decir, medidas a 0. Con esto se asegura de que la visibilidad sea la misma para todos los navegadores al aplicar nuestros estilos... y como les dije así aplicando Web responsive design.
 
 Otras caracteristicas son que en el body no hay margen, el color del body es blanco, @baseFontFamily @baseFontSize @baseLineHeight  @linkColor son algunas variables que pueden ser personalizadas.
 
  Sistema Cuadricula Por defecto bootstrap contiene una sistema de cuadricula que contiene 12 columnas, esto es para que no de un tamaño de pantalla segun sea el dispositivo que nos este viendo, para ello claro tenemos que añadir nuestro archivo bootstrap-responsive.css, lo cual veremos mas adelante...
 
 

 En la imagen anterior podemos darnos cuenta que en el código, existen dos clases la cuales son .row y .span[numero] siendo row nuestra fila y span nuestro numero de columnas...
 Con el numero de columnas le damos un tamaño a nuestra fila... Ejemplo:
 
 
Código: Text
  1.  span12 - 940px
  2.  span11 - 860px
  3.  span10 - 780px
  4.  span9 - 700px
  5.  span8 - 620px
  6.  span7 - 540px
  7.  span6 - 460px
  8.  span5 - 380px
  9.  span4 -  300px
  10.  span3 - 220px
  11.  span2 - 140px
  12.  span1 - 60px

 Entonces como mostramos el primer lorem ipsum tenemos 940px despues tenemos 620px 300px que dan como resultado  920px acercandose mucho a span12 pero con ello puedes ver como creamos nuestra fila con nuestro tamaño, te estaras preguntando ¿y esto para que lo hacemos?, pues muchas veces algunos diseñadores web utilizan cuadriculas en su diseños para que se vean fijos en las webs de manera que en todas las webs se vean igual...
 
  Acomodar las columnas
 Una cosa importante al utilizar las cuadriculas seria acomodar las columnas de manera que le demos un margen izquierdo... Si alguna ves vistes algo de CSS recordaras que el margen es lo de fuera del borde...
 
 Para realizar esto en bootstrap utilizaremos la clase .offset la cual podemos ver todos sus tamaños en el archivo bootstrap.css
 
 

 
 Entonces le daré un offset a nuestra columna span12 de 100px(offset1) que nos dara un margen izquierdo en el como puedes comparar la siguiente imagen con la de arriba (lo amarillo es lo que acabamos de aplicar offset1):
 
 

 
  Anidación de columnas A anidación me refiero que puede haber una columna dentro de otra...
 Como en este ejemplo:
 
 

 
 Todo esto lo hemos visto arriba lo único que estamos haciendo es poner una fila dentro de otra fila, algo que es algo interesante es que la clase .row agrega por defecto un margen izquierdo de -20px por lo cual tuve que ingresarle un .offset2 ala primera columna de la segunda fila ya que se hereda... en caso de que quisiéramos que todo quedara Fixed podriamos usar la clase .row-fluid en lugar de .row de manera que quedara tal y como debe ser.
 
  Capas Una de las muchas cosas utilizadas en el diseño web son las capas y esta seria una de las cosas mas importantes que veremos en esta parte con la cual podríamos usar la clase .container o .container-fluid con la cual centramos nuestro contenido y con container-fluid le damos un espacio por dentro...
 Un buen ejemplo seria poner nuestra barra lateral y contenido, que cuando inicias un proyecto siempre divides tu web de manera que quede como tu lo decidistes...
 
 

 
 Como puedes ver usamos todo lo visto hasta ahora y container-fluid, que es el de ahora mismo, y para que distinguieramos las cosas le agregue unos estilos aparte de los colores y un border y un margen arriba para que se viera con colores como es que estamos creando nuestras capas y dividiendolas usando solo las clases de bootstrap...
 
 

  Responsive Web Design (Vista de diseño adaptable)
 Esto se refiere que nuestro diseño se adapta al dispositivo donde lo estemos mirando para ello agregaremos nuestro CSS y una etiqueta meta...
 
 Dentro del head agregamos lo siguiente:
 
 

 Con esto nuestra pagina web se ira adaptando segun las escalas de los dispositivos que se esten usando en el momento....
 
Un ejemplo para ello es utilizar el inspector de elemento de firefox y utilizar el icono vista diseño adaptable para ir viendo como quedaria nuestro diseño en diferentes resoluciones...
 
 

 Y hasta aqui la primera parte de este minitutorial espero traer la segunda parte pronto...
 
 Sitio referencia:
 http://getbootstrap.com
« Última modificación: Mayo 27, 2014, 11:18:35 pm por Destructor.cs »
Pentest - Hacking & Security Services

Contact me: arthusu@gmail.com

 

¿Te gustó el post? COMPARTILO!



Curso Desarrollo Web con Spring 4 [Aprender desarrollo web Spring Framework]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 512
Último mensaje Julio 30, 2018, 08:07:05 pm
por Mr.Kratos
Themosis Framework, para desarrolladores WordPress

Iniciado por graphixx

Respuestas: 0
Vistas: 1098
Último mensaje Enero 16, 2016, 11:38:28 pm
por graphixx
Curso Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 520
Último mensaje Julio 30, 2018, 05:29:54 pm
por Mr.Kratos
Curso [Desarrollo Web con Bootstrap 3] [Diseña y maqueta una web][Multi]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 451
Último mensaje Julio 20, 2018, 03:34:58 pm
por Mr.Kratos
[FRAMEWORK][BootStrap] MiniTutorial Parte 2

Iniciado por arthusu

Respuestas: 2
Vistas: 1745
Último mensaje Octubre 16, 2013, 02:57:15 pm
por alexander1712