bootstrap sass
v3.4.1
bootstrap-sass é uma versão do Bootstrap 3 com tecnologia Sass, pronta para ser usada diretamente em seus aplicativos com tecnologia Sass.
Este é o Bootstrap 3 . Para Bootstrap 4 , use Bootstrap rubygem se você usar Ruby, e o repositório principal caso contrário.
Consulte o guia apropriado para o ambiente de sua escolha:
Ruby nos trilhos.
Caramanchão.
npm/Node.js.
bootstrap-sass é fácil de colocar no Rails com o pipeline de ativos.
No seu Gemfile você precisa adicionar a gema bootstrap-sass e garantir que a gema sass-rails esteja presente - ela é adicionada às novas aplicações Rails por padrão.
gema 'bootstrap-sass', '~> 3.4.1'gem 'sassc-rails', '>= 2.1.0'
bundle install e reinicie seu servidor para disponibilizar os arquivos por meio do pipeline.
Importe estilos Bootstrap em app/assets/stylesheets/application.scss :
// "bootstrap-sprockets" deve ser importado antes de "bootstrap" e "bootstrap/variables"@import "bootstrap-sprockets";@import "bootstrap";
bootstrap-sprockets devem ser importados antes do bootstrap para que as fontes dos ícones funcionem.
Certifique-se de que o arquivo tenha extensão .scss (ou .sass para sintaxe Sass). Se você acabou de gerar um novo aplicativo Rails, ele pode vir com um arquivo .css . Se este arquivo existir, ele será servido em vez de Sass, então renomeie-o:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Em seguida, remova todos os *= require_self e *= require_tree . declarações do arquivo sass. Em vez disso, use @import para importar arquivos Sass.
Não use *= require no Sass ou suas outras folhas de estilo não poderão acessar os mixins ou variáveis do Bootstrap.
Bootstrap JavaScript depende de jQuery. Se você estiver usando Rails 5.1+, adicione a gem jquery-rails ao seu Gemfile:
gema 'jquery-rails'
$ instalação do pacote
Exigir Javascripts Bootstrap em app/assets/javascripts/application.js :
//= requer jquery //= requer bootstrap-sprockets
bootstrap-sprockets e bootstrap não devem ser incluídos em application.js .
bootstrap-sprockets fornece arquivos Bootstrap Javascript individuais ( alert.js ou dropdown.js , por exemplo), enquanto bootstrap fornece um arquivo concatenado contendo todos os Bootstrap Javascripts.
Ao usar o pacote bootstrap-sass Bower em vez da gem no Rails, configure os assets em config/application.rb :
# Bower assets pathsroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path| config.sass.load_paths << bower_path
config.assets.paths << bower_pathend# Pré-compilar Bootstrap fontsconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# Precisão mínima do número Sass exigida por bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Valor::Número.precisão].max Substitua as instruções Bootstrap @import em application.scss por:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
Substitua a diretiva Bootstrap require em application.js por:
//= requer bootstrap-sass/assets/javascripts/bootstrap-sprockets
Certifique-se de que sprockets-rails seja pelo menos v2.1.4.
bootstrap-sass não é mais compatível com Rails 3. A versão mais recente do bootstrap-sass compatível com Rails 3.2 é v3.1.1.0.
O pacote bootstrap-sass Bower é compatível com node-sass 3.2.0+. Você pode instalá-lo com:
$ bower instalar bootstrap-sass
Sass, JS e todos os outros ativos estão localizados em ativos.
Por padrão, o campo principal bower.json lista apenas o _bootstrap.scss principal e todos os ativos estáticos (fontes e JS). Isso é compatível por padrão com gerenciadores de ativos como wiredep.
Se você usar mincer com node-sass, importe Bootstrap assim:
Em application.css.ejs.scss (NB .css.ejs.scss ):
//Importar caminhos de ativos do mincer helper Integration@import "bootstrap-mincer";@import "bootstrap";
Em application.js :
//= requer bootstrap-sprockets
Veja também este exemplo manifest.js para mincer.
$ npm instalar bootstrap-sass
Por padrão, todo o Bootstrap é importado.
Você também pode importar componentes explicitamente. Para começar com uma lista completa de módulos, copie o arquivo _bootstrap.scss em seus ativos como _bootstrap-custom.scss . Em seguida, comente os componentes que você não deseja de _bootstrap-custom . No arquivo Sass da aplicação, substitua @import 'bootstrap' por:
@import 'bootstrap-custom';
bootstrap-sass requer precisão mínima de número Sass de 8 (o padrão é 5).
A precisão é definida para Ruby automaticamente ao usar a gem sassc-rails . Ao usar a versão npm ou Bower com Ruby, você pode configurá-la com:
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
Bootstrap requer o uso do Autoprefixer. O Autoprefixer adiciona prefixos de fornecedores às regras CSS usando valores de Can I Use.
Para corresponder ao nível de compatibilidade do navegador do Bootstrap upstream, defina a opção de browsers do Autoprefixer como:
[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]
assets/javascripts/bootstrap.js contém todo o JavaScript do Bootstrap, concatenado na ordem correta.
Se você usar Sprockets ou Mincer, poderá exigir bootstrap-sprockets para carregar os módulos individuais:
// Carrega todo o JavaScript do Bootstrap //= requer bootstrap-sprockets
Você também pode carregar módulos individuais, desde que também precise de alguma dependência. Você pode verificar as dependências na documentação do Bootstrap JS.
//= requer bootstrap/scrollspy //= requer bootstrap/modal //= requer bootstrap/dropdown
As fontes são referenciadas como:
"#{$icon-font-path}#{$icon-font-name}.eot" O padrão de $icon-font-path é bootstrap/ se auxiliares de caminho de ativos forem usados, e ../fonts/bootstrap/ caso contrário.
Ao usar bootstrap-sass com Compass, Sprockets ou Mincer, você deve importar os auxiliares de caminho relevantes antes do próprio Bootstrap, por exemplo:
@import "bootstrap-bússola";@import "bootstrap";
Importe o Bootstrap para um arquivo Sass (por exemplo, application.scss ) para obter todos os estilos, mixins e variáveis do Bootstrap!
@import “bootstrap”;
Você também pode incluir o tema Bootstrap opcional:
@import "bootstrap/tema";
A lista completa de variáveis do Bootstrap pode ser encontrada aqui. Você pode substituí-los simplesmente redefinindo a variável antes da diretiva @import , por exemplo:
$navbar-default-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "bootstrap";
Bootstrap está disponível como um módulo Eyeglass. Após instalar o Bootstrap via NPM você pode importar a biblioteca Bootstrap via:
@import "bootstrap-sass/bootstrap"
ou importe apenas as partes do Bootstrap que você precisa:
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
A versão do Bootstrap for Sass pode ser diferente da versão upstream no último número, conhecido como PATCH. A versão do patch pode estar à frente da versão secundária correspondente do upstream. Isso acontece quando precisamos liberar alterações específicas do Sass.
Antes da v3.3.2, a versão Bootstrap for Sass costumava refletir a versão upstream, com um número adicional para alterações específicas do Sass. Isso foi alterado devido a problemas de compatibilidade do Bower e do npm.
As versões upstream versus as versões Bootstrap for Sass são:
| A montante | Atrevido |
|---|---|
| 3.3.4+ | mesmo |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
Sempre consulte CHANGELOG.md ao atualizar.
Se você quiser ajudar no desenvolvimento do bootstrap-sass, leia esta seção.
Manter o bootstrap-sass sincronizado com as alterações upstream do Bootstrap costumava ser um processo manual demorado e sujeito a erros. Com o Bootstrap 3 introduzimos um conversor que automatiza isso.
Nota: se você deseja usar apenas o Bootstrap 3, consulte a seção de instalação acima.
Alterações upstream no projeto Bootstrap agora podem ser obtidas usando a tarefa convert rake.
Aqui está um exemplo de execução que extrairia o branch master do repositório principal twbs/bootstrap:
rake convert
Isso converterá o LESS mais recente em Sass e atualizará para o JS mais recente. Para converter uma ramificação ou versão específica, passe o nome da ramificação ou o hash de commit como o primeiro argumento da tarefa:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
O script do conversor mais recente está localizado aqui e faz o seguinte:
Converte arquivos Bootstrap LESS upstream em seu arquivo SCSS correspondente.
Copia todo o JavaScript upstream em assets/javascripts/bootstrap , um manifesto Sprockets em assets/javascripts/bootstrap-sprockets.js e uma concatenação em assets/javascripts/bootstrap.js .
Copia todos os arquivos de fontes originais em assets/fonts/bootstrap .
Define Bootstrap::BOOTSTRAP_SHA em version.rb para o branch sha.
Este conversor converte totalmente LESS original em SCSS. A conversão é automática, mas requer instruções para determinadas transformações (ver saída do conversor). Envie problemas do GitHub marcados com conversion .
bootstrap-sass tem vários contribuidores importantes:
Thomas McDonald
Tristan Harward
Peter Gumeson
Gleb Mazovetskiy
e um número significativo de outros colaboradores.
bootstrap-sass é usado para construir alguns projetos incríveis em toda a web, incluindo Diaspora, rails_admin, Michael Hartl's Rails Tutorial, gitlabhq e kandan.
