Dalam posting ini kita akan mulai dengan membuat situs dengan Bootstrap, kerangka kerja open source yang memudahkan kami untuk membuatnya responsif dan menyediakan beberapa interaktivitas. Ini adalah template dasar yang dibuat secara otomatis oleh plugin lingkungan pengembangan yang kami rekomendasikan sebelumnya dan harus kami modifikasi.
Dalam artículo anterior Anda akan menemukan instruksi untuk menginstal VS Codium, menerjemahkan antarmuka penggunanya ke bahasa Spanyol dan menginstal plugin Bootstrap.
Dua hal yang perlu diingat:
- Perintah yang kami gunakan adalah pintasan keyboard, Anda harus mengetiknya. Salin/tempel tidak berfungsi.
- Pengelola konten kami tidak mengizinkan saya untuk menampilkan kode HTML jadi saya harus menggunakan tangkapan layar. Sehingga Anda memiliki akses ke kode contoh yang saya unggah ke GitHub.
Cara mengkloning repositori GitHub
Apa yang membedakan orang hebat dari kita semua adalah cara mereka bereaksi terhadap masalah. Richard Stallman tidak menyukai driver printernya dan karena mereka tidak mengizinkannya mengubahnya, dia memulai gerakan perangkat lunak bebas. Linus Torvalds tidak yakin dengan platform berbagi kode mana pun dan membuatnya sendiri. git.
Tidak seperti sistem distribusi perangkat lunak tradisional di mana satu-satunya interaksi pengguna yang diizinkan adalah mengunduh, dengan Git Anda dapat mengikuti evolusi proyek dari waktu ke waktu. Orang lain dapat mengkloning repositori, membuat modifikasi, dan mengusulkan agar pengembang proyek asli memasukkannya. Jika diterima, pengembang dapat dengan mudah melakukannya tanpa harus mengunduh dan mengunggah ulang file.
Ada beberapa layanan berdasarkan Git, saya memilih GitHub hanya karena terintegrasi dengan VS Codium.
Untuk mengunduh file sampel ke komputer Anda, Anda hanya perlu menginstal paket git mengikuti instruksi distribusi Anda untuk menginstal paket di terminal.
Kemudian Anda ketik perintah berikut.
Saya lebih suka menyimpan file di folder Dokumen jadi saya mengubah direktori dengan
cd Documentos
Lalu saya mengkloning file dengan:
git clone https://github.com/dggonzalez1971/bootstrap.git
Saya akan mengingatkan Anda tentang langkah-langkah ini di setiap artikel yang tersisa, karena dengan cara ini Anda akan memperbarui file contoh saat diunggah.
Untuk melihat file cukup buka file explorer dan cari foldernya bootstrap.
Membuat situs dengan Bootstrap
Jika Anda lebih suka mengetik kode secara manual, kami mulai dengan membuat folder tempat kami akan menyimpan situs. Anda dapat menempatkan nama apa pun yang Anda suka.
Kemudian kita ikuti langkah selanjutnya:
- Ayo pergi ke menu Arsip.
- Klik File Teks Baru.
- Klik Simpan.
- Kami mencari folder yang kami buat dan memasukkan nama file contoh1.html.
- Klik Simpan.
Terkadang jendela File Explorer mungkin disembunyikan oleh VSCodium.
Biarkan ekstensi membuat template dasar untuk kita. Untuk ini kami mengetik !b5-$
Ini akan menghasilkan kode yang akan Anda temukan di folder contoh sebagai example1.html
Kami akan melihat yang berikut ini:
Ini adalah kode yang dihasilkan oleh ekstensi Bootstrap.
Kami akan membuat beberapa perubahan pada file ini. Anda akan menemukan modifikasi dengan nama example2.html
- Pada baris 2 kita ubah bahasanya dengan mengganti eng dengan es. Ini menunjukkan kepada mesin pencari bahwa bahasa situs tersebut adalah bahasa Spanyol.
- Di baris 6 kami mengubah teks yang ada di bawah label judul. Kami meletakkan Situs Bootstrap pertama saya.
- Di baris 12 kami mengubah konten di antara tag h1 oleh Ini adalah situs yang dibuat dengan Bootstrap.
Selanjutnya, kita akan membuat beberapa modifikasi penting. Modifikasi ini berkaitan dengan:
- Pengembang plugin tidak dapat mengikuti versi Bootstrap dan ada yang lebih baru.
- Ada banyak opsi untuk komponen bootstrap dan saya tertarik dengan yang lain.
- Menurut dokumentasi resmi, panggilan ke perpustakaan Javascript harus berada di dalam tag tubuh.
Misalnya 2 kami memodifikasi konten baris 7, menghapus baris 8 dan 9 dan mengunggah konten yang tersisa untuk menjaga kompatibilitas penomoran. Kemudian kita klik pada akhir baris 10 untuk membuat baris baru 11 dan menempatkan link ke perpustakaan Javascript.
Jangan khawatir jika Anda tidak memahami kodenya. Fungsi masing-masing baris akan saya jelaskan di artikel selanjutnya.