Bagaimana cara mendapatkan grid responsif dari Bootstrap 3?

109

Saya perlu menambahkan fitur desain responsif ke aplikasi web saya menggunakan Twitter Bootstrap. Saya hanya ingin perilaku responsif, saya tidak tertarik dengan tipografi, komponen, atau hal lain yang termasuk dalam Bootstrap.

Saya mendapat versi Bootstrap yang disesuaikan hanya dengan memilih sistem grid. Namun, ketika saya menambahkan CSS yang dihasilkan ke aplikasi saya, semua gaya saya menjadi kacau (header, tautan, dan lainnya). Mengapa itu terjadi? Bagaimana saya bisa mendapatkan CSS Bootstrap hanya dengan sistem grid? Saya ingin menghindari modifikasi manual pada file Bootstrap.

html css twitter-bootstrap responsive-design Manuel Zapata
sumber

Jawaban:

159

Buka http://getbootstrap.com/customize/ dan alihkan apa yang Anda inginkan dari kerangka BS3 lalu klik "Kompilasi dan Unduh" dan Anda akan mendapatkan CSS dan JS yang Anda pilih.

Bootstrap Customizer

Buka CSS dan hapus semua kecuali grid. Mereka termasuk beberapa barang normalisasi juga. Dan Anda harus menyesuaikan semua gaya di situs Anda ke ukuran kotak: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Christina
sumber
Terima kasih Christina. Saya berharap ada cara untuk mendapatkan gaya kisi saja.
Manuel Zapata
8
Tidak, mereka juga mendownload hal-hal pendukung, normalize dan scaffolding.less (yang memiliki global border-box) yang mengharuskan Anda menyesuaikan semua hal yang memiliki padding. Seperti sebelumnya kotak Anda memiliki 10px padding dan totalnya adalah 200px, tetapi di dalamnya adalah 180px sehingga Anda harus mengatur lebar menjadi 180px, sekarang Anda mengatur lebar menjadi 200px atau tidak sama sekali dan menempelkannya di kelas kolom grid.
Christina
box-sizingreset info: css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw
Costa
masih yang memiliki normalize.css
rab
@ Raj - itu disebutkan dalam jawaban. Hapus jika Anda mau, tetapi itu berguna.
Christina
17

Lihat zirafa / bootstrap-grid-only . Ini hanya berisi kisi bootstrap dan utilitas responsif yang Anda perlukan (tidak ada reset atau apa pun), dan menyederhanakan kerumitan bekerja secara langsung dengan file LESS .

burrbrown
sumber
1

Saya akan menyarankan menggunakan http://getpreboot.com/ MDO sebagai gantinya. Mulai v2, prebootport belakang mixin / variabel LESS yang digunakan untuk membuat Sistem Grid Bootstrap 3.0 dan jauh lebih ringan daripada menggunakan generator CSS. Faktanya, jika Anda hanya menyertakan preboot.lessTIDAK ADA overhead karena seluruh file terdiri dari mixins / variabel dan oleh karena itu hanya digunakan dalam pra-kompilasi dan bukan hasil akhir.

srquinn.dll
sumber
1

Sepertinya Anda dapat mengunduh grid sekarang di fitur unduhan baru Bootstrap 4s.

Richard Clifford
sumber
0

Di Bootstrap 4, sudah ada file terpisah di GitHub mereka. Anda dapat menemukannya di sini

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