Perfil Bootstrap
alvo
Bootstrap é a estrutura de front-end mais popular, lançou sua terceira versão (v3.0.0). Este tutorial irá levá-lo para começar a aprender Bootstrap 3.
Você também verá como utilizar diferentes recursos de quadro quadros personalizados, como usando uma grade para criar o layout, a navegação é criado por nav, usando carousal caixa drop-down criar, adicionar plug-ins sociais e Google Map e outros plug-ins de terceiros.
O que é Bootstrap
Bootstrap é uma estrutura de front-end para o desenvolvimento rápido de aplicações Web e Web sites.
No desenvolvimento da Web moderna, existem vários componentes para quase todos os projetos da Web são necessários.
Bootstrap fornece-lhe com todos esses módulos básicos - Grid, tipografia, tabelas, formulários, botões e capacidade de resposta.
Além disso, há uma série de outros componentes de front-end úteis, tais como Dropdowns, navegação, modais, Typehead, paginação, Carrossel, Breadcrumb, tabulação, Miniaturas, cabeçalhos e assim por diante.
Com estes, você pode construir um projeto da Web, e deixá-lo correr a mais rápida e facilmente.
Além disso, uma vez que toda a estrutura é baseada em módulos, você pode colocar o seu próprio CSS, ou mesmo uma grande correção após o início do projeto para personalizar.
Baseia-se em várias práticas recomendadas, nós pensamos que este é um bom lugar para começar a aprender moderna oportunidade de desenvolvimento Web, uma vez que você já domina o básico de HTML e JavaScript / jQuery, você pode aplicar esse conhecimento no desenvolvimento da Web.
Embora alguns críticos, todos os projetos construídos por Bootstrap têm a mesma aparência, você não precisa saber muito sobre o conhecimento CSS pode construir um site HTML +. No entanto, precisamos entender, Bootstrap é um quadro comum, assim como quaisquer outras coisas comuns que você precisa para personalizar para torná-lo único. Quando você quiser personalizar, você precisa de um estudo em profundidade, não há nenhuma boa HTML + base CSS não é viável.
Bootstrap exceto, é claro, há muitos outros boa estrutura frontal, usando a estrutura de que é o desenvolvimento de seleção de pessoal, mas Bootstrap é definitivamente vale a pena tentar.
Por que deve o projeto usar Bootstrap?
Faça o download do arquivo estrutura e entender
Você pode escolher entre https://github.com/twbs/bootstrap/archive/v3.0.0.zip ou https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip baixar Bootstrap Versão 3.0.0 diante. Estamos usando o primeiro, você pode usar o segundo.
Além disso, podemos fornecer o código para download contém um link para baixar o primeiro através da pasta código de inicialização. Este lado também contém o original usado para personalizar css Bootstrap de custom.css.
Após descompactar, você vai encontrar, na pasta raiz de inicialização-3.0.0 Alguns arquivos e pastas.
O principal arquivo CSS - bootstrap.css e sua versão simplificada de inicialização-min.css, localizado no arquivo de inicialização-3.0.0 a pasta raiz 'dist' pasta 'css' na pasta.
No 'dist' dentro, existe uma pasta 'js' contém os principais bootstrap.js arquivo JavaScript e sua versão simplificada.
Arquivo na raiz, não há pasta de 'js' separados contém os diferentes arquivos JavaScript diferentes plug-ins.
No arquivo raiz dentro de "ativos", você vai encontrar pasta de outro "js". Este é um lugar com HTML5 calço de html5shiv.js, para a obtenção de apoio IE8. Há também um arquivo respond.min.js para apoiar consultas multimédia IE8. Esta pasta também contém os js plugins jquery.js Bootstrap dependentes.
Na mesma pasta, existe uma pasta 'ico' contém uma variedade de dispositivos móveis e ícones ícone favicon.
Em 'css' o mesmo caminho da pasta contém o arquivo css do documento.
pasta '_includes' e '_layouts' contém alguma estrutura de layout padrão do documento, que pode ser de design útil para prototipagem rápida.
pasta raiz "menos" pasta contém algum arquivo .less. Se você quiser ser desenvolvido com base em MENOS, esses arquivos podem ser úteis.
Na pasta raiz, existem alguns arquivos. Alguns são usados para prototipagem ficheiros HTML básico, alguns dos quais são baseados em Bower para bower.json compilado, browserstack.json. Além disso, há composer.json e uma _config.yml arquivo YAML.
Além de baixar a partir do link fornecido, você também pode usar o seguinte comando para compilar todas as CSS, arquivos JS -
$ bower install bootstrap
Você pode copiar o Bootstrap Relatório Git
git clone git://github.com/twbs/bootstrap.git
Para este tutorial, temos apenas o download do arquivo Zip, ele não usa.
Depois que você aprender neste tutorial, nós encorajamos você a bower estrutura de montagem para ver como ele funciona.
NetDNA compilação apoio e versão simplificada do Bootstrap CSS, JS e outros temas css. Você pode citar-lhes a seguinte declaração
<!-- 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>
Desenvolvido usando v3.0.0 Bootstrap
HTML básico
A seguir, são a estrutura HTML básico para o nosso projecto
<! DOCTYPE html>
<Html>
<Head>
template <Title> Bootstrap V3 </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<Link href = "bootstrap.min.css de bootstrap-3.0.0 / dist / css /" rel = media "stylesheet" = "screen">
<! - Calço HTML5 e apoio Respond.js IE8 de elementos HTML5 e consultas de mídia ->
<! - [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>
<Body>
<H1> Olá, mundo! </ H1>
<! - JQuery (necessário para plugins JavaScript do Bootstrap) ->
<Script src = "// code.jquery.com/jquery.js"> </ script>
<! - Incluir todos os plugins compilados (abaixo), ou incluir arquivos individuais, conforme necessário ->
<Script src = "inicialização-3.0.0 / dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
Por favor note que o modelo e html5shiv.js adicionados respond.min.js para a obtenção de apoio IE8. Em Bootstrap versão 3 foi adicionado a estes ficheiros.
Nós twitter-inicialização arquivo na pasta raiz da pasta do servidor Web, tem sido colocado de bootstrap-3.0.0 pasta. Todos os arquivos HTML que criamos serão colocados no twitter-inicialização. A razão ilustrar este ponto, a fim de agilizar o nosso processo de desenvolvimento.
Personalize
Vamos personalizar o estilo de caixa CSS diferente. Portanto, com base da CSS original não destruir arquivos em (localizado inicialização-3.0.0 da pasta dist) na mesma pasta, vamos criar um arquivo CSS separado chamado custom.css. Em seguida, no arquivo HTML, imediatamente após o arquivo CSS original, referenciar o arquivo CSS. Desta forma, podemos substituir o estilo padrão que queremos mudar, no entanto, se o Bootstrap atualização, o arquivo CSS original não destruir o nosso costume com base atualizada. Nós também recomendamos que você siga esta abordagem no processo de desenvolvimento.
Criar navegação
Para criar uma navegação, no arquivo HTML, seguido pelo organismo após a marca inicial, adicione o seguinte código.
<Nav class = "navbar navbar-inversa fixo-navbar-top" role = "navegação">
<Class Ul = "nav navbar-nav">
<Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
<LI class = "ativo"> <a href="#"> Início </a> </ li>
<Li> <a href="price.html"> Preço </a> </ li>
<Li> <a href="contact.html"> Contact </a> </ li>
<Li class = "dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> social <b class = "acento circunflexo"> </ b> </a>
<Class Ul = "dropdown-menu">
<LI class = "socials"> <g: plusone anotação = "inline" width = "150"> </ g: plusone> </ li>
<LI class = "socials"> <div class = "fb-like" data-href = "https://developers.facebook.com/docs/plugins/~~number=plural" data-width = "a largura de pixel do plug-in" de dados -Altura = "o pixel altura do plug-in"-colorscheme data = "light" de layout de dados =-action de dados "padrão" = "como" data-show-faces = "true"-send data = "false"> < / div> </ li>
<LI class = "socials"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, FJS = d.getElementsByTagName (s) [0]; se {js = d.createElement (s) (d.getElementById (id)!); Js. id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (documento," Script "," twitter-WJS "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
</ Nav>
Para a navegação, o uso Bootstrap "navbar" classe na hierarquia do contentor. Portanto, ele será atribuído para segurar todo o elemento de navegação nav.
Temos usado classe "navbar-inversa" para mudar a cor padrão da barra de navegação, o uso da luz antes de escurecer em vez do padrão. classe "-top Navbar-fixo 'garante que quando rolar para baixo página HTML, a barra de navegação no topo da posição fixa.
Em Bootstrap V3.0.0, quando a navegação é criado quando se usa o papel = "navegação" é nova. Bootstrap recomendar essa utilização, para facilitar o acesso à barra de navegação.
Neste ponto, temos de aumentar o corpo do documento em custom.css 'padding-top: 80px; ". Você adiciona ao corpo como a parte superior dos pixels cheios podem ser diferentes, mas a menos que você fazê-lo, a parte superior da barra de navegação, depois, serão ocultados.
No nav recipiente, nós temos uma classe de "nav" e lista desordenada "navbar-nav". Nesta lista não ordenada, cada item da lista contém um link de navegação.
classe 'Navbar-brand' para apresentar um nome de marca. Temos usado uma imagem. Desde a altura da altura da imagem é maior do que a barra de navegação de linha de base, em que fazer alguma personalização. O '.navbar-nav> li> a' propriedade 'line-height' da 20px padrão original para 50px, alterar o tamanho da fonte para 16px.
O link para a direita, temos aumentado a caixa drop-down. Para li relacionada adicionado à classe 'pendente', seguido pela adição de um 'suspensa-toggle "e âncora" acento circunflexo "com duas classes. A âncora do nosso projeto, na verdade, contém o texto âncora social. Este li contém uma lista não ordenada, cada item da lista em uma lista aninhada são mostrados na caixa a seguir contém o link.
Na caixa drop-down que nós adicionamos um plugin social. O primeiro contém uma li marca Google Plus, ea segunda contém o li tag Facebook, ea terceira contém os botões do Twitter exibição li tag e algum script js.
Além disso, você deve começar após a tag body, adicione a seguinte marcação e scripts para fazer Facebook botão funciona
<Div id = "fb-root"> </ div>
(Função (d, s, id) {
var js, FJS = d.getElementsByTagName (s) [0];
if (d.getElementById id) () 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, 'script', 'facebook-jssdk'));
Para tornar Twitter trabalho botão, nós terminar antes da tag do corpo, adicione o seguinte script
(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);
}) ();
Nós usamos o seguinte estilo para adicionar algum estilo extra para classe de botões sociais 'socials'.
.socials {
padding: 10px;
}
Isto conclui a nossa navegação.
Criar uma apresentação de slides por carousal
Para projetar barra de navegação home page, criar um slide show, vamos usar as seguintes tags
<Div id = "carrossel exemplo genérico" class = "carrossel de slides">
<! - Indicadores ->
<Class = "Ol carrossel-indicadores">
<Li data-target = "# carrossel-exemplo genérico" data-slide-to = "0" class = "ativo"> </ li>
<Li data-target = "# carrossel-exemplo genérico" data-slide-to = "1"> </ li>
<Li data-target = "# carrossel-exemplo genérico" data-slide-to = "2"> </ li>
</ Ol>
<! - Wrapper para slides ->
<Div class = "carrossel interior">
<Div class = "item ativo">
<Img src = "computer.jpg" alt = "...">
<Div class = "carrossel-caption">
<H1> Desktops grandes estão por toda parte </ h1>
<P> <button class = "btn btn-sucesso btn-lg"> Tente dia de teste de 30 agora </ p>
</ Div>
</ Div>
<Div class = "item">
<Img src = "mobile.jpg" alt = "...">
<Div class = "carrossel-caption">
<H1> Mobiles estão superando desktops </ h1>
<P> <button class = "btn btn-sucesso btn-lg"> Tente dia de teste de 30 agora </ p>
</ Div>
</ Div>
<Div class = "item">
<Img src = "cloud1.jpg" alt = "...">
<Div class = "carrossel-caption">
<H1> Empresas estão adotando Cloud computing rápido </ h1>
<P> <button class = "btn btn-sucesso btn-lg"> Tente dia de teste de 30 agora </ p>
</ Div>
</ Div>
</ Div>
<! - Controls ->
<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 = "ícone da próxima"> </ span>
</a>
</ Div>
</ Div>
Há quatro seções no Carousal. recipiente principal usando um 'slides carrossel' div tag com definições de classe.
Em seguida, uma classe 'carrossel-indicadores' com uma lista ordenada. ol cada item da lista representa um slide. Quando a página é carregada, carregada pelo slideshow padrão com classe "ativo". Ao renderizar, você vai vê-los no título de pequenos círculos.
Em seguida, cada slide (imagem) é colocado com uma classe 'item' da tag div. Cada item é aninhada com uma classe 'carrossel-caption' da div. Carrossel-caption contém a imagem exibida em conjunto com a tag título. Parágrafo contém um h1 e um botão, você também pode incluir outras própria marca.
A última parte é usada para controlar um slide slide seguinte / anterior. Este é o uso de 'esquerda' e 'carrossel-control' na definição de uma classe, utilizando o seguinte 'direita' e definição "de controle de carrossel 'de uma classe.
'Icon-prev "e classe" ícone de próxima' para o ícone seguinte e anterior.
Temos feito alguma personalização no carousal padrão. Esperamos legendas, indicadores e ícones seguintes / anteriores são processados em cima do local padrão de poucos pixels.
Para fazer isso, nós adicionamos os seguintes estilos custom.css arquivo
.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
}
Nós também personalizar as h1, adicionar-lhe uma margem inferior de 30 pixels.
h1 {
margin-bottom: 30px
}
imagem Response
Você pode ter notado que cada imagem no slide, temos utilizado a classe 'img-responsivo ". Este é um v3.0.0 Bootstrap novos recursos. Usando a tag img class 'img-responsivo ", Bootstrap para que a resposta de imagem.
Criar uma grade
Nos slides seguintes, foi utilizada uma grade para colocar conteúdo. Por ter uma classe "recipiente" da div começar uma grade. Por favor note que nós estamos indo para desenvolver um site ágil, em vez da versão anterior do Bootstrap, onde o recipiente tem uma única classe, o padrão é responsivo.
div recipiente com nested class vários 'fila' da div (a primeira linha de três, a segunda linha tem seis), para criar uma grade linhas Bootstrap.
Cada linha tem um com uma classe 'col-xy' da div, para criar colunas. O valor de x pode ser: xs para dispositivos móveis para o sm Tablet PC, MD para computadores portáteis e desktop tela menor para LG desktop tela grande. Este é o primeiro método. O valor de y pode ser qualquer número inteiro positivo, embora o número total de colunas na grelha deve ser não mais do que 12. Em nosso projeto, por simplicidade temos usado lg, mas desde que já tenha feito isso, você pode ter um telefone ou tablet para ver o local do projeto para comparação.
No tutorial a seguir, teremos um tutorial completo sobre sistema de rede Bootstrap, para explorar sua resposta fascinante.
Neste exemplo, queremos que a largura das três primeiras linhas de coluna são iguais, por isso usamos para todas as colunas 'col-lg-4'. Na segunda linha, queremos seis colunas de igual largura, por isso usamos para todas as colunas 'col-lg-2'.
Aqui é a etiqueta que contém uma grelha de duas linhas, a primeira linha existem três, a segunda linha tem seis.
<Div class = "linha 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>
Temos um hr e um rodapé com as seguintes marcas no final da grelha
<Hr> <P> Copyright @ 2013-14 por ToDo App. </ P>
Use a Tabela
Na página price.html do nosso projeto, nós usamos uma forma de tornar uma lista de preços, com a seguinte indicação
<Class Table = "tabela delimitada-table">
<Thead>
<Tr>
<th> Características </ th>
<Th> Individual </ th>
<Th> Team pequeno </ th>
<Th> Team Médio </ th>
<Th> Empresa </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> <h3> Nº de usuários </ h3> </ td>
<Td> <span class = "badge"> Um </ span> </ td>
<Td> <span class = "badge"> Cinco </ span> </ td>
<Td> <span class = "badge"> Quinze </ span> </ td>
<Td> <span class = "badge"> Ilimitado </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Pro formação </ h3> </ td>
<Td> <span class = "badge"> Não </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Fórum </ h3> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Em apoio pessoa </ h3> </ td>
<Td> <span class = "badge"> Não </ span> </ td>
<Td> <span class = "badge"> Não </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> webinars semanais </ h3> </ td>
<Td> <span class = "badge"> Não </ span> </ td>
<Td> <span class = "badge"> Não </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
<Td> <span class = "badge"> Sim </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Preço </ h3> </ td>
<Td> <button type = "button" class = "btn btn-aviso btn-lg"> $ 9 / Mês </ button> </ td>
<Td> <button type = "button" class = "btn btn-aviso btn-lg"> US $ 19 / mês </ button> </ td>
<Td> <button type = "button" class = "btn btn-aviso btn-lg"> $ 49 / mês </ button> </ td>
<Td> <button type = "button" class = "btn btn-aviso btn-lg"> US $ 99 / mês </ button> </ td>
</ Tr>
<Tr>
<Td> </ td>
<Td> <button type = class = "button" "btn btn-sucesso btn-lg"> Comprar agora </ button> </ td>
<Td> <button type = "button" class = "btn btn-sucesso btn-lg" "> Compre agora </ button> </ td>
<Td> <button type = "button" class = "btn btn-sucesso btn-lg" "> Compre agora </ button> </ td>
<Td> <button type = "button" class = "btn btn-sucesso btn-lg" "> Compre agora </ button> </ td>
</ Tr>
</ Tbody>
</ Table>
Bootstrap usando o arquivo CSS original "tabela" e duas classes 'fronteira-table'. Mas nós temos que fazer a tabela a seguir, adicionando algum arquivo CSS personalizado em customize.css olhar diferente
th {
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Use o emblema
Nós usamos a classe "emblema" para mostrar algum texto na tabela. Nós temos o seguinte CSS personalizado com a classe badge
.badge {
background-color: # 428bca;
color: # fff;
font-size: 22px;
}
Para esta página e contact.html página, nós adicionamos outra regra CSS na customize.css
.container> h1 {
text-align: center;
}
Isto permite H1 centrado.
usando formas
No arquivo contact.html, criamos três colunas, a primeira coluna, nós incorporar um formulário. Use a folha de estilo padrão.
<Form class = "form-horizontal" role = "forma">
<Div class = "form-grupo">
<Label for = "email" class = "-2 col-lg controle-label"> E-mail </ label>
<Div class = "col-lg-10">
<Input type = "email" class = "-controle de formulário" id = "email" espaço reservado = "Email">
</ Div>
</ Div>
<Div class = "form-grupo">
<Label for = "nome" class = "-2 col-lg controle-label"> Nome </ label>
<Div class = "col-lg-10">
<Input type = "text" class = "form-controle" id = "nome" espaço reservado = "Name">
</ Div>
</ Div>
<Div class = "form-grupo">
<Label for = "country" class = "col-lg-2 controle-label"> Country </ label>
<Div class = "col-lg-10">
<Select>
<Opção> EUA </ option>
<Option> Índia </ option>
<Opção> Reino Unido </ option>
<Opção> Autralia </ option>
</ Select>
</ Div>
</ Div>
<Div class = "form-grupo">
<Label for = "desc" class = "col-lg-2 controle-label"> Mensagem </ label>
<Div class = "col-lg-10">
<Linhas Textarea = "5" cols = "50"> </ textarea>
</ Div>
</ Div>
<Div class = "form-grupo">
<Div class = "compensar-2 col-lg-col-lg-10">
<Tipo botão = "submit" class = "btn btn-default"> Enviar </ button>
</ Div>
</ Div>
</ Form>
classe "Form-horizontal" permite formulário para manter o alinhamento horizontal. Por favor note que para facilidade de acesso, adicione role = "forma". Esta é a versão 3.0.0 dos novos recursos.
Para localizar cada controles de formulário, Bootstrap 3.0.0 usa uma nova classe "forma-grupo".
Nesta página, a segunda coluna da grade, nós simplesmente colocado algum texto.
Adicionar o Google Maps
Na página contact.html, a terceira coluna da grade, nós adicionamos um mapa do Google (Google Maps). Para fazer isso, usamos os seguintes tags
<Div id = "map_canvas"> </ div> </ Div>
Os seguintes js adicionado ao cabeçalho do arquivo HTML dentro do cabeçalho
initialize function () {
var map_canvas = document.getElementById ( 'map_canvas');
var = {map_options
Centro: nova google.maps.LatLng (23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map (map_canvas, map_options)
}
google.maps.event.addDomListener (janela, 'load', inicializar);
disse prévia antes js, você deve adicionar a seguinte tag script
<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
A fim de processar corretamente o mapa, você deve adicionar os seguintes estilos custom.css
#map_canvas {
width: 400px;
height: 400px;
}
Isto é como criar um projeto simples com base em Bootstrap V3.0.0. Mas temos apenas tocou a superfície, depois capítulos irá explicar em mais detalhes.