Cara Membuat Laman Web yang Ramping dan Sederhana Dengan Langkah-langkah Bootstrap 4: 7

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:08

Tujuan Instructable ini adalah untuk memberi mereka yang biasa dengan pengaturcaraan - HTML atau sebaliknya - pengenalan mudah untuk membuat portfolio dalam talian dengan Bootstrap 4. Saya akan memandu anda melalui penyediaan awal laman web, bagaimana membuat beberapa blok kandungan yang berbeza, dan beberapa masalah yang mungkin anda hadapi.

Portofolio ini dipecah menjadi beberapa langkah yang lebih kecil untuk mencubanya dan membuatnya lebih terkawal: bingkai HTML, bingkai CSS, bingkai Javascript, bar navigasi, dan beranda (dengan blok kandungan).

Sekiranya penjelasan saya untuk sesuatu masih membuat anda bingung, jangan ragu untuk memberikan komen dengan soalan, cadangan, atau google elemen yang anda bingung. Terdapat banyak sumber yang tersedia untuk laman web pengaturcaraan dan Bootstrap.

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

Sumber yang diperlukan

• Tali but 4
• jQuery 3.3.1

Sumber Pilihan

• FontAwesome
• Fon Google
• kemuncak.js

Sekiranya anda ingin melangkau ke contoh penuh atau melihat repositori:

• Contoh Penuh
• Repositori

Nota: Saya akan menggunakan Sublime dalam gambar untuk contoh saya jika anda ingin mengikuti dengan editor teks yang sama.

Langkah 1: Menyiapkan

Penyediaan Folder

1. Buat folder di mana anda boleh menyimpan semua yang akan kami muat turun. Ini akan menjadi direktori root anda untuk portfolio.
2. Buat folder di dalam folder yang bernama "bootstrap"
3. Buat folder lain di dalam folder portfolio root anda yang bernama "jquery"

Folder Portfolio

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

Tali but 4

1. Lawati laman web mereka dan klik butang "Muat turun" di bawah bahagian "Kompilasi CSS dan JS".
2. Simpan fail.zip dalam folder "Muat turun" anda atau lokasi lain yang sesuai.
3. Buka fail.zip dan ekstrak folder "css" dan "js" ke folder "bootstrap" yang anda buat sebelumnya.

jQuery

1. Lawati laman web mereka dan muat turun "pembangunan jQuery 3.3.1 yang tidak dikompresi"
2. Simpan fail itu di dalam folder "jquery" yang anda buat sebelumnya.

Semua kerangka kini sudah siap apabila kita mula mengusahakan portfolio sebenar.

Langkah 2: Rangka HTML (index.html)

Nama awak

Rangka ini tidak terlalu rumit, tetapi saya ingin menjelaskan tujuan umum penyediaan.

Bootstrap JS Selepas jQuery

Nampaknya ada semacam pertindihan antara fail Javascript Bootstrap dan jQuery. Saya tidak menguji untuk melihat seberapa besar pertindihan ini, tetapi satu contohnya ialah fungsi dropdown yang saya gunakan di bar navigasi. Sekiranya anda memuatkan Bootstrap terlebih dahulu, butang dropdown tidak berfungsi.

FontAwesome

Sekiranya anda telah melakukan pengembangan web, kemungkinan anda tahu apa itu FontAwesome. Namun jika tidak demikian, ini adalah set ikon yang merangkumi toolkit untuk penyesuaian tambahan. Ia sangat berguna jika anda seperti saya dan sama sekali tidak mempunyai bakat seni.

hightlight.js

Rangka kerja ini memungkinkan penonjolan kod dinamik di laman web. Anda boleh mengimportnya seperti kerangka kerja lain yang saya gunakan jika anda hanya menggunakan bahasa pengaturcaraan biasa, tetapi ada juga pilihan untuk memuat turun sekumpulan bahasa khusus. Saya memilih pilihan terakhir kerana beberapa bahasa makro dan bahasa ini, tetapi semuanya bergantung kepada anda.

Catatan: Perhatikan tempat di mana saya menggunakan pautan keras ke fail seperti dua ikon dan highlight.js. Juga, kerana hanya diperlukan Bootstrap dan jQuery, jangan ragu untuk menambah atau membuang kerangka kerja lain. Sekiranya anda membuangnya, ingatlah untuk membuang baris kod yang sesuai di kemudian hari.

