Perfil de arranque
objetivo
Bootstrap es el marco de front-end más popular, ha publicado su tercera versión (v3.0.0). Este tutorial te llevará a comenzar a aprender Bootstrap 3.
También verá cómo utilizar diferentes características de marco de encargo del marco, como el uso de una rejilla para crear el diseño, la navegación es creada por el NAV, utilizando carousal cuadro desplegable crear, añadir sociales plug-ins y Google Map y otros plug-ins de terceros.
Lo que es Bootstrap
Bootstrap es un marco de front-end para el desarrollo rápido de aplicaciones Web y sitios Web.
En el desarrollo web moderno, hay varios componentes a casi todos los proyectos web son necesarios.
Bootstrap le proporciona todos estos módulos básicos - cuadrícula, tipografía, tablas, formularios, botones y capacidad de respuesta.
Además, hay una gran cantidad de otros componentes front-end útiles, tales como Dropdowns, la navegación, los modales, Typehead, paginación, orgía, Breadcrumb, Tab, miniaturas, los encabezados y así sucesivamente.
Con éstos, se puede construir un proyecto Web, y se deja correr a mayor rapidez y facilidad.
Además, dado que toda la estructura se basa en módulos, puede colocar su propio CSS, o incluso una corrección grande después del inicio del proyecto de personalizar.
Se basa en varias de las mejores prácticas, creemos que este es un buen lugar para comenzar a aprender moderna oportunidad de desarrollo Web, una vez que haya dominado los conceptos básicos de HTML y JavaScript / jQuery, se puede aplicar este conocimiento en el desarrollo Web.
Aunque algunos críticos, todos los proyectos construidos por Bootstrap tienen el mismo aspecto, no es necesario saber demasiado acerca de HTML + CSS conocimiento puede construir un sitio web. Sin embargo, tenemos que entender, Bootstrap es un marco común, al igual que cualquier otras cosas comunes que usted necesita para personalizar para que sea único. Cuando se desea personalizar, es necesario un estudio en profundidad, no hay una buena base de HTML + CSS no es factible.
Bootstrap excepto, por supuesto, hay muchos otros buenos marco frontal, utilizando el marco de los cuales es el desarrollo de la selección de personal, pero de arranque es, sin duda vale la pena probar.
¿Por qué debería el proyecto usar Bootstrap?
Descargar la estructura de archivos y entender
Se puede elegir entre https://github.com/twbs/bootstrap/archive/v3.0.0.zip o https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip descarga Bootstrap Versión 3.0.0 sucesivamente. Estamos utilizando el primero de ellos, se puede utilizar el segundo.
Además, proporcionamos código descargable contiene un enlace para descargar la primera a través de la carpeta de código de arranque. Este lado también contiene el original utilizada para personalizar css Bootstrap de custom.css.
Después de desempacar, se encuentra, en la carpeta raíz de arranque-3.0.0 Algunos archivos y carpetas.
El principal archivo CSS - bootstrap.css y su versión simplificada de arranque-min.css, que se encuentra en el archivo de arranque-3.0.0 la carpeta raíz 'dist' carpeta 'css' en la carpeta.
En el 'dist' en el interior, hay una carpeta 'js' contiene los principales bootstrap.js de archivos JavaScript y su versión simplificada.
Archivo en la raíz, hay una carpeta separados 'js' contiene los diferentes archivos de JavaScript diferentes plug-ins.
En el sistema de ficheros dentro de "activos", se encuentra la carpeta de otro 'js'. Este es un lugar con HTML5 cuña de html5shiv.js, para obtener el apoyo de IE8. También hay un archivo de respond.min.js para admitir las consultas multimedia IE8. Esta carpeta también contiene los plugins js jquery.js Bootstrap dependientes.
En la misma carpeta, hay una carpeta 'ico' contiene una variedad de iconos de los dispositivos móviles y el icono favicon.
En 'css' la misma ruta de la carpeta contiene el archivo css documento.
carpeta '_includes' y '' _layouts contiene algún tipo de estructura de diseño predeterminado del documento, que puede ser útil para el diseño de prototipado rápido.
carpeta raíz carpeta "menos" contiene algún archivo .less. Si usted quiere ser desarrollado sobre la base de LESS, estos archivos pueden ser útiles.
En la carpeta raíz, hay algunos archivos. Algunos se utilizan para los archivos de prototipos básicos de HTML, algunos de los cuales se basan en la glorieta de bower.json compilado, browserstack.json. Además, hay composer.json y un _config.yml archivo YAML.
Además de descargar desde el enlace dado, también puede utilizar el siguiente comando para compilar toda la CSS, JS -
$ bower install bootstrap
Puede copiar el Bootstrap Informe Git
git clone git://github.com/twbs/bootstrap.git
Para este tutorial, sólo hemos descargado el archivo zip, que no utiliza.
Una vez que aprenda este tutorial, le recomendamos que Bower marco de montaje para ver cómo funciona.
compilación de apoyo NetDNA y la versión simplificada de Bootstrap CSS, JS y otros temas css. Se les puede citar la siguiente declaración
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Desarrollado usando v3.0.0 Bootstrap
HTML básico
Los siguientes son la estructura básica en HTML para nuestro proyecto
<! DOCTYPE html>
<Html>
<Head>
plantilla <Título> Bootstrap V3 </ title>
<Meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1.0"?>
<! - Bootstrap ->
<Enlace href = "bootstrap.min.css de arranque-3.0.0 / dist / css /" rel = "stylesheet medios" = "pantalla">
<! - Cuña HTML5 y soporte Respond.js IE8 de elementos HTML5 y consultas de los medios de comunicación ->
<! - [If lt IE 9]>
<Script src = "bootstrap-3.0.0 / activos / js / html5shiv.js"> </ script>
<script src = "bootstrap-3.0.0 / activos / js / respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Cuerpo>
<H1> Hola, mundo! </ H1>
<! - JQuery (necesaria para los plugins de JavaScript de Bootstrap) ->
<Script src = "// code.jquery.com/jquery.js"> </ script>
<! - Incluir todos los plugins compilados (abajo), o incluir archivos individuales según sea necesario ->
<Script src = "bootstrap-3.0.0 / dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
Tenga en cuenta que la plantilla y html5shiv.js añadido respond.min.js para obtener el apoyo de IE8. En Bootstrap versión 3 se ha añadido a estos archivos.
Nos twitter-arranque archivo en la carpeta raíz de la carpeta del servidor Web, se ha puesto de arranque-3.0.0 carpeta. Todos los archivos HTML que creamos serán colocados en el twitter-arranque. La razón ilustrar este punto, con el fin de agilizar el proceso de desarrollo.
personalizar
Vamos a personalizar diferentes estilos de caja de CSS. Por lo tanto, sobre la base de la original de CSS no destruye archivos en (que se encuentra de arranque-3.0.0 de la carpeta dist) en la misma carpeta, vamos a crear un archivo CSS independiente llamado custom.css. Luego en el archivo HTML, inmediatamente después del archivo original de CSS, hacer referencia al archivo CSS. De esta manera, podemos anular el estilo por defecto que queremos cambiar, sin embargo, si el Bootstrap de actualización, el archivo original de CSS no destruir nuestra costumbre sobre la base de actualización. También se recomienda que usted sigue este enfoque en el proceso de desarrollo.
crear la navegación
Para crear un sistema de navegación, en el archivo HTML, seguido por el cuerpo después de la etiqueta de inicio, agregue el código siguiente.
<Nav class = "barra de navegación barra de navegación inversa-navbar-fijo-top" role = "navegación">
<Ul class = "nav-barra de navegación nav">
<Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
<Li class = "activa"> <a href="#"> principal </a> </ li>
<Li> <a href="price.html"> Precio </a> </ li>
<Li> <a href="contact.html"> Contacto </a> </ li>
<Li class = "desplegable">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Social <b class = "cursor"> </ b> </a>
<Ul class = "menú desplegable">
<class = "reuniones sociales" li> <g: PlusOne anotación = "inline" width = "150"> </ g: PlusOne> </ li>
<Li class = "reuniones sociales"> <div class = "fb-como" técnica de href = "" datos https://developers.facebook.com/docs/plugins/~~number=plural-width = "El ancho de píxel del plug-in" de datos -altura = "la altura de píxel del plugin"-colorscheme de datos = "luz"-diseño de datos = datos de la acción "estándar" = "como" data-show-caras = "true" datos-send = "true"> < / div> </ li>
<Li class = "reuniones sociales"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, FJS = d.getElementsByTagName (s) [0]; si {js = d.createElement (s) (d.getElementById (id)!); Js. id = Identificación; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (documento," escritura "," twitter-WJS "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
</ Nav>
Para la navegación, el uso de rutina de carga de clases "barra de navegación" en la jerarquía de contenedores. Por lo tanto, se le asignará para mantener todo el elemento de navegación de navegación.
Hemos utilizado la clase 'navbar-inverso "para cambiar el color por defecto de la barra de navegación, el uso de la luz antes de que oscurezca en lugar del predeterminado. clase "top-barra de navegación fija 'asegura que cuando nos desplazamos hacia abajo la página HTML, la barra de navegación en la parte superior de la posición fija.
En Bootstrap V3.0.0, cuando se crea la navegación cuando se utiliza la función = "navegación" es nueva. Bootstrap recomiendan su uso, para facilitar el acceso a la barra de navegación.
En este punto, tenemos que aumentar el cuerpo del documento en custom.css 'padding-top: 80px; ". Se agrega al cuerpo como la parte superior de los píxeles rellenos pueden ser diferentes, pero a menos que usted lo hace, la parte superior de la barra de navegación una vez, se le oculta.
En el panel de navegación de contenedores, que tenemos una clase de "nav" y lista desordenada 'navbar-nav'. En esta lista no ordenada, cada elemento de la lista contiene un enlace de navegación.
clase "barra de navegación de la marca 'para presentar un nombre de marca. Hemos utilizado una imagen. Desde la altura de la altura de la imagen es mayor que la barra de navegación de línea de base, donde hacemos algún tipo de personalización. El '.navbar-nav> li> a' la propiedad 'line-height' del 20 píxeles por defecto original de 50 px, cambie el tamaño de fuente de 16px.
El enlace de la derecha, hemos aumentado el cuadro desplegable. Por li relacionada añadido a la clase 'desplegable', seguido de la adición de un "menú desplegable-alternar 'y el ancla' símbolo de intercalación 'con dos clases. El ancla de nuestro proyecto en realidad contiene el texto de anclaje social. Este li contiene una lista desordenada, cada elemento de la lista en una lista anidada se muestra en el siguiente cuadro contiene el enlace.
En el cuadro desplegable que hemos añadido un plugin social. La primera contiene una marca de li Google Plus, y el segundo contiene la etiqueta li Facebook, y el tercero contiene la etiqueta de Twitter pantalla li botones y algunos script js.
Además, debe comenzar después de que el cuerpo de la etiqueta, agregue la siguiente línea de código y secuencias de comandos para hacer botón funcionará de Facebook
<Div id = "fb-root"> </ div>
(Función (d, s, id) {
js var, FJS = d.getElementsByTagName (s) [0];
if () Identificación del d.getElementById () return;
js = d.createElement (s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, FJS);
} (Documento, "guión", "facebook-jssdk '));
Para hacer que Twitter funciona el botón, se termina antes de que el cuerpo de la etiqueta, agregue la siguiente secuencia de comandos
(Function () {
var po = document.createElement ( 'script'); po.type = "text / javascript '; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName ( 'script') [0]; s.parentNode.insertBefore (po, s);
}) ();
Utilizamos el siguiente estilo para añadir algo de estilo adicional a la clase de los botones sociales '' eventos sociales.
.socials {
padding: 10px;
}
Esto completa nuestra navegación.
Crear una presentación de diapositivas carousal
Con el fin de proyectar la página principal barra de navegación, crear una presentación de diapositivas, utilizaremos las siguientes etiquetas
<Div id = "carrusel ejemplo genérico" class = "carrusel de diapositivas">
<! - Indicadores ->
<Ol class = "carrusel-indicadores">
<Li datos target = "# carrusel ejemplo genérico de" datos-slide-to = "0" class = "activa"> </ li>
<Li datos target = "# carrusel ejemplo genérico de" datos-slide-to = "1"> </ li>
<Li datos target = "# carrusel ejemplo genérico de" datos-slide-to = "2"> </ li>
</ Ol>
<! - Envoltura para diapositivas ->
<Div class = "carrusel interior">
<Div class = "elemento activo">
<Img src = "computer.jpg" alt = "...">
<Div class = "carrusel-caption">
<H1> grandes ordenadores de sobremesa están en todas partes </ h1>
<P> <botón class = "btn btn-éxito BTN-lg"> Trate de 30 días de prueba ahora </ p>
</ Div>
</ Div>
<Div class = "elemento">
<Img src = "mobile.jpg" alt = "...">
<Div class = "carrusel-caption">
<H1> móviles están superando en número a los escritorios </ h1>
<P> <botón class = "btn btn-éxito BTN-lg"> Trate de 30 días de prueba ahora </ p>
</ Div>
</ Div>
<Div class = "elemento">
<Img src = "cloud1.jpg" alt = "...">
<Div class = "carrusel-caption">
<H1> Las empresas están adoptando la nube de computación rápida </ h1>
<P> <botón class = "btn btn-éxito BTN-lg"> Trate de 30 días de prueba ahora </ p>
</ Div>
</ Div>
</ Div>
<! - Controles ->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<Span class = "icon-prev"> </ span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<Span class = "-icono al lado"> </ span>
</a>
</ Div>
</ Div>
Hay cuatro secciones en la orgía. contenedor principal usando un "slide carrusel 'etiqueta div con las definiciones de clase.
A continuación, una clase de 'carrusel' indicadores con una lista ordenada. ol de cada elemento de la lista representa una diapositiva. Cuando se carga la página, cargado por defecto con diapositivas de clase "activa". Cuando la prestación, los verás en el rubro de pequeños círculos.
Entonces, cada diapositiva (imagen) se coloca con una clase 'tema' de la etiqueta div. Cada elemento está anidado con una clase de «carrusel-subtítulo 'de la div. carrusel epígrafe contiene la imagen que aparece junto a la etiqueta del título. Párrafo contiene una h1 y un botón, también se pueden incluir otra marca propia.
La última parte se utiliza para controlar una diapositiva diapositiva siguiente / anterior. Este es el uso de "izquierda" y "carrusel de control" en la definición de una clase, utilizando el "derecho" y la definición siguiente 'de control de carrusel »de una clase.
'Icono-prev "y clase"-icono al lado' para el icono siguiente y anterior.
Hemos hecho algún tipo de personalización en carousal predeterminado. Esperamos subtítulos, indicadores e iconos siguiente / anterior se representan en la parte superior de la ubicación predeterminada de unos pocos píxeles.
Para ello, le sumamos los siguientes estilos custom.css archivo
.carousel-interno .item .carousel-caption {
position: absolute;
top: 200px
}
.carousel-indicadores {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav> li> a {
line-height: 50px;
font-size: 16px
}
También personalizamos las h1, aporta un poco la parte inferior de un margen de 30 píxeles.
h1 {
margin-bottom: 30px
}
la imagen de respuesta
Usted puede haber notado que cada imagen en la diapositiva, hemos utilizado la clase 'img sensible'. Esta es una v3.0.0 Bootstrap nuevas características. Mediante el uso de la etiqueta de la clase 'img sensible' img, Bootstrap para que la respuesta de la imagen.
Crear una cuadrícula
En las siguientes diapositivas, se utilizó una rejilla para colocar contenido. Al tener una clase de "contenedor" de la div comenzar una cuadrícula. Tenga en cuenta que vamos a desarrollar un sitio web de respuesta, en lugar de la versión anterior de Bootstrap, en el que el contenedor tiene una sola clase, el valor predeterminado es sensible.
div contenedor con anidada varias clases "fila" de la div (la primera fila de tres, la segunda línea tiene seis), para crear una rutina de carga líneas de la cuadrícula.
Cada fila tiene una clase con un 'col-xy' del div, para crear columnas. El valor de x puede ser: xs para dispositivos móviles para el sm Tablet PC, md para ordenadores portátiles y de escritorio de pantalla más pequeña para lg pantalla del escritorio grande. Este es el primer método. El valor de y puede ser cualquier número entero positivo, aunque el número total de columnas de la cuadrícula no debe ser más de 12. En nuestro proyecto, por simplicidad hemos utilizado lg, pero como ya lo hemos hecho así, es posible obtener un teléfono o tableta para ver el sitio del proyecto para la comparación.
En el siguiente tutorial, vamos a tener un completo tutorial sobre el sistema de red de rutina de carga, para explorar su respuesta fascinante.
En este ejemplo, queremos que el ancho de las columnas de las tres primeras filas son iguales, por lo que utilizamos para todas las columnas 'col-lg-4'. En la segunda fila, queremos seis columnas de igual ancho, por lo que utilizamos para todas las columnas 'col-lg-2'.
Aquí es la etiqueta que contiene una rejilla de dos filas, la primera fila hay tres, la segunda fila tiene seis.
<Div class = "fila Barone"> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / php.png"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / mysql-logo.jpg"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / javascript-logo.png"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / java.jpg"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / postgresql.png"> </ p> </ Div> </ Div>
Tenemos una hora y un pie de página con la siguiente marca el final de la parrilla
<Hr> <P> Copyright © 2013-14 por tareas basadas en la aplicación. </ P>
Utilice la tabla
En la página price.html de nuestro proyecto, utilizamos una forma de hacer una lista de precios, etiquetado como sigue
<Table class = "Tabla de borde tabla">
<Culata en T>
<Tr>
<th> Características </ th>
<TH> individual </ th>
<TH> pequeño equipo </ th>
<TH> Medio Equipo </ th>
<TH> Empresa </ th>
</ Tr>
</ Culata en T>
<Tbody>
<Tr>
<Td> <h3> Número de usuarios </ h3> </ td>
<Td> <span class = "insignia"> Un </ span> </ td>
<Td> <span class = "insignia"> Cinco </ span> </ td>
<Td> <span class = "insignia"> Quince </ span> </ td>
<Td> <span class = "insignia"> Ilimitado </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Pro formación </ h3> </ td>
<Td> <span class = "insignia"> n </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Foro de Soporte </ h3> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> En apoyo persona </ h3> </ td>
<Td> <span class = "insignia"> n </ span> </ td>
<Td> <span class = "insignia"> n </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> seminarios semanales </ h3> </ td>
<Td> <span class = "insignia"> n </ span> </ td>
<Td> <span class = "insignia"> n </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
<Td> <span class = "insignia"> Sí </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Precio </ h3> </ td>
<Td> <botón type = "button" class = "btn btn btn-advertencia-lg"> $ 9 / Mes botón </> </ td>
<Td> <botón type = "button" class = "btn btn btn-advertencia-lg"> $ 19 / Mes botón </> </ td>
<Td> <botón type = "button" class = "btn btn btn-advertencia-lg"> $ 49 / Mes botón </> </ td>
<Td> <botón type = "button" class = "btn btn btn-advertencia-lg"> $ 99 / Mes botón </> </ td>
</ Tr>
<Tr>
<Td> </ td>
<Td> <botón de tipo de clase = "botón" = "btn btn-éxito BTN-lg"> Comprar ahora botón </> </ td>
<Td> <botón type = "button" class = "btn btn-éxito BTN-lg" "> Comprar ahora botón </> </ td>
<Td> <botón type = "button" class = "btn btn-éxito BTN-lg" "> Comprar ahora botón </> </ td>
<Td> <botón type = "button" class = "btn btn-éxito BTN-lg" "> Comprar ahora botón </> </ td>
</ Tr>
</ Tbody>
</ Table>
Bootstrap usando el archivo original de CSS "mesa" y dos de clase 'table-bordeado'. Pero tenemos que hacer la siguiente tabla añadiendo algún archivo CSS personalizado en un aspecto diferente customize.css
{TH
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Utilice la placa
Utilizamos la clase 'insignia' para mostrar un poco de texto en la tabla. Tenemos el siguiente código CSS personalizado con la clase de placas
.badge {
background-color: # 428bca;
Color: #fff;
font-size: 22px;
}
Por esta página y contact.html, añadimos otra regla CSS en el customize.css
.container> h1 {
text-align: center;
}
Esto permite h1 centrado.
El uso de formas
En el archivo contact.html, creamos tres columnas, la primera columna, que incrustar un formulario. Utilice la hoja de estilo por defecto.
<Forma papel class = "forma horizontal" = "forma">
<Div class = "forma-grupo">
<Label for = clase "e-mail" = "col-lg-2 de control de etiqueta"> correo electrónico </ label>
<Div class = "col-lg-10">
<Input type = clase "e-mail" = "-control de formulario" id = "email" marcador de posición = "Enviar">
</ Div>
</ Div>
<Div class = "forma-grupo">
<Label for = clase "nombre" = "col-lg-2 de control de etiqueta"> Nombre </ label>
<Div class = "col-lg-10">
<Input type = "text" class = "-control de formulario" id = "nombre" marcador de posición = "Nombre">
</ Div>
</ Div>
<Div class = "forma-grupo">
<Label for = "país" class = "col-lg-2 de control de etiqueta"> País </ label>
<Div class = "col-lg-10">
<Seleccionar>
<Opción> EE.UU. </ option>
<Opción> India </ option>
<Opción> Reino Unido </ option>
<Opción> Autralia </ option>
</ Select>
</ Div>
</ Div>
<Div class = "forma-grupo">
<Label for = clase "desc" = "col-lg-2 de control de etiqueta"> Mensaje </ label>
<Div class = "col-lg-10">
<Filas Textarea = "5" cols = "50"> </ textarea>
</ Div>
</ Div>
<Div class = "forma-grupo">
<Div class = "col-lg-offset-2 col-lg-10">
<= Tipo de botón "enviar" class = "btn btn-default"> Enviar </ botón>
</ Div>
</ Div>
</ Form>
clase "Forma-horizontal" permite que la forma de mantener la alineación horizontal. Tenga en cuenta que para la facilidad de acceso, añadir role = "forma". Esta es la versión 3.0.0 de las nuevas características.
Para localizar cada formulario controles, Bootstrap 3.0.0 utiliza una nueva clase de "forma-grupo '.
En esta página, la segunda columna de la cuadrícula, que simplemente se coloca un poco de texto.
Añadir Google Maps
En la página contact.html, la tercera columna de la cuadrícula, hemos añadido un mapa de Google (Google Maps). Para ello, utilizamos las siguientes etiquetas
<Div id = "map_canvas"> </ div> </ Div>
Los siguientes JS añaden a la cabecera del archivo HTML dentro de la cabecera
la función initialize () {
var map_canvas = document.getElementById ( 'map_canvas');
map_options var = {
Centro: nueva google.maps.LatLng (23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = nueva google.maps.Map (map_canvas, map_options)
}
google.maps.event.addDomListener (ventana, "carga", inicializar);
dicho previa antes de js, debe agregar la siguiente etiqueta de script
<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
Con el fin de representar correctamente el mapa, hay que añadir los siguientes estilos custom.css
#map_canvas {
Anchura: 400px;
altura: 400px;
}
Esta es la forma de crear un proyecto simple basado en Bootstrap V3.0.0. Pero sólo hemos tocado la superficie para luego capítulos explicarán con más detalle.