English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Neste tutorial, você aprenderá como usar o Bootstrap 3 Versão compilada cria um template básico do Bootstrap.
Aqui, você aprenderá quão fácil é criar páginas da web usando Bootstrap. Antes de começar, certifique-se de ter um editor de código e conhecimentos básicos de HTML e CSS.
Se você estiver começando a desenvolver sites da web, por favorComece a aprender os fundamentos do HTML aqui»
Bom, vamos direto ao ponto.
Existem duas versões disponíveis para downloadBootstrap compiladoseBootstrap originaisVocê podeBaixe o arquivo Bootstrap aqui
Versão compilada e compactada de download que contém arquivos CSS e JavaScript, bem como ícones em formatos de fontes, para que o desenvolvimento da web seja mais rápido e mais fácil, enquanto o código-fonte contém todos os arquivos de CSS e JavaScript originais e cópias locais dos documentos.
Para melhor compreensão, nos concentraremos nos arquivos Bootstrap compilados. Isso economiza seu tempo, pois você não precisa se preocupar com funcionalidades individuais, incluindo arquivos individuais. Quando você decidir mover o site para o ambiente de produção, devido ao tamanho menor dos pedidos HTTP e dos downloads, pois pode compilar e comprimir arquivos, ele também pode melhorar o desempenho do site e economizar valioso largura de banda.
Depois de baixar o Bootstrap compilado, descomprima a pasta comprimida para ver a estrutura. Você encontrará a seguinte estrutura de arquivo e conteúdo.
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
Como você vê, a versão compilada do Bootstrap oferece arquivos CSS e JS compilados (bootstrap.*），e os CSS e JS compilados e compactados (bootstrap.min.*）。
arquivos de fontes glyphicons-halflings-regular.*A pasta contém quatro arquivos de fontes () . Esses arquivos de fontes contêm os ícones Glyphicon Halflings.250 ícones.
Dica:Esta é a forma mais básica do Bootstrap, que pode ser usada rapidamente em qualquer projeto da Web. Observe que os plugins JavaScript do Bootstrap requerem o jQuery. Você pode encontrar aquihttps://jquery.com/download/Baixe a versão mais recente do jQuery formulário.
Até agora, você já entendeu a estrutura e o uso dos arquivos Bootstrap. É hora de realmente usar o Bootstrap. Nesta seção, criaremos um modelo básico Bootstrap que inclui tudo o que mencionamos na estrutura do arquivo.
Vamos concluir os seguintes passos passo a passo. No final deste tutorial, você criará um arquivo HTML que exibirá a mensagem “Hello world” no navegador da Web.
Abra o seu editor de código favorito e crie um novo arquivo HTML. Comece com uma janela vazia, digite o seguinte código e salve como “basic.html” na sua área de trabalho.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatível" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic HTML File</title> </head> <body> <h1>Hello, world!</h1> </body> </html>Teste para ver‹/›
Dica:Sempre inclua a etiqueta meta viewport no corpo do documento <meta> dentro do <head>, para permitir o zoom tátil e garantir que a página seja apresentada corretamente em dispositivos móveis. Inclui também X-UA-Compatível com o modo edge do meta marcador, que informa o Internet Explorer a exibir a página da web no modo mais alto disponível.
Para definir este arquivo HTML como modelo Bootstrap, basta adicionar os arquivos CSS e JS correspondentes do Bootstrap. Você deve adicionar o arquivo JavaScript no final da página-ao fecharmarcador (ou) antes, para melhorar o desempenho da página da web.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatível" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Template Bootstrap Básico</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> <!-- Tema Bootstrap opcional --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>Teste para ver‹/›
Tudo está pronto!Após adicionar os arquivos CSS e JS do Bootstrap e a biblioteca jQuery necessária, podemos começar a desenvolver qualquer site ou aplicativo usando o framework Bootstrap.
Agora, salve o arquivo como “bootstrap-template.html”.
Atenção:É importante especificar a extensão .html-Alguns editores de texto (como o Bloco de Notas) salvam automaticamente a extensão .txt.
Abra o arquivo no navegador. Navegue até seu arquivo, então duplique-o. Ele será aberto no seu navegador web padrão. (Se não, abra o navegador e arraste o arquivo para dentro dele.)
Se você não quiser baixar e hospedar o Bootstrap ou jQuery, ainda pode usar os links de CDN (Content Delivery Network) fornecidos para incluir os arquivos CSS e JavaScript do Bootstrap e os arquivos da biblioteca jQuery JavaScript no documento.
O CDN pode oferecer uma vantagem de desempenho ao reduzir o tempo de carregamento, pois eles hospedam os arquivos do Bootstrap em múltiplos servidores espalhados pelo mundo todo e fornecem os arquivos solicitados pelos usuários a partir do servidor mais próximo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Template Bootstrap Básico</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Tema Bootstrap opcional --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>Teste para ver‹/›
Para implementar a integridade do recurso subordinado (SRI), no Bootstrap
A propriedade 'integrity' e 'crossorigin' foram adicionadas ao CDN. É uma função de segurança que, ao garantir que os arquivos obtidos pelo seu site (do CDN ou de qualquer outro local) sejam entregues sem operações inesperadas, reduz o risco de ataques provenientes de CDN danificados. Seu mecanismo de trabalho é permitir que você forneça uma hash criptografada que o arquivo obtido deve coincidir.
As propriedades 'integrity' e 'crossorigin' foram adicionadas à implementação do CDN de inicializaçãoIntegridade do recurso subordinado(SRI). É uma funcionalidade de segurança que permite garantir que os arquivos obtidos (a partir de CDN ou de qualquer outro lugar) transmitidos pelo site não foram tratados acidentalmente, aliviando o risco de ataque ao CDN. Funciona permitindo que você forneça uma hash criptografada que deve coincidir com o arquivo lido.
Dica:Se os visitantes do seu site já baixaram os arquivos do Bootstrap de outro site enquanto acessam, eles serão carregados do cache do navegador em vez de serem baixados novamente, o que reduz o tempo de carregamento.