Como obter apenas a grade responsiva do Bootstrap 3?

109

Preciso adicionar recursos de design responsivo ao meu aplicativo da web usando o Twitter Bootstrap. Eu só quero o comportamento responsivo, não estou interessado na tipografia, componentes ou qualquer outra coisa incluída no Bootstrap.

Eu tenho uma versão customizada do Bootstrap apenas selecionando o sistema de grade. No entanto, quando adiciono o CSS gerado ao meu aplicativo, todos os meus estilos ficam bagunçados (cabeçalho, links e outros). Por que isso está acontecendo? Como posso obter um CSS Bootstrap apenas com o sistema de grade? Gostaria de evitar uma modificação manual dos arquivos do Bootstrap.

— Manuel Zapata
fonte

159

Vá para http://getbootstrap.com/customize/ e alterne apenas o que deseja da estrutura BS3 e clique em "Compilar e fazer download" e você obterá o CSS e JS que escolheu.

Customizador de bootstrap

Abra o CSS e remova tudo, exceto a grade. Eles incluem algumas coisas normalizadas também. E você precisará ajustar todos os estilos em seu site para box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

— Christina
fonte

Obrigado Christina. Eu esperava que houvesse uma maneira de obter apenas os estilos de grade.

— Manuel Zapata

8

Não, eles também baixam o material de suporte, normalize e o scaffolding.less (que tem a caixa de borda global) que exige que você ajuste todas as coisas que têm preenchimento. Como antes, sua caixa tinha 10px de preenchimento e o total era 200px, mas o interior era 180px, então você teve que definir a largura para 180px, agora você define a largura para 200px ou apenas nada e cole em uma classe de coluna de grade.

— Christina

box-sizinginformações de redefinição: css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw

— Costa

ainda que normalize.css

— rab

@rab - isso é mencionado na resposta. Remova se quiser, mas é útil.

— Christina

17

Faça check- out do zirafa / bootstrap-grid-only . Ele contém apenas a grade de bootstrap e utilitários responsivos de que você precisa (sem redefinir ou nada) e simplifica a complexidade de trabalhar diretamente com os arquivos MENOS .

— Burrbrown
fonte

8

Basta escolher Grid systeme "utilitários responsivos" que lhe dá isso: http://jsfiddle.net/7LVzs/

— Jmorvan
fonte

4

Construiu um Grunt apenas com a grade Bootstrap 3.3.5:

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

~ 10 KB minimizado.

Se você precisar de outras partes do Bootstrap, apenas inclua-as em /src/less/bootstrap.less.

— Horgen
fonte

1

Eu sugeriria usar http://getpreboot.com/ do MDO em vez disso. A partir da v2, prebootback ports os mixins / variáveis MENOS usados para criar o Bootstrap 3.0 Grid System e é muito mais leve do que usar o gerador CSS. Na verdade, se você incluir apenas preboot.lessNÃO haverá sobrecarga porque o arquivo inteiro é composto de mixins / variáveis e, portanto, são usados apenas na pré-compilação e não na saída final.

— srquinn
fonte

1

Parece que você pode baixar apenas a grade agora nos novos recursos de download do Bootstrap 4s.

— Richard Clifford
fonte

0

Já faz um tempo que essa pergunta foi feita, mas talvez agora você possa abrir mão do Bootstrap por completo e usar o CSS Grid! (é mais simples, mais organizado, mais flexível e mais rápido). Veja este artigo legal: Pare de usar Bootstrap - crie um modelo de grade CSS prático para sua IU baseada em componentes

— Alex Firebrand
fonte

0

No Bootstrap 4, já existem arquivos separados em seu GitHub. Você pode encontra-los aqui

https://github.com/twbs/bootstrap/tree/main/dist/css

— Hari Das
fonte