Langkah 3: Bingkai CSS (style.css)

/ * * Semoga warna bg yang dikurangkan menjadi kelabu dan mengubah gaya fon menjadikan laman web lebih senang digunakan * / body {background: grey; font-family: 'Open Sans', sans-serif; }

/*

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

/*

* Ini akan menjadikan teks perenggan lebih mudah dibaca * / p {font-size: 18px; margin-top: 5px; margin-bottom: 5px; }

/*

* Ini memastikan bahawa semua blok kod saya diformat dengan betul * / code {text-align: left; }

/*

* Saya tidak mahu senarai mempunyai peluru * / li {list-style-type: none; }

/*

* Pautan berwarna biru secara lalai, dan saya mahu mereka sesuai dengan gaya Bootstrap * / li a, {color: white; }

/*

* Saya mengikat tag kelas ke div yang mengandungi navbar untuk memastikan kandungan tidak bertindih * /.navFix {padding-bottom: 70px; }

/*

* Ukuran meningkat meregangkan navbar * /. Social-media {font-size: 1.3em; }

/*

* Warna sorotan lalai untuk pautan dropdown berwarna putih * /.dropdown-menu a: hover {background-color: # 212529; }

/*

* Force divs menunjukkan pdf ke ketinggian tertentu * /.pdfFill {height: 45rem; }

/*

* Tambahkan jarak antara butang dan blok kod * /.codeStyle {padding-top: 30px; }

Saya memasukkan elemen CSS berasaskan kandungan dalam bingkai ini untuk mencuba dan menjimatkan anda beberapa saat kemudian. Semuanya sangat mudah dan kebanyakannya perubahan kualiti hidup yang menjadikan interaksi dengan portfolio lebih mudah bagi pembaca.

nav z-indeks

Saya mempunyai jumlah pengalaman pengembangan web yang sangat terhad, jadi saya tidak pasti apakah ini adalah masalah biasa semasa melaksanakan bar navigasi Bootstrap, tetapi tanpa spesifikasi orientasi depan-ke-belakang, bar navigasi akan benar-benar muncul di bawah kandungan lain seperti Kad Bootstrap. Ini paling ketara dengan navbar yang dilipat, tetapi saya memasukkan perubahan indeks pula untuk keselamatan.

penjajaran kod

Oleh kerana saya biasanya menggunakan kelas "justify-content-center" dan "text-center" Bootstrap untuk menyelaraskan elemen, saya tidak mahu kod saya mewarisi sifat yang berpusat di tengah itu. Ini dapat diperbaiki dengan mudah dengan menimpa sebarang perubahan penjajaran dan membuat tag kod sejajar kiri: ini mengekalkan jarak tab dalam kod.

pelapik navFix

Apabila bar navigasi Bootstrap tersekat di bahagian atas halaman, kandungan akan dimuat di bawahnya. Saya percaya ini berlaku kerana navbar sebenarnya tersekat di bahagian atas viewport dan bukannya halaman itu sendiri. Walau apa pun ini diperbaiki dengan meningkatkan ruang antara navbar dan isi kandungan yang lain.

ketinggian pdf

Tinggi lalai fail pdf sangat kecil. Ini pada dasarnya tidak dapat dibaca, jadi saya mengubah ketinggian untuk mencuba dan memberi ruang yang cukup untuk kira-kira satu halaman pada satu masa.

Langkah 4: Bingkai Javascript (javascript.js)

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

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

divID.style.display = "blok";

}

kembali palsu;

}

/*

* Kod yang perlu dijalankan dalam urutan tertentu * / $ (dokumen). Sudah (fungsi () {/ * * Muatkan kandungan dari fail * /

/*

* Paksa sedikit kelewatan untuk memuatkan data * / setTimeout (function () {/ * * Sorot semua kod yang telah dimuat dalam * / $ ('pre code'). Masing-masing (fungsi (i, blok) { hljs.highlightBlock (blok);});}, 1000); });

Untuk menjadikan portfolio ini mudah diubah dan dikendalikan, saya memutuskan untuk menggunakan format satu halaman. Ini menyimpan segala-galanya di tempat setempat dan menjadikan kandungan lebih cepat dimuat.

toggleSection

Saya menggunakan nilai kelas untuk menguruskan kandungan apa yang perlu ditunjukkan atau disembunyikan kerana kebanyakan masa saya menggunakan div untuk memisahkan dan mengumpulkan beberapa elemen bersama-sama. Anda boleh menggunakan ini untuk mengumpulkan butang individu juga, tetapi ia memerlukan pemeriksaan tambahan sebelum menetapkan paparan "blok" untuk tidak membenarkan kandungan ditunjukkan.

memuatkan dokumen

Saya memasukkan ini kerana biasanya tidak kemas memasukkan sekumpulan kod pengaturcaraan bebas dalam fail HTML biasa. Kita boleh menggunakan kaedah penyorotan dinamik ini untuk memaksa proses itu berlaku setelah kita memuatkan kandungan dari fail lain.

$ ('# mq2-intro'). muat ("fail / tutorial / mq2 / mq2-intro / content.html");

Ini adalah contoh bagaimana kita memuatkan kandungan.

Langkah 5: Bar Navigasi

Permulaan

• Rumah
• Tentang saya
• Tutorial Projek
• Hubungi saya

• Bar navigasi adalah elemen paling kompleks daripada semua yang ada dalam portfolio. Kombinasi kelas yang cukup menjadikannya seperti teka-teki yang memerlukan anda untuk terus melihat buku peraturan.

  Fungsi Bootstrap

  Bootstrap berfungsi pada dasarnya melalui nilai kelas yang berbeza. Melihat elemen "nav" itu sendiri, tidak terlalu sukar untuk memastikan tujuan setiap kelas:

  "Navbar" kami adalah pilihan "md" (sederhana), "perluas", "gelap". Dan kami "memperbaikinya" ke "bahagian atas." Ia kelihatan membingungkan kerana ini adalah pengganti pengecam, tetapi jika anda melihatnya sebagai kata sifat untuk elemen, menjadi lebih mudah untuk memahami apa yang berlaku.

  Jenama

  Jenama adalah logo dan nama khas yang anda lihat di setiap laman web di kiri atas. Ini adalah elemen reka bentuk yang dicuba dan benar yang diharapkan oleh setiap pengguna pada ketika ini.

  Catatan: Teg "i" sebenarnya adalah ikon FontAwesome, dan anda mendapat tag ini dari halaman mana-mana ikon.

  Tombol Toggler / Dilipat (Mudah Alih)

  Butang ini hanya dipaparkan pada peranti mudah alih. Tetapi kerana kami memasukkan dalam pengisytiharan "nav" bahawa bar navigasi perlu diperluas, elemen-elemen ini saling terhubung melalui ID mereka dan pengecam "data-toggle".

  Pautan Navbar (Bahagian Kiri)

  Pautan ini bergantung sepenuhnya pada kategori apa yang anda perlukan untuk portfolio anda. Saya memasukkan beberapa contoh khas sebagai titik permulaan, tetapi tidak ada yang sama. Anda mungkin tidak memerlukan bahagian "Tutorial" kerana anda memfokuskan pada pembuatan seni arca. Setiap item "li" dapat disalin dan ditampal, jadi setelah anda mengetahui apa yang anda perlukan, mudah untuk mengatur navigasi.

  Catatan: Anda secara teknikal boleh membuat menu dropdown dalam menu dropdown yang lain, tetapi saya tidak akan mengesyorkannya melainkan jika anda bersedia menambahkan lebih banyak CSS dan Javascript untuk menjadikan muka kelihatan bersih.

  Pautan Navbar (Bahagian Kanan)

  Dengan memberikan senarai pautan yang tepat pada kelas "ml-auto", Bootstrap memisahkan kedua-dua senarai secara merata. Ini mewujudkan pembahagian sisi kiri dan kanan yang bersih. Saya memutuskan untuk menggunakan ruang ini untuk pautan media sosial kerana kaedah ini sangat biasa dan popular untuk meningkatkan kehadiran anda. Sekiranya itu tidak relevan, anda boleh membuang pautan ini untuk mencari bar, maklumat log masuk, dan lain-lain. Tetapi ingat bahawa ia adalah ruang penting untuk digunakan. Dan serupa dengan pautan navbar di sebelah kiri, anda juga boleh menyalin dan menampalnya.

  Catatan: Sekiranya anda merancang untuk menggunakan pautan yang sudah saya siapkan, ubah "nama pengguna" dalam pautan "href" yang sebenarnya.

  Langkah 6: Halaman Utama

  

  

  

  Nama awak

  Pemain Penulis Programmer

  Bahagian ini, dan halaman kandungan anda yang seterusnya, akan bergantung pada apa yang anda mahu masukkan ke dalam portfolio anda. Saya jelas tidak dapat menangani setiap jenis kandungan, tetapi saya cuba memasukkan gambar, pdf, video, blok kod, beberapa penyertaan khas.

  Format Jadual

  Halaman utama disediakan untuk berfungsi sebagai jadual. Saya tidak akan bergantung pada kemahiran reka bentuk saya yang luar biasa untuk membuat produk akhir anda, tetapi saya menambahkan pelbagai variasi gabungan baris dan lajur untuk menunjukkan bahawa ia sangat dinamik dan fleksibel. Anda boleh membuat 3 baris dan 2 lajur untuk mempunyai butang di sebelah kiri dan kandungan di sebelah kanan, atau anda boleh melakukan sesuatu yang sama sekali berbeza. Hanya memerlukan sedikit percubaan.

  Butang

  Fungsi ini pada dasarnya seperti butang biasa. Satu-satunya integrasi Bootstrap yang sebenar di sini bermula dari gaya yang sesuai dengan tema yang lain. Jika tidak, buat sebilangan butang atau sekecil yang anda perlukan untuk mempamerkan kandungan anda dan kemudian pastikan untuk memadankan pautan href dengan ID untuk div.

  Kandungan Kod Pengaturcaraan

  Teg "kod" adalah tag lalai yang digunakan oleh highlight.js untuk menguruskan semua penonjolan. Sekiranya anda ingat dari fail javascript.js, ada bahagian untuk memuatkan kandungan dari fail lain.

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

  • Bahagian pertama ini mencari "id" elemen yang anda mahu masukkan kandungannya.
  • Bahagian kedua adalah lokasi fail yang ingin anda muatkan.

  Catatan: Kandungan tidak akan dimuat sepenuhnya kerana ada kemungkinan anda mengedit laman web ini secara tempatan dan bukannya pada pelayan. Ini dapat ditangani dengan beberapa cara yang berbeza yang akan saya bahas di akhir Instructable.

  Video YouTube

  "Iframe" yang tersemat sebenarnya berasal dari YouTube itu sendiri. Saya tidak akan menjelaskan secara terperinci cara mendapatkannya, tetapi apabila anda pergi ke "Kongsi" video, ada pilihan "Benamkan" yang akan membantu anda menghasilkan kod yang diperlukan untuk menunjukkan video anda di laman web.

  Langkah 7: Melihat ke hadapan

  Ada kemungkinan besar bahawa saya tidak merangkumi beberapa elemen atau jenis kandungan yang ingin anda sertakan di laman web anda. Syukurlah, terdapat banyak pilihan yang baik untuk anda mengambil langkah seterusnya sendiri.

  Dokumentasi Bootstrap

  Dokumentasi Bootstrap adalah tempat yang baik untuk memulakan jika anda mencari elemen yang sudah diprogramkan dan mempunyai contoh yang boleh anda salin dan tampal ke dalam portfolio anda untuk bereksperimen. Saya tidak menyentuh Kad, Carousel, atau Borang. Saya sangat mengesyorkan agar anda melihat bahagian "Komponen" untuk melihat pilihannya.

  W3Sekolah

  W3Schools adalah laman web yang indah di mana anda dapat mempelajari apa sahaja yang berkaitan dengan pengaturcaraan dan pembangunan web. Mereka jauh lebih pintar daripada saya, dan ia merangkumi hampir semua fungsi HTML, CSS, dan Javascript yang boleh anda fikirkan.

  Mengehoskan portfolio anda

  Instructable ini mengajar anda bagaimana untuk menghoskan laman web anda di beberapa platform yang berbeza. Ini adalah langkah-langkah yang perlu anda ambil sekiranya anda ingin menunjukkan portfolio anda kepada orang, perekrut, dll.

  Eksperimen dan Bersenang-senang

  Satu-satunya cara untuk membuat portfolio yang hebat adalah dengan bereksperimen dan mencuba apa sahaja dan semua yang kelihatan menarik. Banyak portfolio dan laman web reka bentuk mewah menggunakan kesan peralihan yang hebat atau latar belakang dinamik, tetapi tidak ada yang dibuat sebelumnya.