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.

html css twitter-bootstrap responsive-design Manuel Zapata
fonte

Respostas:

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
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

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