Bootstrap es un framework que
fue creado originalmente por twitter y nos permite utilizar los controles en
nuestra web ya que tiene una Open Source que la hace un código libre, incluso
puedes modificar las librerías a tu necesidad siempre y cuando no las
distribuyas a terceros sin su permiso, pero fuera de eso podemos usarlas libremente
en nuestras aplicaciones, Barras de Navegación,
Formularios, Tablas, Botones, Glyphicons son algunos de sus controles que
podremos utilizar.
Para utilizar
Bootstrap vamos a su página oficial:
Buscamos donde dice Download
Bootstrap entramos a descargar
la versión más reciente ahora es la versión
3.3, nos descargara una carpeta comprimida con todas las fuentes los archivos .css
que son las hojas de estilo las y los .js que son los archivos con javascript necesarios
para utilizarlo.
También está la opción de utilizarlo en línea solo
agregamos los links que nos proporcionan en su web de descarga.
En mi caso
utilizare las librerías que descargue, también es necesario utilizar la librería
de jquery que es una librería de javascript que básicamente lo que hace es utilizar
el código de javascript pero más simplificado, y de esta manera interactuar fácilmente
con el documento HTML y manipular el árbol dom, manipular eventos y casi todo, espero
adelante mostrarles más usos de jquery, yo las descargue de su página oficial
que es lo más recomendable, ella que es de uso libre no hay ningún problema.
Empecemos, ahora
vamos a la ruta donde tengamos instalado wamp en mi caso es en C:\wamp\www creamos una carpeta con
llamada pruebaBootstrap una vez
creada entramos en la carpeta y creamos otra carpeta llamada Bootstrap dentro de esta carpeta
copiamos la carpeta que descargamos de bootstrap en mi caso mi carpeta que
contiene todo lo necesario se llama bootstrap-3.3.5-dist,
luego creamos una carpeta llamada jquery
donde estará nuestra librería de jquery, una vez creada, copiamos nuestro
archivo que descargamos y lo pegamos dentro de la carpeta que acabamos de crear,
el mío se llama jquery-1.11.3.js. nos quedaría algo así:
Después de eso creamos un archivo index.html con el siguiente código:
Después de eso creamos un archivo index.html con el siguiente código:
Este es el titulo Este es el cuerpo del documento Esta es la cabecera del documento
Este será la página principal de nuestro sitio pruebaBootstrap no olviden agregar al inicio <!DOCTYPE html> analizamos las líneas:
Las etiquetas
<link></link> definen un enlace entre el documento y un recurso
externo, este elemento va ubicado dentro de las etiquetas head, en este caso
hacemos un enlace con los documentos bootstrap.min.css
bootstrap-theme.min.css que definen los estilos, también hacemos otro
enlace con la etiqueta <script></script>
al documento jquery-1.11.3.js, asi
es como se llama el archivo de jquery que descargue, ustedes pueden tener otro
nombre depende la versión que descargaron, solo sustitúyanlo por ese nombre, también
hay otro enlace al documento jsbootstrap.min.js que contiene las definiciones
del código javascript que hace uso bootstrap.
Ahora guardamos los cambios y abrimos nuestro navegador, una vez puesto en línea wamp server vamos a nuestro sitio http://localhost/pruebaBootstrap/ si definieron algún otro puerto solo colocarlo después de la palabra localhost agregan dos puntos asi localhost:puerto y vemos los resultado es algo asi:
Ahora guardamos los cambios y abrimos nuestro navegador, una vez puesto en línea wamp server vamos a nuestro sitio http://localhost/pruebaBootstrap/ si definieron algún otro puerto solo colocarlo después de la palabra localhost agregan dos puntos asi localhost:puerto y vemos los resultado es algo asi:
Esta es la cabecera del documento
Este es el cuerpo del documento
Si nosotros
borramos los enlaces de nuestro archivo index
y volvemos a ingresar a la ruta de nuestro sitio veremos que el resultado es
distinto y sin estilo, bootstrap ha
definido estilo a diferentes etiquetas incluso aun si nosotros no las estemos
utilizando, ya están definidas los documentos a los que enlazamos.
Visitando la página de bootstrap http://getbootstrap.com/components/ podremos ver todos los componentes que podemos utilizar en nuestras
aplicaciones web.
Vamos a
utilizar botones crearemos un grupo de botones para un toolbar, sustituimos el
siguiente código dentro de las etiquetas body
Quedará de la siguiente manera:
Este grupo de
botones lo podríamos utilizar para un reproductor de multimedia por sus iconos,
ahora analicemos un poco el código, tenemos un div con la clase class="btn-group"
cuando le asignamos esta clase al div básicamente le estamos diciendo que será
un contenedor de un grupo de botones, después dentro de ese div tenemos 5 botones
definidos con las etiquetas button con
los atributos type="button"
class="btn btn-default" aria-label="Right Align", estas
etiquetas indican el tipo de control, la clase de bootstrap que le asignamos y
el tipo de alineación que interpretara bootstrap.
Dentro de
cada botón esta la etiqueta span con
los atributos class="glyphicon"
aria-hidden="true", la clase glyphicon
todas las etiquetas la tienen en común es una clase para indicar que será de
tipo icono y pero cada uno tiene un icono diferente esto se define dentro del
mismo atributo class agregándole un espacio y la otra clase que representa al
icono, para ver todos los iconos disponibles de bootstrap pueden ir a la página
oficial y en componentes y en Glyphicons están los que podemos usar, basta con
que copien el nombre dentro de ellos que está compuesto por glyphicon nombre-icon y lo remplacen en
el atributo class.
Ahora usaremos
el control dropdown que nos sirve
como una lista de opciones ya sea que seleccionemos una o varias como los select list o combobox en otros lenguajes.
Agregamos el
siguiente código dentro de body:
El resultado sería:
En nuestro código
tenemos un div con la clase dropdown para
el tipo de nuestro control, dentro de este div tenemos dos elementos un botón y
una lista con las etiquetas button y
ul respectivamente el botón actuara
como evento para mostrar nuestra lista, esto lo maneja bootstrap así que por
ese evento aun no debemos preocuparnos.
El botón contiene
en su elemento class tres clases, dos de ellas ya las conocemos son las de un botón
normal, la tercera es dropdown-toggle esta
es la clase que define a un botón como activador de la lista que deseamos mostrar
class="btn btn-default dropdown-toggle"
también contiene un id necesario para la comunicación entre el botón y la
lista, data-toggle indica el tipo de
elemento al que esta enlazado, aria-haspopup
indica que el elemento tienen un menú
contextual o de nivel inferior, aria-expanded
establece el estado inicial si estará expandido el control.
Después del botón
tenemos el texto que se muestra en el botón, más abajo tenemos la lista con la
etiqueta ul tiene
los atributos class="dropdown-menu" indica
que es el meno de nuestra lista,
aria-labelledby="dropdownMenu1" indica el nombre o el id del que
ejecuta el evento de mostrar nuestra lista,
el contenido de esta lista se encuentra cada una de las opciones a mostrar
con las etiquetas li y en su interior
una etiqueta a que nos servirá de
link o como ejecutor de un evento y en su contenido el texto que queremos
mostrar.
Si has
entrado a la página de bootstrap te habrás dado cuenta de todas las
posibilidades que puedes utilizar con este Framework, más adelante mostrare
como utilizar otros controles.
Les agradezco
sus comentarios y no olviden compartir este post.
No hay comentarios:
Publicar un comentario