Bootstrap Modal Window: Tujuan dan Penggunaan

Isi kandungan:

Bootstrap Modal Window: Tujuan dan Penggunaan
Bootstrap Modal Window: Tujuan dan Penggunaan
Anonim

Apakah modal Bootstrap dan untuk apa ia? Apakah komponen, ciri, kelebihan dan kekurangannya? Konsep "tetingkap modal" digunakan dalam antara muka grafik. Selalunya dengan bantuannya anda boleh menarik perhatian kepada beberapa acara penting. Tingkap modal digunakan untuk memasukkan beberapa maklumat, data, menukar tetapan. Mereka menyekat aliran kerja pengguna sehingga isu atau tindakan selesai. Windows juga digunakan untuk membangunkan halaman web.

tetingkap modal bootstrap
tetingkap modal bootstrap

Apakah ini

Reka bentuk yang mudah disesuaikan dan responsif, itulah yang Bootstrap tawarkan hari ini. Tetingkap modal, borang yang boleh digunakan untuk membuat tapak web, membantu memaparkan imej, video dan elemen lain. Pop timbul terdiri daripada bahagian muat turun yang boleh dibezakan: tajuk, kandungan danpengaki. Setiap unsur ini mempunyai makna tersendiri. Tujuan utama tetingkap modal Bootstrap adalah untuk digunakan oleh pereka baru untuk membuat halaman web tanpa menulis kod tambahan. Tetingkap modal ialah sejenis bekas di mana kandungan bertulis dipaparkan. Komponen modal menyelesaikan pelbagai matlamat.

penutupan modal bootstrap
penutupan modal bootstrap

Bagaimana caranya?

Tetingkap modal dibuat dan dikawal menggunakan kaedah JavaScript, data dan css. Mula-mula anda perlu membuat markup. Ia terdiri daripada bingkai, pengepala, kandungan utama dan pengaki. Elemen wajib di sini ialah ruang bawah tanah (blok) dan bingkai. Selepas penandaan, anda perlu beralih kepada pelaksanaan panggilan tetingkap modal. Selalunya ia dipanggil selepas memuatkan halaman web dan menekan butang yang sepadan. Panggilan dibuat menggunakan data dan JavaScript. Menutup modal Bootstrap menutup tugasan yang dibuat dan disimpan sebelum ini.

Perlu diingat bahawa tetingkap modal mempunyai ciri tersendiri. Untuk membuka berbilang tetingkap modal, anda perlu menulis kod tambahan. Adalah lebih baik untuk meletakkan kod html di bahagian atas dokumen, selepas teg badan. Ini membantu mengekalkan fungsi dan rupa tetingkap. Pada peranti mudah alih, terdapat kaveat mengenai penggunaan komponen tetingkap modal. Mereka mengehadkan penggunaan sepenuhnya. Bootstrap 3 membenarkan saiz tetingkap tersuai serta grid.

tetingkap modal bootstrap 3
tetingkap modal bootstrap 3

Komponen

Sebelum iniuntuk mula bekerja dengan Bootstrap, anda perlu memikirkan kandungannya. Program ini termasuk satu set alat siap sedia yang digunakan untuk membuat tapak web. Gaya JavaScript, CSS dan HTML sedia dibuat membina grid penyesuaian, butang paparan, menu, ikon, petua alat dan banyak lagi. Gaya perisian asas diperlukan untuk susun atur. Kehadiran gaya untuk percetakan dan teks membolehkan anda menyediakan penyemak imbas untuk mencetak halaman dan membuat reka bentuk kandungan teks tapak. Dengan komponen Bootstrap, anda boleh mencipta borang, butang dan elemen lain. Program ini mempunyai set lengkap alat yang cepat dan mudah membuat halaman untuk peranti mudah alih. Bootstrap terdiri daripada banyak butiran lain serta JavaScript. Mereka cukup mudah untuk dikuasai walaupun untuk pemula. Secara teori, memahami asas program Bootstrap tidak cukup mudah. Secara praktikal, pembangunan ini memudahkan kerja pereka bentuk dan pereka susun atur kerana kehadiran banyak komponen siap sedia.

borang modal bootstrap
borang modal bootstrap

Ciri

Modal Bootstrap mempunyai beberapa faedah istimewa. Dengan bantuannya, pembangunan susun atur halaman untuk tapak web berlaku pada kelajuan tinggi. Tingkap termasuk set besar elemen dan penyelesaian siap sedia. Bootstrap menjadikan tapak web anda lebih responsif. Rangka kerja (perisian) sesuai untuk semua pelayar dan dipaparkan dengan betul di dalamnya. Tetingkap modal ini mudah digunakan. Bootstrap membolehkan anda membuat halaman web walaupun untuk pemula yang mempunyai pengetahuan asas tentang CSS dan HTML.

Keanehan tetingkap modal ialah itubahawa pengguna boleh menyesuaikannya dengan mudah. Banyak contoh kod siap pakai dan dokumentasi yang hebat memudahkan untuk mendapatkan kelajuan dengan Bootstrap. Mengenai kualitinya boleh menjadi intipati pilihan besar tema untuk reka bentuk. Wordpress, CMS, Joomla dibangunkan dengan tetingkap modal ini. Bootstrap ialah rangka kerja web yang mengandungi komponen yang diperlukan dan dikurniakan fon ikonnya sendiri. Ia termasuk lebih daripada dua ratus ikon, termasuk yang asas.

Kontra

Modal Bootstrap mempunyai kelemahannya.

  • Tapak yang menggunakannya kehilangan gaya individu mereka. Ia tidak lagi unik, kerana ia serupa dari segi rupa dan struktur antara satu sama lain.
  • Kurang fleksibiliti; selalunya memerlukan mencipta gaya anda sendiri dan melakukan kerja tambahan.
  • Menukar kod yang dimuatkan boleh mengakibatkan waktu bekerja.
  • Pengguna sering menyalahgunakan komponen Bootstrap.

