Bootstrap desain responsif

pengantar singkat

Tutorial ini menunjukkan kepada Anda bagaimana menggunakan desain responsif tata letak halaman. Dalam kursus ini, Anda akan belajar Desain Web Responsif. Dengan popularitas perangkat mobile, bagaimana agar pengguna menelusuri melalui perangkat mobile ke situs Anda untuk mendapatkan efek visual yang baik, sudah merupakan masalah yang tak terelakkan. Web desain responsif adalah cara yang efektif untuk mencapai tujuan ini.

Apa Desain Web Responsif

Web desain responsif adalah dengan memungkinkan pengguna untuk mengakses berbagai ukuran perangkat untuk menelusuri situs efektivitas visual yang baik. Sebagai contoh, pada monitor komputer yang Anda mengunjungi situs Web, dan kemudian browsing di ponsel pintar, ukuran layar ponsel pintar ini jauh lebih kecil dari monitor komputer, tapi Anda tidak merasa ada perbedaan antara pengalaman pengguna hampir sama, menunjukkan bahwa situs dalam desain respon melakukan pekerjaan yang baik.

Kami memiliki kita contoh tata letak cairan dari penerapan kinerja respon , dan mengajak Anda untuk menelusuri pada ukuran layar yang berbeda. Anda dapat menggunakan Chrome atau FireFox untuk menyesuaikan ekspansi jendela browser mengubah ukuran.

Klik di sini, Anda dapat melihat Bootstrap contoh desain responsif .

Responsif Web Design Works

Web desain responsif untuk menerapkan, Anda perlu membuat berbagai perangkat untuk beradaptasi dengan ukuran CSS gaya termasuk. Setelah halaman dimuat pada perangkat tertentu, menggunakan berbagai font pada halaman dan pengembangan web teknologi seperti pertanyaan media (Media Queries), kali ini, akan menjadi ujian pertama dari ukuran viewport perangkat, dan kemudian beban gaya khusus perangkat.

studi mendalam dari Responsif Web Desain CSS

Kami akan 'bootstrap-responsive.css' belajar bagaimana belajar "desain responsif" adalah untuk mencapai nuansa. Sebelum ini, Anda harus menambahkan baris kode berikut di area header halaman:

 <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"> 

meta tag viewport, menimpa viewport default dan membantu memuat gaya tertentu viewport terkait.

properti lebar dengan lebar layar. Ini berisi nilai, seperti 320, mewakili 320 piksel, atau nilai 'perangkat-lebar', digunakan untuk memberitahu browser untuk menggunakan resolusi asli.

properti awal-skala adalah rasio viewport awal. Bila diatur ke 1,0, perangkat akan menunjukkan lebar asli.

Tentu saja, Anda harus menambahkan Bootstrap Responsif CSS, sebagai berikut:

 <Link href = "aset / css / bootstrap-responsive.css" rel = "stylesheet"> 

Sekarang, jika Anda menemukan file CSS responsif, Anda akan menemukan bahwa dalam beberapa pernyataan publik kembali (dari nomor baris 10-22), untuk berbagai daerah '@media' dimulai. Ini adalah bagaimana menulis gaya yang cocok untuk berbagai perangkat.

Daerah pertama yang '@media (max-width: 480px )' dimulai sebagai lebar maksimum 480 pengaturan perangkat piksel gaya.

Wilayah kedua untuk '@media (max-width: 767px )' dimulai sebagai lebar maksimum 767 pengaturan perangkat piksel gaya.

Daerah ketiga untuk '@media (min-width: 768px ) dan (max-width: 979px)' dimulai sebagai lebar minimum 768 piksel dan lebar maksimum 979 pengaturan perangkat piksel gaya.

Daerah berikutnya adalah lebar maksimum pengaturan perangkat gaya 979 piksel. Jadi itu adalah '@media (max-width: 979px )' mulai.

Dua daerah terakhir, masing-masing '@media (min-width: 980px )' dan '@media (min-width: 1200px )' mulai, sebelum perangkat diatur untuk lebar minimal 980 pixel dalam gaya, yang terakhir adalah yang terkecil lebar mengatur gaya untuk perangkat 1200 piksel.

Oleh karena itu, peran fundamental stylesheet ini adalah dengan menggunakan 'min-width' dan properti 'max-width' untuk menentukan gaya yang digunakan sesuai dengan lebar maksimum dan lebar minimum perangkat.

penjelasan

Dalam rangka untuk membuat tata letak yang lebih responsif, Bootstrap melakukan tiga hal:

1. Memodifikasi lebar kolom dalam grid.

2. Selama ada kebutuhan, menggunakan elemen stack, bukan mengambang elemen. Jika Anda tidak tahu apa adalah elemen tumpukan, mengikuti bentuk dari w3.org dapat memberikan beberapa bantuan:

elemen root (html) untuk membentuk konteks tumpukan akar, generasi konteks tumpukan lainnya (termasuk elemen yang relatif diposisikan, ada 'z-index' nilai bukan 'auto' dihitung) oleh posisi elemen yang sewenang-wenang. Konteks tumpukan relatif terhadap blok berisi tidak diperlukan.

3. Untuk benar membuat judul dan teks dari ukuran mereka.

pengembangan yang lebih cepat untuk perangkat mobile tata letak ramah

kelas bootstrap memiliki beberapa berguna untuk pengembangan tata letak seluler. Kelas-kelas ini dapat dilihat pada 'responsive.less' di.

Visible-telepon, lebar 767px dan kurang terlihat di telepon, pada 979px ke 768px Tablet tersembunyi dari pandangan, tersembunyi dari desktop, yang merupakan default.

Visible-tablet, lebar 767px dan bawah ponsel tersembunyi tidak terlihat, 979px untuk 768px terlihat di piring, tidak terlihat pada desktop untuk menyembunyikan, yang merupakan default.

Visible-desktop, tersembunyi di lebar 767px dan bawah ponsel tidak terlihat, tersembunyi di 979px ke 768px Tablet tak terlihat, terlihat pada desktop, yang merupakan default.

.hidden-telepon, lebar 767px dan menyembunyikan di telepon berikut tidak terlihat, pada 979px ke 768px Tablet terlihat, terlihat pada desktop, yang merupakan default.

.hidden-tablet, lebar 767px dan kurang terlihat di telepon, pada 979px ke 768px Tablet tersembunyi tak terlihat, terlihat pada desktop, yang merupakan default.

.hidden-desktop, pada lebar 767px dan bawah visibilitas telepon pada 979px ke 768px Tablet terlihat, tersembunyi dari desktop, yang merupakan default.

Klik di sini untuk men-download tutorial untuk menggunakan semua HTML, CSS, JS dan file gambar.