O que é o twitter de bootstrapTwitter Bootstrap é uma estrutura de front-end para desenvolver aplicações web e sites rápidos. No desenvolvimento
na
web moderna, existem vários componentes que são necessários em quase todos os projetos web . Bootstrap oferece-lhe todos os módulos básicos - Grid , tipografia, tabelas, formulários , botões e capacidade de resposta . Além
disso, há grande quantidade de outros componentes de front-end úteis
como Dropdowns , Navegação, Modais , Typehead , Paginação , Carousal ,
Pão Ralado, Tab, Miniaturas , cabeçalhos etc Com estes você pode fazer
um projeto web instalado e funcionando rapidamente e facilmente.Além
disso , uma vez que toda a estrutura é baseada módulo, você pode
personalizá-lo com seu próprio pouco de CSS ou até mesmo ir para uma
revisão completa depois de começar.Baseia-se
em
boas- Veja mais em: http://www.w3resource.com/twitter-bootstrap/tutorial.php # sthash.hdDYmi3z.dpuf
práticas e acreditamos que é um bom ponto para
começar a aprender moderna de desenvolvimento web com HTML e JavaScript /
Jquery uma vez que você sabe o básico .Embora
haja críticas, que todos Bootstrap feitos projetos parece mesmo e você
pode fazer um site para cima sem muita HTML + CSS conhecimento ,
precisamos entender que Bootstrap é um framework genérico e, como
qualquer outro material genérico, você precisa para personalizar lo para procurá-lo exclusivo . E
você precisa mergulhar profundamente quando você está no seu caminho
para personalizá-lo e que não é viável sem bem conhecimento de HTML +
CSS.Há,
naturalmente, muito boas estruturas de front-end disponíveis ao lado de
inicialização e é completamente a escolha de um desenvolvedor que quer
que . Mas é definitivamente vale a pena tentar .Por que você usa Twitter Bootstrap em seus projetos? E se você estiver usando-o pela primeira vez , explorá-lo conosco e deixe-nos saber a sua opinião .W3resource tem uma série existente de Twitter Bootstrap Tutorial discutindo o quadro em detalhes. Vamos atualizar toda a série com a última versão 3.0.0 e irá adicionar mais conteúdo útil e exemplos. Por favor, assine o nosso feed para ficar atento.Faça o download e compreender a estrutura de arquivoVocê
pode baixar a versão 3.0.0 do Bootstrap
https://github.com/twbs/bootstrap/archive/v3.0.0.zip (completo) ou
https://github.com/twbs/bootstrap/releases/download/v3 . 0.0/bootstrap-3.0.0-dist.zip ( short) . Temos usado o primeiro, mas você pode usar a segunda também.Além disso, o nosso código que deu para ser baixado contém um código de inicialização pasta baixado a partir do primeiro link. Este também contém o arquivo custom.css temos usado para personalizar css original de Bootstrap .Uma
vez descompactado, você ia achar que há vários arquivos e pastas estão
disponíveis dentro da pasta raiz de inicialização - 3.0.0 .Os
principais arquivos CSS - bootstrap.css e e versão minified dele
inicializar - min.css estão disponíveis dentro pasta " css ", que é
colocado dentro da pasta ' dist ' sob inicialização - 3.0.0 .Dentro ' dist ' existe uma pasta 'js ' , que contém os principais bootstrap.js arquivo JavaScript e uma versão minified dele.Há uma pasta separada 'js ' dentro de raiz, que contém diferentes plugins de JavaScript em arquivos separados.Outra pasta ' js ' é encontrado dentro de pasta ' ativos ' dentro de raiz. Isto é html5shiv.js que é HTML5 calço , usado para apoio IE8. Há também arquivo respond.min.js , utilizado para apoiar consultas de mídia em IE8. Essa pasta também contém jquery.js em que js plugins do Bootstrap depende.Há uma pasta ' ico ' dentro dos mesmos , contendo os ícones para favicon e ícones para vários dispositivos móveis .pasta ' css ' no mesmo caminho contém arquivos css para documentação.'
_includes ' ea pasta ' _layouts ' contém alguns arquivos de estrutura
de layout padrão que podem ser úteis para prototipagem rápida .pasta "menos" dentro da raiz contém vários arquivos . menos . Se você estiver indo para o desenvolvimento baseado menos , esses arquivos são úteis para você.Dentro da pasta raiz. há mentiras vários arquivos . Alguns deles são ficheiros HTML que podem ser usados para prototipagem básico . Além disso, há bower.json , browserstack.json usado para a compilação com base Bower . Há também composer.json e uma _config.yml arquivo YAML .Além de fazer o download a partir do link fornecido, você também pode compilar todas CSS, js com o seguinte comando -$ Pavilhão instalar inicializaçãoVocê pode clonar Git repo do Bootstrapgit clone git :/ / github.com / TWB / bootstrap.gitPara este tutorial , temos simples download do arquivo Zip e estará trabalhando fora dessa .Uma vez que você terminar este tutorial, nós encorajamos você a instalar com caramanchão e deixe-nos saber como ele funciona.NetDNA anfitriões compilado e versão do Bootstrap CSS , JS e CSS tema opcional minified . Você pode incluí-los como seguir<- Último CSS compilado e minified -><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><- Tema opcional -><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"><- Mais recentes compilados e minified JavaScript -><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"> </ script>Desenvolver com Bootstrap v3.0.0HTML básicoA seguir, a estrutura HTML básico que será utilizado para o nosso projetover plainprint ?<! DOCTYPE html>
<html>
<head>
template <title> Bootstrap V3 </ title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<- Bootstrap ->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<- Calço HTML5 e suporte Respond.js IE8 de elementos HTML5 e consultas de mídia ->
<- [if lt IE 9 ]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js"> </ script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js"> </ script>
< [ endif ] ->
</ head>
<body>
<h1> Olá, mundo! </ h1>
<- JQuery (necessário para plugins de 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="bootstrap-3.0.0/dist/js/bootstrap.min.js"> </ script>
</ body>
</ html>Note-se que html5shiv.js e respond.min.js são adicionados neste modelo para apoio IE8. Adicionando estes arquivos devem Bootstrap versão 3.Nós colocamos a pasta de inicialização - 3.0.0 dentro da pasta do twitter -bootstrap , que é colocado dentro da raiz do nosso servidor web. Todos os arquivos html estaremos criando vai ser colocado dentro da pasta do twitter -bootstrap . Finalidade de afirmar isso não é nada , mas para facilitar o seu processo de implantação.personalizaçãoNós estamos indo para personalizar a saída dos estilos de caixa de CSS do Bootstrap . Então , sem perturbar o arquivo CSS original, que está dentro da pasta dist de bootstrap - 3.0.0 , vamos criar um arquivo CSS separado chamado custom.css na mesma pasta . Nós, então, incluir esse arquivo CSS dentro de nossos arquivos HTML abaixo apenas o arquivo CSS de origem. Desta forma , seremos capazes de substituir os estilos padrão quando quiser, mas , se Bootstrap atualiza -se , o arquivo CSS original também pode atualizado sem perturbar nossa própria personalização. Sugerimos que você seguir este método no seu processo de desenvolvimento também .Criação de navegaçãoPara a criação de navegação irá adicionar o seguinte código em nosso arquivo HTML, logo após a tag body abrindo.ver plainprint ?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li> <a href="new.html" class="navbar-brand">
<img src="logo.png"> </ a> </ li>
<li class="active"> <a href="#"> Home < / a> < / li>
<li> <a href="price.html"> Preço < / a> < / li>
<li> <a href="contact.html"> Contato </ a> </ li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> social <b class="caret"> </ b> </ a>
<ul class="dropdown-menu">
<li class="socials"> <g:plusone annotation="inline" width="150"> </ g: plusone > </ li>
<li class="socials"> <div class = - href = dados " https://developers.facebook.com/docs/plugins/ " - largura de dados = " A largura de pixel do plugin " "fb -like" de dados - height = " o pixel altura do plugin " - colorscheme data = "luz" de layout de dados = "standard " para a ação de dados = " como " data-show -faces = "true" data- send = "false" > < / div> < / li>
<li class="socials"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </ a>
<script> ! function ( d , s, id) {var
</ ul>
</ li>
</ ul>
</ nav >Para a navegação , Bootstrap utiliza classe " navbar " no nível de contêiner . Assim, é atribuído ao elemento nav que detém a totalidade de navegação.Temos usado classe " navbar -inversa ", juntamente com a alterar a cor padrão do escuro barra de navegação em vez do padrão mais leve. classe " navbar - fixo- top ' garante que a barra de navegação permanece fixo na primeira posição quando rolar nossa página HTML.Usando papel = " navegação " é novo no Bootstrap V3.0.0 ao criar navegação. Bootstrap recomenda usar isso para navbars para fins de acessibilidade .Neste ponto, nós adicionamos 'padding -top: 80px ; "para o corpo no arquivo custom.css . Número pf pixels adicionados como top padding para o corpo podem variar, mas a menos que você fizer isso, parte superior de nosso conteúdo após navbar serão ocultados.Dentro do recipiente nav , temos uma lista não ordenada com a classe 'nav ' e ' navbar -nav " . Dentro desta lista não ordenada. cada item da lista possui um link na navegação.classe " navbar -brand 'é usado para apresentar o nome da marca. Nós usamos uma imagem para isso. Desde a altura da nossa imagem é mais do que a altura da linha da barra de navegação , fizemos alguma personalização aqui. Nós aumentamos a propriedade 'line-height ' do ' . Navbar -nav > li> a' para 50px 20px em vez de padrão. Fizemos também o 16px tamanho da fonte.Para a maior ligação direita, nós adicionamos suspensa. Para que a classe ' suspenso ' é adicionado ao li associado , só depois disso, uma âncora é adicionado ter duas classes ' suspensa -toggle "e" acento circunflexo " . Esta âncora realmente detém o texto âncora social em nosso projeto. Este li então mantém uma lista não ordenada dentro desta e de novo cada item da lista da lista aninhada tem um link apresentado na lista suspensa .Nós adicionamos plugins sociais na lista suspensa . Primeiro li detém marcação para Google Plus , segundo li tem marcação para Facebook e terceiro li detém marcação e algum script js para exibir botão Twitter.Além disso, você tem que adicionar a seguinte marcação e roteiro logo após a tag body de abertura, para fazer o botão Facebook para trabalharver plainprint ?
<div id="fb-root"> </ div>ver plainprint ?
(function ( d , s, id) {
js var , FJS = d.getElementsByTagName (s) [0];
if ( d.getElementById (id) ) return ;
js = d.createElement (s) ; js.id = id;
js.src = "/ / connect.facebook.net / pt_BR / all.js # XFBML = 1" ;
fjs.parentNode.insertBefore ( js, FJS );
} ( documento , ' script' , ' facebook- jssdk '));Para fazer o trabalho Twitter Button, nós adicionamos o seguinte script imediatamente antes da tag de fechamento corpover plainprint ?
(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);
} ) ( ) ;Utilizou-se o seguinte estilo para adicionar um pouco adicionando aos botões sociais com a classe ' socials 'ver plainprint ?
socials . {
padding: 10px ;
}Isto conclui a nossa navegação .Criar slideshow com carousalPara criar um slideshow logo abaixo da barra de navegação , na página inicial do nosso projecto. vamos usar a seguinte marcaçãover plainprint ?
<div id="carousel-example-generic" class="carousel slide">
<- Indicadores ->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </ li>
<li data-target="#carousel-example-generic" data-slide-to="1"> </ li>
<li data-target="#carousel-example-generic" data-slide-to="2"> </ li>
</ ol>
<- Wrapper para slides ->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg" alt="...">
<div class="carousel-caption">
<h1> grandes Desktops estão em toda parte </ h1>
<p> <button class="btn btn-success btn-lg"> Tente experimental de 30 dias agora </ p>
</ div>
</ div>
<div class="item">
<img src="mobile.jpg" alt="...">
<div class="carousel-caption">
<h1> Mobiles estão superando desktops </ h1>
<p> <button class="btn btn-success btn-lg"> Tente experimental de 30 dias agora </ p>
</ div>
</ div>
<div class="item">
<img src="cloud1.jpg" alt="...">
<div class="carousel-caption">
<h1> Empresas estão adotando Cloud computing rápido </ h1>
<p> <button class="btn btn-success btn-lg"> Tente experimental de 30 dias agora </ 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="icon-next"> </ span>
< / a>
</ div>
</ div>Existem quatro partes do Carousal . O recipiente principal é definida usando uma tag div e ' carrossel de slides ' classe é atribuído a ele.Depois, há uma lista ordenada com ' carrossel ' classe -indicadores associados a ela. Cada um dos item da lista neste ol refere-se a um slide. classe "ativo" é atribuído para o slide que carrega por padrão quando a página é carregada . Quando renderizado, você pode vê-los como pequenos círculos logo abaixo da legenda.Em seguida , cada slide ( imagem ) é colocado dentro de uma div tag e classe 'item' é atribuído a ele . Cada um desses itens novamente aninha um div com a classe ' carrossel -caption ' atribuído a ele. carrossel -caption detém alguma marcação que é exibido como legendas , juntamente com a imagem. Temos um h1 e um botão envolto em um parágrafo aqui, mas você pode ter a sua própria marcação.A última parte é para o próximo anterior e slides / slide pelo controle. Isso é definido utilizando 'esquerda' e ' carrossel -control "para anterior e classes" de controle de carrossel ' para o próximo 'direita' e .' icon- prev' classes ' e -ícone ao lado ' são usados para ícones seguintes e anteriores .Fizemos alguma personalização no carousal padrão. Queríamos que as legendas, indicadores e ícones seguintes / anteriores a serem prestados alguns pixels acima é posição padrão.Para isso, nós adicionamos os seguintes estilos em nosso arquivo custom.cssver plainprint ?
. . item de carrossel - interior. carrossel - caption {
position: absolute ;
top : 200px
}
. carrossel -indicadores {
position: absolute ;
top : 400px ;
}
. navbar {
margin-bottom : 0;
}
. navbar -nav > li> a {
line-height : 50px ;
font-size: 16px
}Nós também ter personalizado h1 , adicionando uma margem de fundo de 30 pixels para ele .ver plainprint ?
h1 {
margin-bottom : 30px
}imagem ResponsiveVocê já deve ter notado que para cada uma das imagens na apresentação de slides, temos usado classe " img- responsivo . Este é um novo recurso no Bootstrap v3.0.0 . Usando a classe ' img- responsivo ", juntamente com tag img , Bootstrap torna as imagens responsivo.criando GradeAbaixo a apresentação, nós colocamos nosso conteúdo usando grades. Nós abrimos a grade com uma div com classe "recipiente" . Note que nós estamos indo para desenvolver um site ágil e ao contrário das versões anteriores do Bootstrap , aqui, temos classe única para o recipiente eo responde por padrão.Container div aninha número de divs (três na primeira linha e seis na segunda linha ), com classe ' row' associados a eles para criar linhas de grade do Bootstrap .cada linha , em seguida, detém divs com classe " col -xy 'para criar colunas. Valor de x pode ser xs para dispositivos móveis, sm para tablets , MD para laptops e telas de desktop menores e lg para grandes telas de desktop . é preciso uma primeira abordagem móvel. Valor de y pode ser qualquer inteiro positivo, mas o número total de colunas em uma grade nem deve exceder 12. Em nosso projeto usamos lg por uma questão de simplicidade , mas desde que nós temos feito isso, você pode ter uma experiência empilhadas , enquanto observa o site do projeto em móveis ou tablets.Em alguns dias teremos um tutorial completo sobre o sistema de grade do Twitter Bootstrap V3.0.0 e lá vamos explorar é grandiosidade das capacidades de resposta.Neste exemplo , temos queria três colunas iguais de largura em nossa primeira linha , por isso usamos ' col -lg -4' para todas as colunas . Na segunda linha , nós fizemos isto ' col -lg -2 ", uma vez que queríamos seis colunas .Segue-se a marcação para grade que contém duas linhas , a primeira linha tem três colunas ea segunda linha tem seis colunas.ver plainprint ?
<div class="row barone">
<div class="col-lg-2">
<p> <img src="http://www.w3resource.com/images/w3resourcelogo.gif"> </ p>
</ div>
<div class="col-lg-2">
<p> <img src="http://w3resource.com/update-images/php.png"> </ p>
</ div>
<div class="col-lg-2">
<p> <img src="http://w3resource.com/update-images/mysql-logo.jpg"> </ p>
</ div>
<div class="col-lg-2">
<p> <img src="http://w3resource.com/update-images/javascript-logo.png"> </ p>
</ div>
<div class="col-lg-2">
<p> <img src="http://w3resource.com/update-images/java.png"> </ p>
</ div>
<div class="col-lg-2">
<p> <img src="http://w3resource.com/update-images/postgresql.png"> </ p>
</ div>
</ div>Acabamos a grade com uma hora e um rodapé com seguinte marcaçãover plainprint ?
<hr>
<p> Copyright @ 2013-14 por ToDo App . </ p>O uso de tabelasNa página price.html do nosso projeto , estamos usando uma tabela para processar uma tabela de preços . Usamos seguinte marcaçãover plainprint ?
table-bordered"> class="table <table
<thead>
<tr>
<th> Recursos </ th>
<th> Individual </ th>
<th> Pequeno Team < / th>
Equipe Médio <th> </ th>
<th> Empresa </ th>
</ tr>
</ thead >
<tbody>
<tr>
<td> <h3> Não. Dos 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 treinamento </ 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 Suporte </ 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 semanal </ 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-warning btn-lg"> $ 9/month < / button> </ td>
<td> <button type="button" class="btn btn-warning btn-lg"> $ 19/Month < / button> </ td>
<td> <button type="button" class="btn btn-warning btn-lg"> $ 49/mês < / button> </ td>
<td> <button type="button" class="btn btn-warning btn-lg"> $ 99/mês < / button> </ td>
</ tr>
<tr>
<td> </ td>
<td> <button type="button" class="btn btn-success btn-lg"> Comprar < / button> </ td>
<td> <button type="button" class="btn btn-success btn-lg""> Comprar < / button> </ td>
<td> <button type="button" class="btn btn-success btn-lg""> Comprar < / button> </ td>
<td> <button type="button" class="btn btn-success btn-lg""> Comprar < / button> </ td>
</ tr>
</ tbody>
</ table>Duas classes ' tabela' e que ' table- fronteira " são usados são css forma original de Bootstrap padrão. Mas nós fizemos algumas personalizações para fazer as cabeças de mesa olhar diferente , adicionando seguinte css em nosso arquivo customize.cssver plainprint ?
ª {
background- color: # 428bca ;
color: # ec8007 ;
z -index: 10;
text-shadow : 1px 1px 1px # fff ;
font-size: 24px ;
}usando emblemasTemos usado classe "emblema" para a exibição de alguns textos dentro de nossa mesa. Temos personalizado classe crachá também com seguinte cssver plainprint ?
. crachá {
background- color: # 428bca ;
color: # fff ;
font-size: 22px ;
}Por esta e página contact.html , nós adicionamos outra regra css em customize.cssver plainprint ?
. recipiente > h1 {
text-align : center;
}Isso faz com que o centro de h1 alinhados .usando formaNo arquivo contact.html criamos três colunas e na primeira coluna , temos incorporado a partir . Temos usado estilos padrão para isso.ver plainprint ?
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label"> e-mail < / label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</ div>
</ div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label"> Nome < / label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</ div>
</ div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label"> País < / label>
<div class="col-lg-10">
<select>
<option> EUA </ option>
<option> Índia </ option>
<option> Reino Unido </ option>
<option> Autralia </ option>
< / select>
</ div>
</ div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label"> mensagem < / label>
<div class="col-lg-10">
<textarea rows="5" cols="50"> </ textarea >
</ div>
</ div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default"> Enviar < / button>
</ div>
</ div>
</ form>"forma horizontal " classe coloca os controles de formulários horizontalmente. Note que não é o papel = " forma ", acrescentou para a acessibilidade. Este é de novo característica da versão 3.0.0 .Para colocar cada do controlo de formulário 3.0.0 Bootstrap utiliza uma nova classe "forma - grupo " .Na segunda coluna da grade nesta página , colocamos um texto simples.Adicionando mapa do GoogleNa terceira coluna da grade na página contact.html , acrescentamos Google Mapa. Para isso , usamos a seguinte marcaçãover plainprint ?
<div id="map_canvas"> </ div>
</ div>E os seguintes js , que foi adicionado no topo do arquivo HTML dentro da cabeçaver plainprint ?
function initialize () {
var map_canvas = document.getElementById (' map_canvas ');
map_options var = {
centro: novo 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 ( window , 'load', inicializar );E você deve adicionar a seguinte tag script antes da referida jsver plainprint ?
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>Você tem que adicionar o estilo a seguir em custom.css para o mapa a ser prestado corretamentever plainprint ?
# { map_canvas
width: 400px ;
height: 400px ;
}É assim que criamos o nosso primeiro projeto simples, baseada no Twitter Bootstrap V3.0.0 . Mas nós apenas arranhamos a superfície. Esta série irá atualizar todo o Twitter Bootstrap Tutorial temos que a versão 3.0.0 explorar novas técnicas e personalizações.Dúvidas? Sugestões? Se gabar ? Junte-se à discussão abaixo . Para os próximos tutoriais , por favor, assine o nosso feed .AnteriorPróximo << >>Classifique este tutorialSua classificação : não definidoCompartilhe este tutorialRSS Feedcontinue lendovisão geral CSSTutorial sistema de gradeDisposição tutorialprojeto ResponsiveTipografia tutorialProcurando por algum outro tutorial?Atualizações recentesTrabalhando com Ajax , PHP e MySQLAjax TutorialCriar imagem Responsive e Content Slider com OrbitPython 3.2 TutorialResponsive Web Design com o Twitter Bootstrap
Nenhum comentário:
Postar um comentário