Gunakan alat ini juga untuk pembangunan bahagian hadapan. Walaupun terdapat kelemahan yang jelas kepada pengguna rangka kerja, reka letak dengan Bootstrap ialah penyelesaian yang hebat untuk pembangun web. Ia membolehkan anda mencipta antara muka yang ringkas dan intuitif dalam tempoh masa yang singkat dan tanpa banyak usaha.

bootstrap membuka tetingkap modal
bootstrap membuka tetingkap modal

Reka bentuk responsif

Salah satu rangka kerja paling popular yang membolehkan pereka bentuk mencipta tapak web dan aplikasi berkualiti tinggi tanpa menghabiskan masa dan usaha untuknya ialah Bootstrap 3. Tetingkap modal menyediakan pengguna set alat asas secara percuma. Dengan itu, anda boleh menggunakan JavaScript, CSS, html. Perisian ini dicipta oleh Twitter dan mempunyai beberapa ciri dan faedah. Rangka kerja ini dicipta untuk peranti mudah alih, jadi gridnya direka untuk skrin kecil. Hari ini, Bootstrap 3 juga digunakan untuk peranti skrin lebar. Terdapat hanya satu sistem grid responsif dalam program ini, yang telah dilanjutkan oleh pengeluar.

Rangka kerja disertakan dengan fon. Mereka digunakan sebagai ikon. Dalam program ini, pereka sudah berurusan dengan fon vektor dan gambar, yang boleh diubah sesuka hati. Keistimewaan Bootstrap 3 ialah ia tidak menyokong pelayar lama. Konsep reka bentuk responsif adalah mudah: tapak secara automatik menyesuaikan diri dengan saiz skrin, tanpa mengira peranti dari mana pengguna mengaksesnya. Reka bentuk responsif memerlukan pengetahuan dan kemahiran pakar.

Bekerja dengan Bootstrap

Sebelum anda mula meneroka Bootstrap, muat turun secara percuma. Selepas memuat turun dan membongkar seterusnya, pengguna akan menerima tiga folder yang mengandungi gaya, skrip dan fon ikon. Semua ini adalah Bootstrap. Anda boleh membuka tetingkap modal selepas mencipta folder dengan nama rangka kerja. Di dalamnya, anda perlu mencipta fail kosong "ndex.html". Dalam perisian yang dimuat turun, pilih keseluruhan folder "font" dan gaya "bookstrap.css" daripada folder yang sesuai. Jangan lupa skrip "bootstrap.js" juga. Buat folder yang serupa dengan nama "css" dalam folder sedia ada, letakkan "bootstrap.min.css" di dalamnya. Buat "css" lain dengan fail "style.css" kosong. Anda memerlukannya untuk menambah gaya anda sendiri.

Apabila semua yang diperlukan dibuat, kerja selanjutnya akan dilakukan hanya dengan "ndex.html". Jika anda tidak mahu menulis kod secara manual, rujuk rangka dokumen html siap sedia. Salin dan tampal kod ke dalam fail. Gaya, perpustakaan dan skrip akan disambungkan dalam rangka yang dibuat. Sebelum teg badan, jangan lupa sertakan pustaka "jQuery" dan selepas - skrip "js".

berbilang modals bootstrap
berbilang modals bootstrap

Grid

Tetingkap modal Bootstrap digunakan untuk membuat reka letak tapak klasik. Ia terdiri daripada pengepala, badan, lajur sisi dan pengaki. Agar semuanya dipaparkan dengan betul, adalah perlu untuk mengira lebar setiap elemen sebagai peratusan dengan pembalut individu. Pengaki dan pengepala tapak hendaklah 100% lebar, badan dan lajur sisi boleh menjadi lebih kecil.

Grid Bootstrap diperlukan hanya untuk menetapkan lebar yang diperlukan untuk blok. Fungsi grid berlaku dengan bantuan jadual yang mempunyai lajur dan baris. Grid boleh dibuat di dalam grid lain tanpa had bilangan kali. Jika bahagian tapak dibuat dengannya, tidak perlu menulis pertanyaan penyesuaian sendiri. Selain grid, tetingkap modal mengandungi banyak komponen tambahan (menu, jadual, tab, petua alat).

modal bootstrap tidak berfungsi
modal bootstrap tidak berfungsi

Kesilapan

Kadangkala berbilang modal Bootstrap dibuka pada masa yang sama boleh menyebabkan ralat. Ini boleh dilakukan jika Windows tidak dapat melakukannyamuatkan fail html dengan betul. Kehadiran ralat menunjukkan bahawa fail itu dijangkiti perisian hasad atau virus. Selalunya, ralat berkaitan Bootstrap berlaku semasa memuatkan atur cara, komputer, atau selepas melakukan beberapa tindakan. Yang paling biasa ialah yang dikaitkan dengan tetingkap modal: "Ralat dalam fail", "Fail hilang", "Tidak dijumpai", "Tidak dapat memuatkan", "Gagal mendaftar", "Ralat pelaksanaan dan memuatkan". Ia boleh muncul apabila pengguna memasang program atau ia sudah berjalan, atau apabila komputer dihidupkan dan dimatikan. Adalah penting untuk memerhatikan kemunculan ralat, kerana ini membantu untuk menghapuskan punca kejadiannya dalam Bootstrap dengan betul. Tetingkap modal tidak berfungsi kadangkala disebabkan oleh panggilan yang salah, yang tidak bergantung pada ralat dalaman.

Disyorkan: