English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico do Bootstrap

Plugins do Bootstrap

Configuração do Ambiente Bootstrap

A instalação do Bootstrap é muito fácil. Este capítulo explicará como baixar e instalar o Bootstrap, discutirá a estrutura de arquivos do Bootstrap e demonstrará seu uso por meio de um exemplo.

Baixe o Bootstrap

Você pode baixar o Bootstrap https://getbootstrap.com/docs/3.4/ No site getbootstrap.com você pode baixar a versão mais recente do Bootstrap. Quando você clicar neste link, você verá a página conforme mostrado a seguir:

Clique no link "Download Bootstrap" para acessar a página a seguir:


Você verá dois botões:

  • Download Bootstrap：Baixe o Bootstrap. Clique no botão para baixar a versão pré-compilada e comprimida do Bootstrap CSS, JavaScript e fontes. Não inclui documentos e arquivos de código-fonte originais.

  • Download Source：Baixe o código-fonte. Clique no botão para obter o código-fonte mais recente do Bootstrap LESS e JavaScript diretamente do from.

Se você usar o código-fonte não compilado, você precisará compilar os arquivos LESS para gerar arquivos CSS reutilizáveis. Para compilar os arquivos LESS, o Bootstrap oficial suporta apenas RecessEste é o baseado no Recess do Twitter less.js Avisos de CSS

Para uma melhor compreensão e uso mais conveniente, usaremos a versão pré-compilada do Bootstrap neste tutorial.

Como os arquivos são compilados e comprimidos, na desenvolvimento funcional independente, você não precisa incluir esses arquivos independentes a cada vez.

Este tutorial foi escrito usando a versão mais recente (Bootstrap 3）。

Estrutura de arquivo

Bootstrap pré-compilado

Quando você baixar a versão pré-compilada do Bootstrap, descomprima o arquivo ZIP e verá os seguintes arquivos/Estrutura de diretório:

Como mostrado na figura acima, você pode ver os CSS e JS compilados (bootstrap.*Também inclui os CSS e JS compilados e comprimidos (bootstrap.min.*Também inclui os fontes Glyphicons, que é um tema opcional do Bootstrap.

Código-fonte do Bootstrap

Se você baixou o código-fonte do Bootstrap, a estrutura do arquivo será conforme mostrado a seguir:

  • less/、js/ e fonts/ Os arquivos sob o diretório são o código-fonte CSS, JS e fontes de ícones do Bootstrap.

  • dist/ as pastas contêm os arquivos e pastas listados na parte de download pré-compilado acima.

  • docs-assets/、examples/ e todos os *.html o arquivo é do documento Bootstrap.

Modelo HTML

Um modelo básico de HTML que usa Bootstrap, conforme mostrado a seguir:

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<title>Template Bootstrap</title>
　　　　　　<meta name="viewport" content="largura=device-largura, inicial-scale=1.0">
　　　　　　<!--　carregar o Bootstrap　-->
　　　　　　<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/"bootstrap.min.css" rel="stylesheet">
　
　　　　　　<!--　HTML5　Shiv e Respond.js são usados para permitir que o IE8　suportam HTML5elementos e media queries　-->
　　　　　　<!--　Atenção: Se você passar por file://　　Se o arquivo Respond.js não for carregado, ele não terá efeito　-->
　　　　　　<!--[if lt IE　9]>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
　　　　　　<![endif]-->
　　　</<head>
　　　<body>
　　　　　　<h1>Olá, mundo!</h1>
　
　　　　　　<!--　jQuery (Os plugins JavaScript do Bootstrap precisam do jQuery)　-->
　　　　　　<script　src="https://code.jquery.com/jquery.js"></script>
　　　　　　<!--　Inclui todos os plugins compilados　-->
　　　　　　<script src="js/bootstrap.min.js"></script>
　　　</body>
</html>

Aqui, você pode ver que inclui jquery.js、bootstrap.min.js e bootstrap.min.css Arquivo, usado para transformar um arquivo HTML comum em um template que usa Bootstrap.

Detalhes de cada elemento no código acima serão explicados em Visão geral do CSS do Bootstrap Explicação detalhada do capítulo.

Exemplo online

Agora vamos tentar usar o Bootstrap para exibir "Olá, mundo!":

　<h1>Olá, mundo!</h1>

Recomendação do Staticfile CDN

No Brasil, recomenda-se usar a biblioteca no Staticfile CDN:

<!--　Os novos arquivos CSS do núcleo do Bootstrap　-->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/"bootstrap.min.css" rel="stylesheet">
　
<!--　Arquivo jQuery. Certifique-se de que ele seja carregado antes do bootstrap.min.js　-->
<script　src="https://cdn.staticfile.org/jQuery/2.1.1/jquery.min.js"></script>
　
<!--　Os arquivos JavaScript do núcleo mais recente do Bootstrap　-->
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Além disso, você ainda pode usar os seguintes serviços de CDN:

Introdução ao CSS BootstrapIntrodução ao Bootstrap