Cara Membuat Website Ramping dan Sederhana Dengan Bootstrap 4: 7 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:55

Tujuan dari Instructable ini adalah untuk memberi mereka yang akrab dengan pemrograman - HTML atau lainnya - pengantar sederhana untuk membuat portofolio online dengan Bootstrap 4. Saya akan memandu Anda melalui pengaturan awal situs web, cara membuat beberapa blok konten yang berbeda, dan beberapa masalah yang mungkin Anda alami.

Portofolio dipecah menjadi beberapa langkah kecil untuk mencoba dan membuatnya lebih mudah dikelola: bingkai HTML, bingkai CSS, bingkai Javascript, bilah navigasi, dan beranda (dengan blok konten).

Jika penjelasan saya untuk sesuatu masih membuat Anda bingung, silakan tinggalkan komentar dengan pertanyaan, saran, atau google elemen yang Anda bingungkan. Ada banyak sumber daya yang tersedia untuk situs web pemrograman dan Bootstrap.

Catatan: Panduan ini tidak mencakup semuanya dan tidak boleh digunakan sebagai pengganti untuk mempelajari cara memprogram dalam HTML, CSS, atau Javascript.

Sumber Daya yang Diperlukan

• Bootstrap 4
• jQuery 3.3.1

Sumber Daya Opsional

• FontMengagumkan
• Google Font
• sorot.js

Jika Anda ingin melompat ke contoh lengkap atau lihat repositori:

• Contoh Lengkap
• Gudang

Catatan: Saya akan menggunakan Sublime dalam gambar untuk contoh saya jika Anda ingin mengikuti editor teks yang sama.

Langkah 1: Menyiapkan

Pengaturan Folder

1. Buat folder di suatu tempat di mana Anda dapat menyimpan semua yang akan kami unduh. Ini akan menjadi direktori root Anda untuk portofolio.
2. Buat folder di dalam yang bernama "bootstrap"
3. Buat folder lain di dalam folder portofolio root Anda yang bernama "jquery"

Folder Portofolio

|----- bootstrap |----- jquery

Bootstrap 4

1. Kunjungi situs web mereka dan klik tombol "Unduh" di bawah bagian "CSS dan JS yang Dikompilasi".
2. Simpan file.zip di folder "Unduhan" Anda atau lokasi lain yang nyaman.
3. Buka file.zip dan ekstrak folder “css” dan “js” ke folder “bootstrap” yang Anda buat tadi.

jQuery

1. Kunjungi situs web mereka dan unduh "jquery pengembangan 3.3.1 yang tidak terkompresi"
2. Simpan file tersebut di dalam folder “jquery” yang Anda buat tadi.

Semua kerangka kerja sekarang siap ketika kita mulai mengerjakan portofolio yang sebenarnya.

Langkah 2: Bingkai HTML (index.html)

Namamu

Bingkai ini tidak terlalu rumit, tetapi saya ingin menjelaskan tujuan umum dari pengaturan.

Bootstrap JS Setelah jQuery

Tampaknya ada semacam tumpang tindih antara file Javascript Bootstrap dan jQuery. Saya tidak menguji untuk melihat seberapa luas tumpang tindih ini, tetapi salah satu contohnya adalah fungsionalitas dropdown yang saya gunakan di bilah navigasi. Jika Anda memuat di Bootstrap terlebih dahulu, tombol dropdown tidak berfungsi.

FontMengagumkan

Jika Anda pernah melakukan pengembangan web, kemungkinan Anda tahu apa itu FontAwesome. Namun jika bukan itu masalahnya, ini adalah kumpulan ikon yang menyertakan toolkit untuk penyesuaian ekstra. Ini sangat berguna jika Anda seperti saya dan sama sekali tidak memiliki bakat artistik sama sekali.

sorot.js

Kerangka kerja ini memungkinkan penyorotan kode dinamis pada halaman web. Anda dapat mengimpornya seperti kerangka kerja lainnya yang saya gunakan jika Anda hanya menggunakan bahasa pemrograman umum, tetapi ada juga opsi untuk mengunduh kumpulan bahasa khusus. Saya memilih opsi terakhir karena beberapa bahasa makro dan ini, tetapi sepenuhnya terserah Anda.

Catatan: Perhatikan tempat-tempat di mana saya menggunakan tautan hard-code ke file seperti dua ikon dan highlight.js. Juga, karena hanya Bootstrap dan jQuery yang diperlukan, jangan ragu untuk menambahkan atau menghapus kerangka kerja lainnya. Jika Anda menghapusnya, ingatlah untuk menghapus baris kode yang sesuai nanti.

