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.

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


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


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 .




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.




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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.