Intip Cara Mendesain Web dalam Satu Halaman Bootstrap - Bagian 1
Intip Berita - Hai teman-teman, ini adalah versi terakhir dari perpustakaan Bootstrap, Bootstrap 4 dan "Satu Halaman", seperti namanya, pada satu halaman untuk memenuhi semua kebutuhan kita dengan desain situs web yang responsif. Saya sedang berpikir untuk menerbitkannya secara seri. Beberapa topik yang ingin saya bagikan di bagian seri ini telah dibagikan sebelumnya. Itu sebabnya saya bisa mendapatkan bagian-bagian itu lebih cepat.
Anda dapat mengakses Bootstrap di https://getbootstrap.com/
Boostrap adalah pustaka sumber terbuka yang memungkinkan Anda mendesain html dengan mudah. Ini digunakan / dikenal oleh programmer untuk dengan cepat menyelesaikan fase desain dan membuat proyek.
Apa bahan yang diperlukan?
Intip cara desain yang akan kami gunakan untuk boot menggunakan Bootstrap gratis di internet. "GOLDEN PSD THEME"
Ada dua cara untuk menggunakan Bootstrap. Yang pertama dapat dimasukkan dalam struktur file kami dengan mengunduh file seperti yang dijelaskan di atas. Pada metode kedua, kita bisa menggunakan BootstrapCDN, jadi kita juga bisa menggunakan tautan di foto untuk ditambahkan ke halaman kita.
Kami akan menggunakan metode pertama, jadi klik tombol Unduh,
"Kami sedang mengunduh file CSS dan JS ke komputer kami."
Perintah datang untuk membuat struktur folder yang diperlukan untuk proyek kami.
Kami sedang membuat folder bernama "Emas". Kami menyalin file CSS dan JS yang diunduh ke folder ini. Selain folder ini, kami membuat folder baru bernama "gambar".
Lalu kita buat file "index.html".
Struktur file umum kami selesai, kami perlu mengunduh beberapa file lagi.
Buka Alamat ini dan klik tombol Unduh.
Kami sedang mengunduh file yang ditandai, yang merupakan versi terkompresi dari jQuery, pada halaman yang terbuka.
Setelah mengunduh file di folder kami membuat folder js.
Kemudian kita datang ke Alamat ini untuk ikon yang akan kita gunakan dalam desain kita. Klik tombol Unduh untuk memulai proses pengunduhan.
Setelah mengunduh file, kami menyalin dua file di folder css ke folder css di folder proyek kami. Sehingga kami telah menyelesaikan struktur folder publik kami.
Sebagai editor kode saya memilih kurung open source. Anda juga dapat menggunakan program lain. Anda bisa mendapatkannya secara gratis DISINI.
Kami membuka program dan mengikuti File >> Buka Folder, kami memilih folder Emas yang kami buat untuk proyek kami.
Kami melihat struktur file yang kami buat. file css menjadi file bernama "main.css", ke folder js kami "main.js" dalam bentuk file yang dibuat. Kami dapat memeriksa versi final file kami dari Kurung.
Sebelum kita beralih ke pengkodean, saya akan memberi tahu Anda sedikit tentang Bootstrap. Pertama-tama, mari kita bicara tentang Bootstrap Grid System yang memiliki tempat yang sangat penting dalam proyek ini. Dengan Tautan ini , klik tautan Kotak yang ditandai di foto.
Anda dapat melihat contoh-contoh sistem grid yang akan membuat pekerjaan kami menjadi lebih mudah saat melakukan pengkodean pada halaman yang dibuka. Mari kita lihat.
Kami ingin membuat situs web kami "Responsif" kompatibel dengan platform yang berbeda. Di situlah sistem grid masuk. Sistem kisi Bootstrap saat ini merupakan sistem kisi yang paling banyak digunakan. Jika kita kembali ke halaman web bootstrap, kita melihat beberapa konsep di sini. xs, sm, md, lg dan bootstrap 4 sebagai inovasi dalam ukuran layar sesuai dengan perangkat xl untuk membantu kami mengklasifikasikan. Satu per satu;
Perangkat Ekstra Kecil (.col-): Perangkat dengan lebar layar kurang dari 576 piksel.
Perangkat Kecil (.col-sm-): Perangkat dengan lebar layar 576 piksel hingga 768 piksel.
Perangkat Sedang (.col-md-): Perangkat dengan lebar layar 768 piksel hingga 992 piksel.
Perangkat Besar (.col-lg-): Perangkat dengan lebar layar 992 piksel hingga 1200 piksel.
Perangkat Ekstra Besar (.col-xl-): Perangkat dengan lebar layar lebih dari 1200 piksel.
Untuk melihat apa yang berhasil, buka halaman "Bootstrap grid samples" yang baru saja kita buka dan coba kurangi ukuran halaman secara perlahan. Kita bisa mencoba sendiri dengan sedikit coding. Untuk melakukan ini, rekatkan kode DISINI di file main. html kami di dalam Tanda Kurung:
Klik tombol simpan di sebelah kanan dan klik tombol pratinjau di layar, klik OK.
Dalam sistem grid Bootstrap, setiap baris terdiri dari 12 kolom. Seperti yang akan Anda lihat dalam kode kami, kami membuat kelas baris dan membagi satu baris menjadi tiga (col-lg-4)
Pada titik apa; Karena kita menggunakan col-lg- dalam kode kita, tiga kolom muncul berdampingan, hingga 992 piksel sesuai dengan daftar di atas, dan kolom-kolom itu akan berada di bawah satu sama lain ketika lebar halaman turun di bawah 992 piksel.
Anda dapat memodifikasi dan menguji kode kami seperti yang Anda inginkan. Sebagai contoh, ketika kita berganti ke col-sm-4 dan bukannya col-lg-4, kolom akan saling bertabrakan ketika lebar halaman kita turun di bawah 576 piksel.
Mari kita selesaikan pelajaran pertama kita di sini, di pelajaran lain kita dapat mulai mengkodekan desain kita. Pelajaran ini dan selanjutnya akan sangat membantu. Menunggu komentar dan saran. Terima kasih untuk semua orang yang membaca.
Post a Comment