Recursos
Botones:
Estilos de botones para utilizar
Notas o Etiquetas:
Default
Success
Warning
Important
Info
Inverse
Texto de colores:
Estas son las clases para usar textos con los siguientes colores:
Texto de colores
Texto de colores
Texto de colores
Texto de colores
Comentarios o alertas:
Contenido
Nota: Podemos variar el tamaño o la alineación de estos recuadros personalizando cada div ... ejemplo <div class="alert alert-success" style:"width: 500px; margin: 0 auto;">texto</div>
Instrucciones para un interactivo:
Este es el estilo que se utilizara al poner las instrucciones
Da clic aquí para conocer la introducción del módulo.
Nota: Recuerda que tanto las instrucciones como el interactivo, debe estar centrados.
Recurso Collapse ó accordion:
Para utilizar este recurso, se puede copiar tal cual, si se necesita aplicarlo varias veces dentro de un mismo tema, se tendra que cambiar el link y el id respectivamente de los divs, por ejemplo:
el tema 1 y 2 tienen el siguiente codigo : href="#collapseOne" y despliega el div que tiene el id="collapseOne".
si quisiera hacer uno nuevo se modificarian la liga y el id de cada pestaña del acordeon, por ejemplo en un acordeon nuevo podriamos poner href="#collapseNuevo" y id="collapseNuevo"
Ejemplo, solo abre una a la vez
Ejemplo, despliega todas las que le den clic y las deja desplegadas
Objetivo de la actividad: [Texto] Descripción de la actividad: [Texto] Requerimientos para la actividad:
[Texto] Nota para el alumno: Considera que tu actividad debe estar documentada (proceso) y fundamentada. Entregable(s): [Texto]
|
Instrucciones para el alumno: 
Criterios de evaluación de la actividad:
Nota: Para que funcione correctamente asegurate de no duplicar los nombres del id y links.
Lightbox o Modals:
Para utilizar este recurso, se puede copiar tal cual, si se necesita aplicarlo varias veces se tendra que cambiar el link y el id respectivamente de los divs, por ejemplo:
el tema el boton tiene el siguiente codigo : href="#ejemplo" y despliega el div que tiene el id="ejemplo".
si quisiera hacer uno nuevo se modificarian la liga y el id, por ejemplo en un nuevo elemento que se abrira podriamos poner href="#ejemplo1" y id="ejemplo1"
Ejemplos:
Lightbox con boton
Revisa el siguiente
Lightbox imágen
Haz clic en la imagen para ver el ejemplo 
Nota: Para que funcione correctamente es necesario siempre cambiar el link y el id, de lo contrario no funcionara adacuadamente.
Para poder ver lo que se estra programando en el modo diseño del dreamweaver, es nesesario desactivar o comentar los CSS.
Tooltips:
Da clic en el botón para que revises su detalle.
Da clic en la imagen para que revises su detalle.
Pasa el cursor por el botón para que revises su detalle.
Pasa el cursor por la imagen para que revises su detalle.
Pestañas:
Div con pestañas laterales a la izquierda (puedes modificar el alto y el ancho del div)
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
Div con pestañas laterales a la derecha (puedes modificar el alto y el ancho del div)
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
Tablas:
Tipos de tablas responsivas con clases
Tabla básica
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Opcion 2: intercala colores
Gris
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Color celeste
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Opcion 3: bordes y esquinas redondeadas
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Opcion 4: filas con efecto hover
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Opcion 5: colores predeterminados
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
Nota: puedes ponerle el color que gustes, este es solo un ejemplo de las clases que la plantilla tiene predeterminada
Se pueden combinar clases y estilos para dar varios efectos a las tablas.
Imágenes:
Podemos utilizar algunas clases para darle un efecto diferente a nuestras fotos (quiza no siempre sea necesario)
Utilizar imagenes en lista de forma responsiva
Bloques de imagenes con texto
Iconos:
De manera predeterminada, tenemos 140 iconos en forma de sprites, disponible en gris oscuro (por defecto) y blanco
Hola este es un icono
Star
Star
Star