Ir para o conteúdo principal Pular para a navegação de documentos
in English

Ferramentas de construção

Aprenda a usar os scripts npm incluídos no Bootstrap para criar nossa documentação, compilar código-fonte, executar testes e muito mais.

Nesta página

Configuração de ferramentas

Bootstrap usa scripts npm para seu sistema de compilação. Nosso package.json inclui métodos convenientes para trabalhar com a estrutura, incluindo compilação de código, execução de testes e muito mais.

Para usar nosso sistema de compilação e executar nossa documentação localmente, você precisará de uma cópia dos arquivos de origem do Bootstrap e do Node. Siga estes passos e você deve estar pronto para arrasar:

  1. Baixe e instale o Node.js , que usamos para gerenciar nossas dependências.
  2. Faça o download das fontes do Bootstrap ou faça um fork do repositório do Bootstrap .
  3. Navegue até o diretório raiz /bootstrape execute npm installpara instalar nossas dependências locais listadas em package.json .

Quando concluído, você poderá executar os vários comandos fornecidos na linha de comando.

Usando scripts npm

Nosso package.json inclui várias tarefas para o desenvolvimento do projeto. Execute npm runpara ver todos os scripts npm em seu terminal. As tarefas primárias incluem:

Tarefa Descrição
npm start Compila CSS e JavaScript, cria a documentação e inicia um servidor local.
npm run dist Cria o dist/diretório com arquivos compilados. Requer Sass , Autoprefixer e terser .
npm test Executa testes localmente após a execuçãonpm run dist
npm run docs-serve Compila e executa a documentação localmente.
Comece com o Bootstrap via npm com nosso projeto inicial! Vá para o repositório de modelos twbs/bootstrap-npm-starter para ver como construir e personalizar o Bootstrap em seu próprio projeto npm. Inclui compilador Sass, Autoprefixer, Stylelint, PurgeCSS e ícones de Bootstrap.

Sass

Bootstrap usa Dart Sass para compilar nossos arquivos fonte Sass em arquivos CSS (incluídos em nosso processo de compilação), e recomendamos que você faça o mesmo se estiver compilando Sass usando seu próprio pipeline de ativos. Anteriormente, usamos Node Sass para Bootstrap v4, mas LibSass e pacotes construídos em cima dele, incluindo Node Sass, agora estão obsoletos .

Dart Sass usa uma precisão de arredondamento de 10 e por questões de eficiência não permite ajuste deste valor. Não diminuímos essa precisão durante o processamento adicional de nosso CSS gerado, como durante a minificação, mas se você optar por fazer isso, recomendamos manter uma precisão de pelo menos 6 para evitar problemas com o arredondamento do navegador.

Prefixador automático

O Bootstrap usa o Autoprefixer (incluído em nosso processo de compilação) para adicionar automaticamente prefixos de fornecedor a algumas propriedades CSS no momento da compilação. Isso nos economiza tempo e código, permitindo que escrevamos partes-chave do nosso CSS uma única vez, eliminando a necessidade de mixins de fornecedores como os encontrados na v3.

Mantemos a lista de navegadores suportados pelo Autoprefixer em um arquivo separado em nosso repositório GitHub. Consulte .browserslistrc para obter detalhes.

RTLCSS

Bootstrap usa RTLCSS para processar CSS compilado e convertê-los em RTL – basicamente substituindo as propriedades de reconhecimento de direção horizontal (por exemplo, padding-left) com seu oposto. Ele nos permite apenas escrever nosso CSS uma única vez e fazer pequenos ajustes usando o controle RTLCSS e as diretivas de valor .

Documentação local

Executar nossa documentação localmente requer o uso do Hugo, que é instalado através do pacote hugo-bin npm. Hugo é um gerador de site estático incrivelmente rápido e bastante extensível que nos fornece: inclui básicos, arquivos baseados em Markdown, modelos e muito mais. Veja como começar:

  1. Execute a configuração de ferramentas acima para instalar todas as dependências.
  2. No diretório raiz /bootstrap, execute npm run docs-servena linha de comando.
  3. Abra http://localhost:9001/no seu navegador e voilà.

Saiba mais sobre como usar o Hugo lendo sua documentação .

Solução de problemas

Se você encontrar problemas com a instalação de dependências, desinstale todas as versões anteriores de dependência (global e local). Em seguida, execute novamente npm install.