Jak uzyskać tylko responsywną siatkę z Bootstrap 3?

109

Muszę dodać funkcje projektowania responsywnego do mojej aplikacji internetowej za pomocą Twitter Bootstrap. Chcę tylko responsywnego zachowania, nie interesuje mnie typografia, komponenty ani żadne inne rzeczy zawarte w Bootstrap.

Dostałem dostosowaną wersję Bootstrap po prostu wybierając system siatki. Jednak kiedy dodaję wygenerowany CSS do mojej aplikacji, wszystkie moje style są pomieszane (nagłówek, linki i inne). Dlaczego tak się dzieje? Jak mogę uzyskać Bootstrap CSS tylko z systemem grid? Chciałbym uniknąć ręcznej modyfikacji plików Bootstrap.

html css twitter-bootstrap responsive-design Manuel Zapata
źródło

Odpowiedzi:

159

Idź do http://getbootstrap.com/customize/ i przełącz dokładnie to, co chcesz z frameworka BS3, a następnie kliknij „Kompiluj i pobierz”, a otrzymasz CSS i JS, które wybrałeś.

Bootstrap Customizer

Otwórz CSS i usuń wszystko oprócz siatki. Zawierają też pewne elementy normalizujące. I musisz dostosować wszystkie style w swojej witrynie do rozmiaru pudełka: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Christina
źródło
Dzięki Christina. Spodziewałem się, że istnieje sposób na uzyskanie tylko stylów siatki.
Manuel Zapata
8
Nie, pobierają również elementy pomocnicze, normalizują i scaffolding.less (który ma globalną ramkę graniczną), co wymaga dostosowania wszystkich rzeczy, które mają wypełnienie. Tak jak wcześniej, twoje pudełko miało wypełnienie 10px, a w sumie było 200px, ale wewnątrz było 180px, więc trzeba było ustawić szerokość na 180px, teraz ustawiasz szerokość na 200px lub po prostu nic i umieszczasz ją w klasie kolumny grid.
Christina
box-sizingzresetuj informacje: css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw
Costa
nadal to ma normalize.css
rab
@rab - wspomniano w odpowiedzi. Usuń go, jeśli chcesz, ale jest przydatny.
Christina,
17

Zamówienie zirafa / bootstrap-grid-only . Zawiera tylko siatkę bootstrap i responsywne narzędzia , których potrzebujesz (bez resetowania lub cokolwiek) i upraszcza złożoność pracy bezpośrednio z plikami LESS .

burrbrown
źródło
1

Sugerowałbym zamiast tego użycie http://getpreboot.com/ MDO . Od wersji 2 prebootprzenosi MNIEJ miksów / zmiennych używanych do tworzenia systemu Bootstrap 3.0 Grid i jest znacznie lżejszy niż użycie generatora CSS. W rzeczywistości, jeśli włączysz tylko, preboot.lessnie ma ŻADNEGO narzutu, ponieważ cały plik składa się z miksów / zmiennych i dlatego jest używany tylko podczas wstępnej kompilacji, a nie ostatecznego wyniku.

srquinn
źródło
1

Wygląda na to, że możesz teraz pobrać tylko siatkę dzięki nowym funkcjom pobierania Bootstrap 4s.

Richard Clifford
źródło
0

W Bootstrap 4 istnieją już oddzielne pliki w ich GitHubie. Znajdziesz je tutaj

https://github.com/twbs/bootstrap/tree/main/dist/css
Hari Das
źródło