Dalam siaran ini kita akan mulakan dengan membuat tapak dengan Bootstrap, rangka kerja sumber terbuka yang memudahkan kami menjadikannya responsif dan menyediakannya dengan beberapa interaktiviti. Ia adalah templat asas yang dijana secara automatik oleh pemalam persekitaran pembangunan yang kami cadangkan sebelum ini dan yang perlu kami ubah suai.
Di dalamnya artikel sebelumnya Anda akan menemui arahan untuk memasang VS Codium, menterjemah antara muka penggunanya ke bahasa Sepanyol dan memasang pemalam Bootstrap.
Dua perkara yang perlu diingat:
- Perintah yang kami gunakan ialah pintasan papan kekunci, anda perlu menaipnya. Salin/tampal tidak berfungsi.
- Pengurus kandungan kami tidak membenarkan saya memaparkan kod HTML jadi saya perlu menggunakan tangkapan skrin. Supaya anda mempunyai akses kepada kod contoh yang saya muat naik kepada GitHub.
Bagaimana untuk mengklon repositori GitHub
Apa yang membezakan orang hebat daripada kita yang lain ialah cara mereka bertindak balas terhadap masalah. Richard Stallman tidak menyukai pemandu pencetaknya dan kerana mereka tidak membenarkannya menukarnya, dia memulakan pergerakan perisian percuma. Linus Torvalds tidak yakin dengan mana-mana platform perkongsian kod dan mencipta platformnya sendiri. git.
Tidak seperti sistem pengedaran perisian tradisional di mana satu-satunya interaksi pengguna dibenarkan ialah memuat turun, dengan Git anda boleh mengikuti evolusi projek dari semasa ke semasa. Orang lain boleh mengklon repositori, membuat pengubahsuaian dan mencadangkan agar pembangun projek asal menggabungkannya. Jika diterima, pembangun boleh melakukannya dengan mudah tanpa perlu memuat turun dan memuat naik semula fail.
Terdapat beberapa perkhidmatan berdasarkan Git, saya memilih GitHub semata-mata kerana ia berintegrasi dengan VS Codium.
Untuk memuat turun fail sampel ke komputer anda, anda hanya perlu memasang pakej git mengikut arahan pengedaran anda untuk memasang pakej dalam terminal.
Kemudian anda taip arahan berikut.
Saya lebih suka menyimpan fail dalam folder Dokumen supaya saya menukar direktori dengan
cd Documentos
Kemudian saya mengklon fail dengan:
git clone https://github.com/dggonzalez1971/bootstrap.git
Saya akan mengingatkan anda tentang langkah-langkah ini dalam setiap artikel yang tinggal, kerana dengan cara ini anda akan mengemas kini fail contoh semasa ia dimuat naik.
Untuk melihat fail hanya buka penjelajah fail dan cari folder tali kasut.
Membuat tapak dengan Bootstrap
Sekiranya anda lebih suka menaip kod secara manual, kami mulakan dengan mencipta folder di mana kami akan menyimpan tapak tersebut. Anda boleh meletakkan nama yang anda suka.
Kemudian kita ikuti langkah seterusnya:
- Mari pergi ke menu Arkib.
- Klik pada Fail Teks Baharu.
- Klik pada Simpan.
- Kami mencari folder yang kami buat dan meletakkan nama fail contoh1.html.
- Klik pada Simpan.
Kadangkala tetingkap File Explorer mungkin disembunyikan oleh VSCodium.
Mari kita minta sambungan membuat templat asas untuk kita. Untuk ini kami menaip !b5-$
Ini akan menjana kod yang anda akan dapati dalam folder contoh sebagai example1.html
Kami akan melihat perkara berikut:
Ini ialah kod yang dijana oleh sambungan Bootstrap.
Kami akan membuat beberapa perubahan pada fail ini. Anda akan menemui pengubahsuaian di bawah nama example2.html
- Pada baris 2 kami menukar bahasa dengan menggantikan eng dengan es. Ini menunjukkan kepada enjin carian bahawa bahasa tapak adalah bahasa Sepanyol.
- Dalam baris 6 kita menukar teks yang berada di bawah label tajuk. Kita letak Tapak Bootstrap pertama saya.
- Dalam baris 12 kami menukar kandungan antara tag h1 oleh Ini adalah tapak yang dibuat dengan Bootstrap.
Seterusnya, kami akan membuat beberapa pengubahsuaian penting. Pengubahsuaian ini mempunyai kaitan dengan:
- Pembangun pemalam tidak dapat bersaing dengan versi Bootstrap dan terdapat lebih banyak versi terkini.
- Terdapat banyak pilihan untuk komponen bootstrap dan saya berminat dengan satu lagi.
- Menurut dokumentasi rasmi, panggilan ke perpustakaan Javascript mesti berada di dalam teg badan.
Sebagai contoh 2 kami mengubah suai kandungan baris 7, memadamkan baris 8 dan 9 dan memuat naik kandungan yang selebihnya untuk mengekalkan keserasian penomboran. Kemudian kita klik pada penghujung baris 10 untuk mencipta baris 11 baharu dan letakkan pautan ke perpustakaan Javascript.
Jangan risau jika anda tidak memahami kod tersebut. Saya akan menerangkan fungsi setiap baris dalam artikel seterusnya.