Ésta es una imagen de muestra,

Ud puede enviar una consulta haciendo Clic aquí

Mapaprop Flex Responsive Edición html de páginas sin límite

Mapaprop Express es un sistema autogestionado de diseño avanzado para sitios web inmobiliarios. Está basado en HTML5 junto a Boostrap 3, lo que le permirá obtener una edición HTML completa bajo las características documentadas por Boostrap. Además utiliza FontAwesome 4 que le permitirá contar con una enorme librería de íconos totalmente customizables.

Los siguientes ejemplos son solo ilustrativos y para soporte completo refíerase a la documentación de Boostrap y / ó FontAwesome.

Características Básicas

Párrafos de texto

<p>Esto es un párrafo de texto...</p>

Ésto es un párrafo entre etiqueta <p>...</p> / Lorem ipsum dolor sit amet, negrita con etiqueta "strong" adipiscing elit. Proin nec sem a dui pulvinar lobortis. Nunc non metus ut risus lacinia dictum. Vestibulum fermentum elit turpis, feugiat euismod nibh gravida vitae. Donec commodo malesuada elit, sit amet vehicula dolor volutpat eu. Ut facilisis ante lorem, eu pellentesque urna ornare eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit iaculis metus. Quisque a lacus metus. Sed eu quam non tortor tincidunt dapibus quis at ligula. Quisque at augue pharetra, pulvinar ante ac, tempor enim.

Títulos

Los títulos se organizan por tamaño, y se escriben dentro de etiquetas <h1> <h2> <h3> <h4> <h5> y <h6>. Por ej <h1>Aquí va el titulo</h1>

Título H1

Título H2

Título H3

Título H4

Título H5

Título H6

Listas

Las listas no ordenadas, se escriben dentro de las etiquetas <ul> dentro de la cual se listan con la etiqueta <li> . Por ejemplo....
                    
    <ul>
                            <li> item 1 de la lista </li>
                            <li> item 2 de la lista </li>
                            <li> item 3 de la lista </li>
                            <li> item 4 de la lista </li>
                        </ul>
                            

El ejemplo quedaría de la siguiente forma...

• item 1 de la lista
• item 2 de la lista
• item 3 de la lista
• item 4 de la lista

Colores de texto

Los textos pueden ser resaltados de diversas formas, aplicando una clase por ejemplo a un párrafo o un título. Se aplica de la siguiente forma
                            
<p class="text-muted"> aqui va el texto </p>
                    
                    ó
                    
                    <li class="text-muted"> Texto de lista ejemplo class "text-muted" </li>
                            

El ejemplo quedaría de la siguiente forma...

• Ejemplo de lista 1: Texto de lista ejemplo class "text-muted"
• Ejemplo de lista 2: Texto de lista ejemplo class "text-primary"
• Ejemplo de lista 3: Texto de lista ejemplo class "text-success"
• Ejemplo de lista 4: Texto de lista ejemplo class "text-info"
• Ejemplo de lista 5: Texto de lista ejemplo class "text-warning"
• Ejemplo de lista 6: Texto de lista ejemplo class "text-danger"

Botones con Boostrap 3

Diseñar un botón no puede ser más facil. Utilice la etiqueta <button> para determinarlo, utilice una clase para darle color, por ejemplo
                            
  <button class="btn btn-default">Contáctenos</button>
                            

El ejemplo de boton sería el siguiente

Éstas son las clases disponibles para botones

Además, los botones de boostrap permiten asignar tamaños agregando solo una clase, como "btn-lg" para grande, "btn-sm" para pequeño ó "btn-xs" para extra pequeño, por ej: class="bt btn primary btn-lg"

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

íconos con FontAwesome

Mapaprop Website Express incluye FontAwesome lo que le permitirá ilustrar su diseño escribiendo un código simple, para otorgar un aspecto moderno, un diseño más claro y con poca carga de memoria.

Para agregar un ícono de FontAwesome, refíerase primero a la librería de FontAwesome. Elija su ícono y agreguelo con el siguiente código a cualquier texto:
                    
                            
<p><i class="fa fa-camera-retro"></i> Vea la imágen </p>
                            

El ejemplo de aplicación de ícono sería el siguiente

ícono fa-camera-retro

Además, los íconos pueden tener distintos tamaños, s botones de boostrap permiten asignar tamaños agregando solo una clase, como "fa-lg" para grande, "btn-2x", "fa-3x", "fa-4x" ó "fa-5x" por ej: class="fa fa-camera-retro fa-5x"

fa-camera-retro fa-lg

fa-camera-retro fa-2x

fa-camera-retro fa-3x

fa-camera-retro fa-4x

fa-camera-retro fa-5x

Conozca más sobre Font Awesome y sus íconos

Botones Con Boostrap + Font Awesome

Combinando Boostrap y los íconos de FontAwesome, Usted podrá realizar vistosas combinaciones.

Para agregar un ícono de FontAwesome, refíerase primero a la librería de FontAwesome. Elija su ícono y agreguelo con el siguiente código a cualquier texto:
                    
                            
<a class="btn btn-danger" href="http..."> 
                            <i class="fa  fa-trash-o fa-lg"></i> Delete
                    </a>
                            

El ejemplo de aplicación de ícono en botón sería el siguiente

Imágenes

Con Boostrap dispone de interesantes opciones para mostrar imágenes.

Para agregar una imagen, simplemente agregue una clase para elegir un tipo de diseño. Las clases img-rounded, img-circle ó img-thumbnail darán estilo a su prsentación:
                    
                            
<img src="/img/..." class="img-rounded"> 
                    <img src="/img/..." class="img-circle"> 
                    <img src="/img/..." class="img-thumbnail"> 
                            

El ejemplo de aplicación de imagen sería el siguiente