Langkah 3: Bingkai CSS (style.css)

/* * Semoga mengurangi warna bg menjadi abu-abu dan mengubah gaya font membuat situs web lebih mudah digunakan */ body { background: grey; font-family: 'Buka Sans', sans-serif; }

/*

* Ini memastikan bilah navigasi berada di atas segalanya */ nav { z-index: 9999; }

/*

* Ini akan membuat teks paragraf lebih mudah dibaca */ p { font-size: 18px; margin-atas: 5px; margin-bawah: 5px; }

/*

* Ini memastikan bahwa semua blok kode saya diformat dengan benar */ code { text-align: left; }

/*

* Saya tidak ingin daftar memiliki poin */ li { list-style-type: none; }

/*

* Tautan berwarna biru secara default, dan saya ingin mereka sejajar dengan gaya Bootstrap */ li a, a{ color: white; }

/*

* Saya mengikat tag kelas ke div yang berisi navbar untuk memastikan konten tidak tumpang tindih */.navFix { padding-bottom: 70px; }

/*

* Peningkatan ukuran membentang navbar */.social-media { ukuran font: 1.3em; }

/*

* Warna sorotan default untuk link dropdown adalah putih */.dropdown-menu a:hover { background-color: #212529; }

/*

* Paksa div yang menampilkan pdf ke ketinggian tertentu */.pdfFill { height: 45rem; }

/*

* Tambahkan beberapa spasi antara tombol dan blok kode */.codeStyle { padding-top: 30px; }

Saya menyertakan elemen CSS berbasis konten dalam bingkai ini untuk mencoba dan menghemat waktu Anda nanti. Semuanya sangat sederhana dan sebagian besar merupakan perubahan kualitas hidup yang membuat interaksi dengan portofolio lebih mudah bagi pembaca.

nav z-indeks

Saya memiliki pengalaman pengembangan web yang sangat terbatas, jadi saya tidak yakin apakah ini masalah umum ketika menerapkan bilah navigasi Bootstrap, tetapi tanpa spesifikasi orientasi depan-ke-belakang, bilah navigasi akan benar-benar muncul di bawah konten lain seperti Kartu Bootstrap. Ini paling terlihat dengan navbar yang dapat dilipat, tetapi saya tetap menyertakan perubahan indeks untuk keamanan.

penyelarasan kode

Karena saya biasanya menggunakan kelas "justify-content-center" dan "text-center" Bootstrap untuk menyelaraskan elemen, saya tidak ingin kode saya mewarisi sifat rata tengah itu. Ini mudah diperbaiki dengan menimpa perubahan perataan apa pun dan membuat tag kode rata kiri: ini mempertahankan spasi tab dalam kode.

navFix padding

Ketika bilah navigasi Bootstrap menempel di bagian atas, konten halaman akan dimuat di bawahnya. Saya percaya ini terjadi karena navbar sebenarnya menempel di bagian atas viewport alih-alih halaman itu sendiri. Terlepas dari ini, ini diperbaiki dengan menambah ruang antara navbar dan konten lainnya.

tinggi pdf

Tinggi default file pdf sangat kecil. Ini pada dasarnya tidak dapat dibaca, jadi saya mengubah ketinggian untuk mencoba dan memberikan ruang yang cukup untuk kira-kira satu halaman dalam satu waktu.

Langkah 4: Bingkai Javascript (javascript.js)

/* * Ini mencari elemen apa pun dengan kelas 'toggle' dan menyembunyikan atau menampilkannya */ function toggleSection(id, toggleID) { if (document.getElementById(id)) { var divID = document.getElementById(id); var divArray = document.getElementsByClassName(toggleID);

for (var i = 0; i < divArray.length; i++) { divArray.style.display = "none"; }

divID.style.display = "blok";

}

kembali salah;

}

/*

* Kode yang perlu dijalankan dalam urutan tertentu */ $(document).ready(function() { /* * Muat konten dari file */

/*

* Memaksa penundaan kecil untuk memuat data */ setTimeout(function() { /* * Sorot semua kode yang telah dimuat di */ $('pre code').each(function(i, block) { hljs.highlightBlock(blok); }); }, 1000); });

Untuk membuat portofolio ini mudah dimodifikasi dan dikelola, saya memutuskan untuk menggunakan format satu halaman. Itu membuat semuanya tetap lokal untuk sebagian besar dan membuat konten dimuat lebih cepat.

toggleBagian

Saya menggunakan nilai kelas untuk mengelola konten apa yang perlu ditampilkan atau disembunyikan karena sebagian besar waktu saya menggunakan div untuk memisahkan dan mengelompokkan beberapa elemen bersama-sama. Anda juga dapat menggunakan ini untuk mengelompokkan tombol individual, tetapi memerlukan pemeriksaan ekstra sebelum menyetel tampilan "blokir" agar tidak ada konten yang ditampilkan.

pemuatan dokumen

Saya menyertakan ini karena umumnya berantakan untuk memasukkan banyak kode pemrograman independen dalam file HTML biasa. Kita dapat menggunakan metode penyorotan dinamis ini untuk memaksa proses berlangsung setelah kita memuat konten dari file lain.

$('#mq2-intro').load("files/tutorials/mq2/mq2-intro/content.html");

Ini adalah contoh bagaimana kami akan memuat konten.

Langkah 5: Bilah Navigasi

Inisial

• Rumah
• Tentang saya
• Tutorial Proyek
• Hubungi saya

• Bilah navigasi adalah elemen paling kompleks dari semua yang ada dalam portofolio. Kombinasi kelas yang tipis membuatnya seperti teka-teki yang mengharuskan Anda untuk terus melihat buku aturan.

  Fungsionalitas Bootstrap

  Fungsi bootstrap pada dasarnya melalui nilai kelas yang berbeda. Melihat elemen "nav" itu sendiri, tidak terlalu sulit untuk memastikan tujuan dari setiap kelas:

  "Navbar" kami adalah opsi "md" (sedang), "dapat diperluas", "gelap". Dan kami "memperbaikinya" ke "atas". Kelihatannya membingungkan karena ini adalah kumpulan pengenal, tetapi jika Anda melihatnya sebagai kata sifat untuk elemen, akan lebih mudah untuk memahami apa yang terjadi.

  Merek

  Merek adalah logo dan nama khas yang Anda lihat di setiap situs web di kiri atas. Ini adalah elemen desain yang terbukti benar yang diharapkan setiap pengguna saat ini.

  Catatan: Tag "i" sebenarnya adalah ikon FontAwesome, dan Anda mendapatkan tag ini dari halaman ikon mana pun.

  Toggler/Tombol yang Dapat Dilipat (Seluler)

  Tombol ini hanya muncul di perangkat seluler. Tetapi karena kami menyertakan dalam deklarasi "nav" bahwa bilah navigasi perlu diperluas, elemen-elemen ini terhubung satu sama lain melalui ID dan pengidentifikasi "pengalihan data".

  Tautan Navbar (Sisi Kiri)

  Tautan ini sepenuhnya bergantung pada kategori apa yang Anda butuhkan untuk portofolio Anda. Saya menyertakan beberapa contoh tipikal sebagai titik awal, tetapi tidak ada yang sama. Anda mungkin tidak memerlukan bagian "Tutorial" karena Anda fokus membuat patung seni. Setiap item "li" dapat disalin dan ditempel, jadi setelah Anda mengetahui apa yang Anda butuhkan, mudah untuk mengatur navigasi.

  Catatan: Anda secara teknis dapat membuat menu tarik-turun di dalam menu tarik-turun lainnya, tetapi saya tidak akan merekomendasikannya kecuali Anda bersedia menambahkan lebih banyak CSS dan Javascript untuk membuat antarmuka terlihat bersih.

  Tautan Navbar (Sisi Kanan)

  Dengan memberikan daftar tautan yang tepat kelas "ml-auto", Bootstrap memisahkan kedua daftar secara merata. Ini menciptakan pembagian sisi kiri dan kanan yang bersih. Saya memutuskan untuk menggunakan ruang ini untuk tautan media sosial karena ini adalah metode yang sangat umum dan populer untuk meningkatkan kehadiran Anda. Jika itu tidak relevan, Anda dapat menghapus tautan ini untuk bilah pencarian, informasi login, dll. Tapi ingatlah bahwa itu adalah ruang yang penting untuk digunakan. Dan mirip dengan tautan navbar di sisi kiri, Anda juga dapat menyalin dan menempelkannya.

  Catatan: Jika Anda berencana menggunakan tautan yang sudah saya siapkan, ubah sendiri "nama pengguna" di tautan "href" yang sebenarnya.

  Langkah 6: Beranda

  

  

  

  Namamu

  Programmer Penulis Gamer

  Bagian ini, dan halaman konten Anda selanjutnya, akan bergantung pada apa yang ingin Anda masukkan ke dalam portofolio Anda. Saya jelas tidak dapat menangani setiap jenis konten, tetapi saya mencoba memasukkan gambar, pdf, video, blok kode, beberapa inklusi tipikal.

  Format Tabel

  Beranda diatur untuk bertindak sebagai tabel. Saya tidak akan mengandalkan keterampilan desain saya yang luar biasa untuk membuat produk akhir Anda, tetapi saya menambahkan variasi yang berbeda dari kombinasi baris dan kolom untuk menunjukkan bahwa itu sangat dinamis dan fleksibel. Anda dapat membuat 3 baris dan 2 kolom untuk memiliki tombol di sebelah kiri dan konten di sebelah kanan, atau Anda dapat melakukan sesuatu yang sama sekali berbeda. Hanya butuh sedikit eksperimen.

  Tombol

  Fungsi ini pada dasarnya seperti tombol biasa. Satu-satunya integrasi Bootstrap yang sebenarnya di sini berasal dari gaya agar sesuai dengan tema lainnya. Jika tidak, buat tombol sebanyak atau sesedikit yang Anda butuhkan untuk menampilkan konten Anda dan kemudian pastikan untuk mencocokkan tautan href dengan ID untuk div.

  Konten Kode Pemrograman

  Tag "kode" adalah tag default yang digunakan highlight.js untuk mengelola semua sorotan. Jika Anda ingat dari file javascript.js, ada bagian untuk memuat konten dari file lain.

  $('#home-programmer-macro').load("files/home/watchLoot.mac");

  • Bagian pertama dari ini mencari "id" dari elemen yang ingin Anda masukkan kontennya.
  • Bagian kedua adalah lokasi file yang ingin Anda muat.

  Catatan: Konten tidak akan benar-benar dimuat sepenuhnya karena ada kemungkinan Anda mengedit halaman web ini secara lokal, bukan di server. Ini dapat diatasi dengan beberapa cara berbeda yang akan saya bahas di akhir Instructable.

  Video Youtube

  "iframe" yang disematkan sebenarnya berasal dari YouTube itu sendiri. Saya tidak akan menjelaskan secara ekstensif cara mendapatkannya, tetapi ketika Anda pergi ke "Bagikan" video, ada opsi "Sematkan" yang akan membantu Anda menghasilkan kode yang diperlukan untuk menampilkan video Anda di halaman web.

  Langkah 7: Melihat ke Depan

  Ada kemungkinan besar saya tidak membahas beberapa elemen atau tipe konten yang ingin Anda sertakan di situs web Anda. Untungnya ada banyak pilihan bagus bagi Anda untuk mengambil langkah selanjutnya sendiri.

  Dokumentasi Bootstrap

  Dokumentasi Bootstrap adalah tempat yang bagus untuk memulai jika Anda mencari elemen yang telah diprogram sebelumnya dan memiliki contoh yang dapat Anda salin dan tempel ke dalam portofolio Anda untuk bereksperimen. Saya tidak menyentuh Kartu, Korsel, atau Formulir. Saya sangat menyarankan Anda melihat melalui bagian "Komponen" untuk melihat opsi.

  W3Schools

  W3Schools adalah situs web yang luar biasa di mana Anda dapat mempelajari apa saja yang berhubungan dengan pemrograman dan pengembangan web. Mereka jauh lebih pintar daripada saya, dan mereka mencakup hampir semua fungsi HTML, CSS, dan Javascript yang dapat Anda pikirkan.

  Hosting Portofolio Anda

  Instruksi ini mengajarkan Anda cara meng-host situs web Anda di beberapa platform berbeda. Ini adalah langkah-langkah yang perlu Anda ambil jika Anda ingin dapat menunjukkan kepada orang-orang, perekrut, dll. portofolio Anda.

  Bereksperimen dan Bersenang-senang

  Satu-satunya cara Anda akan membuat portofolio hebat adalah dengan bereksperimen dan mencoba segala sesuatu yang terlihat menarik. Banyak portofolio dan situs web desain mewah menggunakan efek transisi yang hebat atau latar belakang dinamis, tetapi tidak ada yang dibuat sebelumnya.