Bootstrap - configuração do ambiente

É muito fácil de configurar e começar a usar o Bootstrap. Este capítulo irá explicar como baixar e configurar o Bootstrap. Também discutiremos a estrutura do arquivo Bootstrap e demonstraremos seu uso com um exemplo.

Baixar Bootstrap

Você pode baixar a última versão do Bootstrap em https://getbootstrap.com/. Ao clicar neste link, você verá a tela abaixo -

Aqui você pode ver dois botões -

Download Bootstrap- Clicando aqui, você pode baixar as versões pré-compiladas e reduzidas de Bootstrap CSS, JavaScript e fontes. Nenhuma documentação ou arquivos de código-fonte originais estão incluídos.
Download Source - Clicando aqui, você pode obter o código-fonte LESS e JavaScript mais recente do Bootstrap diretamente do GitHub.

Se você trabalha com o código-fonte não compilado do Bootstrap, precisa compilar os arquivos LESS para produzir arquivos CSS utilizáveis. Para compilar os arquivos MENOS em CSS, Bootstrap oficialmente só aceita Recess , que é hinter CSS do Twitter com base em less.js .

Para melhor compreensão e facilidade de uso, usaremos a versão pré-compilada do Bootstrap ao longo do tutorial. Como os arquivos são compilados e minimizados, você não precisa se preocupar o tempo todo incluindo arquivos separados para funcionalidade individual. No momento em que este tutorial foi escrito, a versão mais recente (Bootstrap 3) foi baixada.

Estrutura de arquivo

Bootstrap pré-compilado

Depois que a versão compilada do Bootstrap for baixada, extraia o arquivo ZIP e você verá a seguinte estrutura de arquivo / diretório -

Como você pode ver, existem CSS e JS compilados (bootstrap. *), Bem como CSS e JS compilados e minimizados (bootstrap.min. *). Fontes de Glyphicons estão incluídas, pois é o tema Bootstrap opcional.

Código-fonte do bootstrap

Se você baixou o código-fonte do Bootstrap, a estrutura do arquivo seria a seguinte -

Os arquivos em less / , js / e fonts / são o código-fonte para Bootstrap CSS, JS e fontes de ícone (respectivamente).
A pasta dist / inclui tudo listado na seção de download pré-compilado acima.
docs-assets / , examples / e todos os arquivos * .html são documentação do Bootstrap.

Modelo HTML

Um modelo HTML básico usando Bootstrap seria parecido com isto -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[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>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Aqui você pode ver o jquery.js, bootstrap.min.js e bootstrap.min.cssarquivos incluídos para criar um arquivo HTM normal para o modelo inicializado. Apenas certifique-se de incluir a biblioteca jQuery antes de incluir a biblioteca Bootstrap.

Mais detalhes sobre cada um dos elementos neste trecho de código acima serão discutidos no capítulo Visão geral do CSS do Bootstrap .

Exemplo

Agora vamos tentar um exemplo usando o modelo acima. Experimente o seguinte exemplo usando a opção Live Demo disponível no canto superior direito da caixa de código de exemplo abaixo em nosso site -

<h1>Hello, world!</h1>

Em todos os capítulos subsequentes, usamos texto fictício do site https://www.lipsum.com/.