Estender · Bootstrap em português do Brasil

Bootstrap é feito com LESS em seu núcleo, uma linguagem de folha de estilo dinâmica criada por nosso bom amigo, Alexis Sellier . Isso torna o desenvolvimento de CSS baseado em sistemas mais rápido, fácil e divertido.

Por que MENOS?

Um dos criadores do Bootstrap escreveu um post rápido no blog sobre isso , resumido aqui:

Bootstrap compila mais rápido ~ 6x mais rápido com menos em comparação com Sass
Menos é escrito em JavaScript, tornando mais fácil para nós mergulhar e corrigir em comparação com Ruby com Sass.
Menos é mais; queremos sentir que estamos escrevendo CSS e tornando o Bootstrap acessível a todos.

O que está incluído?

Como uma extensão do CSS, o LESS inclui variáveis, mixins para trechos de código reutilizáveis, operações para matemática simples, aninhamento e até funções de cores.

Saber mais

Visite o site oficial em http://lesscss.org/ para saber mais.

Como nosso CSS é escrito com Less e utiliza variáveis e mixins, ele precisa ser compilado para implementação final da produção. Aqui está como.

Observação: se você estiver enviando uma solicitação pull ao GitHub com CSS modificado, deverá recompilar o CSS por meio de qualquer um desses métodos.

Ferramentas para compilar

Linha de comando

Siga as instruções no leia-me do projeto no GitHub para compilar via linha de comando.

JavaScript

Baixe o Less.js mais recente e inclua o caminho para ele (e Bootstrap) no arquivo <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Para recompilar os arquivos .less, basta salvá-los e recarregar sua página. Less.js os compila e os armazena no armazenamento local.

Aplicativo não oficial para Mac

O aplicativo não oficial para Mac observa diretórios de arquivos .less e compila o código em arquivos locais após cada salvamento de um arquivo .less monitorado. Se desejar, você pode alternar as preferências no aplicativo para redução automática e em qual diretório os arquivos compilados acabam.

Mais aplicativos

Crunch

Crunch é um editor e compilador MENOS de ótima aparência, construído no Adobe Air.

CodeKit

Criado pelo mesmo cara que o aplicativo não oficial para Mac, o CodeKit é um aplicativo para Mac que compila LESS, SASS, Stylus e CoffeeScript.

Simples

Aplicativo para Mac, Linux e Windows para compilação de arrastar e soltar de MENOS arquivos. Além disso, o código-fonte está no GitHub .

Inicie rapidamente qualquer projeto da Web inserindo o CSS e o JS compilados ou minificados. Camada em estilos personalizados separadamente para atualizações e manutenção fáceis.

Estrutura do arquivo de configuração

Baixe o Bootstrap compilado mais recente e coloque em seu projeto. Por exemplo, você pode ter algo assim:

  aplicativo/
      layouts/
      modelos/
  público/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      imagem/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Utilize o modelo inicial

Copie o seguinte HTML base para começar.

<html>
  <cabeça>
    <title> Modelo do Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "folha de estilo" >  
  </head>
  <corpo>
    <h1> Olá, mundo! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Camada no código personalizado

Trabalhe em seu CSS personalizado, JS e muito mais, conforme necessário, para tornar o Bootstrap seu com seus próprios arquivos CSS e JS separados.

<html>
  <cabeça>
    <title> Modelo do Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "folha de estilo" >  
    <!-- Projeto -->
    <link href = "public/css/application.css" rel = "folha de estilo" >  
  </head>
  <corpo>
    <h1> Olá, mundo! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projeto -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Estendendo o Bootstrap

Construído com MENOS