როგორ გააკეთოთ გლუვი და მარტივი ვებსაიტი Bootstrap– ით 4: 7 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:17

ამ ინსტრუქციის მიზანია პროგრამირების მცოდნეებისათვის - HTML ან სხვაგვარად - მარტივი შესავალი Bootstrap– ით ონლაინ პორტფოლიოს შექმნის შესახებ. მე გაგიმხელთ ვებ – გვერდის საწყის კონფიგურაციას, როგორ შევქმნათ რამდენიმე განსხვავებული შინაარსის ბლოკი და რამდენიმე პრობლემა, რომელსაც შესაძლოა წააწყდეთ.

პორტფოლიო დაყოფილია რამდენიმე მცირე ნაბიჯად, რათა ის უფრო მართვადი გახადოს: HTML ჩარჩო, CSS ჩარჩო, Javascript ჩარჩო, სანავიგაციო ზოლი და საწყისი გვერდი (შინაარსის ბლოკებით).

თუ ჩემი ახსნა -განმარტებები რაღაცისთვის მაინც დაგაბნია, შეგიძლიათ მოგვწეროთ კომენტარი თქვენი კითხვებით, წინადადებებით, ან გუგლში ჩაწეროთ ის ელემენტი, რომელშიც თქვენ დაბნეული ხართ. ბევრი რესურსი არსებობს პროგრამირების ვებსაიტებისთვის და Bootstrap.

შენიშვნა: ეს სახელმძღვანელო არ არის ყოვლისმომცველი და არ უნდა იქნას გამოყენებული როგორც შემცვლელი HTML, CSS ან Javascript პროგრამირების შესასწავლად.

საჭირო რესურსები

• Bootstrap 4
• jQuery 3.3.1

არჩევითი რესურსები

• FontAwesome
• Google შრიფტები
• მონიშნე. js

თუ გსურთ გამოტოვოთ სრული მაგალითი ან გადახედოთ საცავს:

• სრული მაგალითი
• საცავი

შენიშვნა: მე გამოვიყენებ Sublime- ს სურათებში ჩემი მაგალითებისთვის, თუ გსურთ გაჰყევით იმავე ტექსტურ რედაქტორს.

ნაბიჯი 1: დაყენება

საქაღალდის დაყენება

1. შექმენით საქაღალდე სადმე, სადაც შეგიძლიათ შეინახოთ ყველაფერი, რასაც ჩვენ გადმოტვირთვას ვაპირებთ. ეს იქნება თქვენი პორტფელის ძირეული დირექტორია.
2. შექმენით საქაღალდე იმ საქაღალდის შიგნით, სახელწოდებით "ჩატვირთვის სამაჯური"
3. შექმენით სხვა საქაღალდე თქვენი ძირითადი პორტფოლიოს საქაღალდის შიგნით, სახელწოდებით "jquery"

პორტფელის საქაღალდე

| ----- ჩატვირთვის სამაჯური | ----- jquery

Bootstrap 4

1. ეწვიეთ მათ ვებსაიტს და დააწკაპუნეთ ღილაკზე "გადმოწერა" "შედგენილი CSS და JS" განყოფილების ქვემოთ.
2. შეინახეთ.zip ფაილი თქვენს "ჩამოტვირთვების" საქაღალდეში ან სხვა მოსახერხებელ ადგილას.
3. გახსენით.zip ფაილი და ამოიღეთ "css" და "js" საქაღალდეები "bootstrap" საქაღალდეში, რომელიც ადრე გააკეთეთ.

jQuery

1. ეწვიეთ მათ ვებსაიტს და გადმოწერეთ "არაკომპრესირებული, განვითარების jQuery 3.3.1"
2. შეინახეთ ეს ფაილი ადრე შექმნილ "jquery" საქაღალდეში.

ყველა ჩარჩო უკვე მზად არის, როდესაც ჩვენ ვიწყებთ მუშაობას რეალურ პორტფელზე.

ნაბიჯი 2: HTML ჩარჩო (index.html)

Თქვენი სახელი

ეს ჩარჩო არ არის ზედმეტად რთული, მაგრამ მე მინდა ავხსნა დაყენების ზოგადი მიზნები.

Bootstrap JS jQuery– ს შემდეგ

როგორც ჩანს, არსებობს გარკვეული სახის გადახურვა Bootstrap– ის Javascript ფაილსა და jQuery– ს შორის. მე არ გამოვცადე ვნახო რამდენად ვრცელია ეს გადახურვა, მაგრამ ერთი მაგალითია ჩამოსაშლელი ფუნქცია, რომელსაც ვიყენებ სანავიგაციო ზოლში. თუ პირველად ჩატვირთავთ Bootstrap– ში, ჩამოსაშლელი ღილაკი არ მუშაობს.

FontAwesome

თუ თქვენ გაქვთ რაიმე ვებ განვითარება, თქვენ ალბათ იცით რა არის FontAwesome. თუმცა, თუ ეს ასე არ არის, ეს არის ხატების ნაკრები, რომელიც შეიცავს ინსტრუმენტების ნაკრებებს დამატებითი პერსონალიზაციისთვის. ეს წარმოუდგენლად სასარგებლოა, თუ თქვენ ჩემნაირი ხართ და აბსოლუტურად არ გაქვთ მხატვრული ნიჭი.

hightlight.js

ეს ჩარჩო იძლევა ვებ გვერდებზე დინამიური კოდის ხაზგასმის საშუალებას. თქვენ შეგიძლიათ შემოიტანოთ იგი, როგორც მე ვიყენებ დანარჩენ ჩარჩოებს, თუ იყენებთ მხოლოდ საერთო პროგრამირების ენებს, მაგრამ ასევე არის შესაძლებლობა გადმოწეროთ ენების მორგებული ნაკრები. მე ავირჩიე ეს უკანასკნელი ვარიანტი რამდენიმე მაკრო და ენების გამო, მაგრამ ეს მთლიანად თქვენზეა დამოკიდებული.

შენიშვნა: იცოდეთ ის ადგილები, სადაც ვიყენებ მყარ კოდირებულ ბმულებს ფაილებისათვის, როგორიცაა ორი ხატი და highlight.js. ასევე, ვინაიდან საჭიროა მხოლოდ Bootstrap და jQuery, მოგერიდებათ დაამატოთ ან წაშალოთ ნებისმიერი სხვა ჩარჩო. თუ რომელიმე წაშალეთ, გახსოვდეთ, რომ წაშალეთ კოდის ხაზები, რომლებიც მოგვიანებით შეესაბამება.

ნაბიჯი 3: CSS ჩარჩო (style.css)

/ * * ვიმედოვნებთ, რომ bg ფერის ნაცრისფერი გახდება და შრიფტის სტილი იცვლება, ვებსაიტს უფრო ადვილად მოიხმარს */ body {background: ნაცრისფერი; font-family: 'Open Sans', sans-serif; }

/*

* ეს დარწმუნებულია, რომ nav bar არის ყველაფრის თავზე */ nav {z-index: 9999; }

/*

* ამით აბზაცის ტექსტი უფრო იკითხება */ p {font-size: 18px; margin-top: 5px; ზღვარი-ქვედა: 5px; }

/*

* ეს დარწმუნდება, რომ ჩემი ყველა კოდის ბლოკი სწორად არის ფორმატირებული */ code {text-align: left; }

/*

* მე არ მინდა, რომ სიებს ჰქონდეს ტყვიები */ li {list-style-type: none; }

/*

* ბმულები ნაგულისხმევად ლურჯია და მინდა რომ ისინი Bootstrap- ის სტილში იყოს */ li a, a {ფერი: თეთრი; }

/*

* მე ვუკავშირებ კლასის ტეგს div- ზე, რომელიც შეიცავს ნავარს, რათა დარწმუნდეთ, რომ შინაარსი არ არის გადახურული */.navFix {padding-bottom: 70px; }

/*

* გაზრდილი ზომა გადაჭიმავს navbar */.social-media {font-size: 1.3em; }

/*

* ჩამოსაშლელი ბმულების ნაგულისხმევი მონიშვნის ფერი არის თეთრი */. Dropdown-menu a: hover {background-color: #212529; }

/*

* ძალის გაყოფა pdf- ების ჩვენებას გარკვეულ სიმაღლეზე */.pdf შეავსეთ {სიმაღლე: 45rem; }

/*

* დაამატეთ მანძილი ღილაკებსა და კოდის ბლოკებს შორის */.codeStyle {padding-top: 30px; }

მე ჩავრთე შინაარსზე დაფუძნებული CSS ელემენტები ამ ჩარჩოში, რათა მოგვიანებით დაგიზოგოთ. ისინი ყველა ძალიან მარტივია და ძირითადად ცხოვრების ხარისხის ცვლილებებია, რაც პორტფელთან ურთიერთობას მკითხველს უადვილებს.

nav z-index

მე მაქვს ძალიან შეზღუდული ვებ განვითარების გამოცდილება, ამიტომ არ ვარ დარწმუნებული, არის თუ არა ეს საერთო პრობლემა Bootstrap– ის ნავიგაციის ზოლის განხორციელებისას, მაგრამ ყოველგვარი ორიენტაციის სპეციფიკაციის გარეშე, სანავიგაციო ზოლი რეალურად გამოჩნდება სხვა შინაარსის ქვეშ, როგორიცაა ჩატვირთვის ბარათები. ეს ყველაზე შესამჩნევია დასაკეცი ნავიგარით, მაგრამ უსაფრთხოების მიზნით მაინც შევიტანე ინდექსის ცვლილება.

კოდის გასწორება

ვინაიდან მე ჩვეულებრივ ვიყენებ Bootstrap- ის "დასაბუთება-შინაარსის ცენტრის" და "ტექსტის ცენტრის" კლასებს ელემენტების გასათანაბრად, მე არ მინდა, რომ ჩემმა კოდმა მემკვიდრეობით მიიღოს ეს ცენტრის გასწორებული ბუნება. ეს ადვილად გამოსწორდება ნებისმიერი ცვლილების გადაწერით და კოდის ტეგების მარცხნივ გასწორებით: ეს ინარჩუნებს ჩანართების დაშორებას კოდში.

navFix შევსება

როდესაც Bootstrap– ის ნავიგაციის ზოლი იკეტება გვერდის ზედა ნაწილში შინაარსი იტვირთება მის ქვეშ. მე მჯერა, რომ ეს ხდება იმიტომ, რომ ნავიბარი ფაქტობრივად ჩარჩენილია ხედის თავზე, თავად გვერდის ნაცვლად. მიუხედავად ამისა, ეს დაფიქსირებულია ნავიგაციასა და დანარჩენ შინაარსს შორის სივრცის გაზრდით.

pdf სიმაღლე

Pdf ფაილების ნაგულისხმევი სიმაღლე წარმოუდგენლად მცირეა. ეს არსებითად წაუკითხავია, ამიტომ მე შევიცვალე სიმაღლე და ვცდილობდი საკმარისი ადგილი მიმეცა ერთ გვერდზე.

ნაბიჯი 4: Javascript ჩარჩო (javascript.js)

/ * * ეს ეძებს ნებისმიერ ელემენტს "გადართვა" კლასში და მალავს ან აჩვენებს მას */ ფუნქცია 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 = "არცერთი"; }

divID.style.display = "ბლოკი";

}

დაბრუნება ცრუ;

}

/*

* კოდი, რომელიც უნდა შესრულდეს გარკვეული თანმიმდევრობით */ $ (დოკუმენტი). უკვე (ფუნქცია () {/ * * ფაილებიდან შინაარსის ჩატვირთვა */

/*

* აიძულეთ მცირე შეფერხება მონაცემებში ჩატვირთვა */ setTimeout (ფუნქცია () {/ * * მონიშნეთ */ $ ("წინასწარი კოდი") ჩატვირთული ყველა კოდი. თითოეული (ფუნქცია (i, ბლოკი) { hljs.highlightBlock (ბლოკი);});}, 1000); });

ამ პორტფელის გასაადვილებლად მოდიფიცირება და მართვა, გადავწყვიტე გამოვიყენო ერთი გვერდიანი ფორმატი. ის ინარჩუნებს ყველაფერს ადგილობრივ ნაწილს და აჩქარებს შინაარსს.

გადართვა სექცია

მე გამოვიყენე კლასის ღირებულებები, რათა განვსაზღვრო, თუ რა შინაარსი უნდა იყოს ნაჩვენები ან დამალული, რადგან უმეტეს დროს მე ვიყენებ div- ებს, რომ გამოვყოთ და დავაჯგუფო მრავალი ელემენტი ერთად. თქვენ შეგიძლიათ გამოიყენოთ ეს ცალკეული ღილაკების დასაჯგუფებლად, მაგრამ ეს მოითხოვს დამატებით შემოწმებას "ბლოკის" ეკრანის დაყენებამდე, რათა არ მოხდეს შინაარსის ჩვენება.

დოკუმენტის ჩატვირთვა

მე ეს ჩავრთე იმიტომ, რომ ზოგადად არეულია რეგულარული HTML ფაილების დამოუკიდებელი პროგრამირების კოდის ჩართვა. ჩვენ შეგვიძლია გამოვიყენოთ დინამიური მონიშვნის ეს მეთოდი, რათა ვაიძულოთ პროცესი მოხდეს მას შემდეგ, რაც სხვა ფაილებიდან ჩავტვირთავთ შინაარსს.

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

ეს არის მაგალითი იმისა, თუ როგორ ჩავტვირთავთ შინაარსს.

ნაბიჯი 5: ნავიგაციის ზოლი

საწყისები

• მთავარი
• Ჩემს შესახებ
• პროექტების გაკვეთილები
• Დამიკავშირდი

• ნავიგაციის ზოლი არის ყველაზე რთული ელემენტი პორტფელის ყველაფრისგან. კლასების უზარმაზარი კომბინაცია მას თავსატეხს ჰგავს, რომელიც მოითხოვს თქვენ უწყვეტად შეხედოთ წესების წიგნს.

  ჩატვირთვის ფუნქცია

  Bootstrap ფუნქციონირებს არსებითად სხვადასხვა კლასის ღირებულებების მეშვეობით. თავად "nav" ელემენტის დათვალიერებისას, არც ისე რთულია თითოეული კლასის მიზნის დადგენა:

  ჩვენი "navbar" არის "md" (საშუალო), "გაფართოება" შეუძლია, "მუქი" ვარიანტი. და ჩვენ "დავაფიქსირეთ" ის "ზედა". ის გამოიყურება დამაბნეველი, რადგან ეს არის იდენტიფიკატორების შერწყმა, მაგრამ თუ მათ შეხედავთ როგორც ელემენტის ზედსართავ სახელებს, გაცილებით ადვილი ხდება იმის გაგება, თუ რა ხდება.

  ბრენდი

  ბრენდი არის ტიპიური ლოგო და სახელი, რომელსაც ხედავთ ყველა ვებსაიტზე ზედა მარცხენა კუთხეში. ეს არის გამოცდილი დიზაინის ელემენტი, რომელსაც ყველა მომხმარებელი ელოდება ამ ეტაპზე.

  შენიშვნა: "i" ტეგები ფაქტობრივად FontAwesome ხატებია და თქვენ მიიღებთ ამ ტეგებს ნებისმიერი ხატის გვერდიდან.

  Toggler/დასაკეცი ღილაკი (მობილური)

  ეს ღილაკი გამოჩნდება მხოლოდ მობილურ მოწყობილობებზე. მაგრამ ვინაიდან ჩვენ "nav" დეკლარაციაში შევიტანეთ ნავიგაციის ზოლის გაფართოება, ეს ელემენტები ერთმანეთთან აკავშირებს მათი ID- ებისა და "data-toggle" იდენტიფიკატორების საშუალებით.

  Navbar ბმულები (მარცხენა მხარეს)

  ეს ბმულები მთლიანად დამოკიდებულია იმაზე, თუ რა კატეგორიები გჭირდებათ თქვენი პორტფელისთვის. მე რამდენიმე ტიპიური მაგალითი შევიტანე საწყის წერტილად, მაგრამ არავინ არის იგივე. თქვენ შეიძლება არ დაგჭირდეთ "გაკვეთილების" განყოფილება, რადგან თქვენ ფოკუსირდებით ხელოვნების ქანდაკებების შემუშავებაზე. თითოეული "ლი" ერთეულის კოპირება და ჩასმა შესაძლებელია, ასე რომ მას შემდეგ რაც გაარკვევთ რა გჭირდებათ, ადვილია ნავიგაციის დაყენება.

  შენიშვნა: თქვენ შეგიძლიათ ტექნიკურად შექმნათ ჩამოსაშლელი მენიუები სხვა ჩამოსაშლელ მენიუში, მაგრამ მე ამას არ გირჩევთ, თუ თქვენ არ გსურთ დაამატოთ მეტი CSS და Javascript, რათა ინტერფეისი სუფთა იყოს.

  Navbar ბმულები (მარჯვენა მხარეს)

  "Ml-auto" კლასის ბმულების სწორი ჩამონათვალის მიცემით, Bootstrap თანაბრად ჰყოფს ორ სიას თანაბრად. ეს ქმნის სუფთა მარცხენა და მარჯვენა მხარის გაყოფას. მე გადავწყვიტე გამოვიყენო ეს სივრცე სოციალური მედიის ბმულებისთვის, რადგან ეს არის ძალიან გავრცელებული და პოპულარული მეთოდი თქვენი ყოფნის გასაზრდელად. თუ ეს არ არის შესაბამისი, შეგიძლიათ გააუქმოთ ეს ბმულები საძიებო ზოლში, შესვლის ინფორმაცია და ა.შ. მაგრამ უბრალოდ გახსოვდეთ, რომ გამოსაყენებლად მნიშვნელოვანი ადგილია. მარცხენა მხარეს ნავიგაციის ბმულების მსგავსად, თქვენ ასევე შეგიძლიათ დააკოპიროთ და ჩასვათ ისინი.

  შენიშვნა: თუ თქვენ აპირებთ უკვე დაყენებული ბმულების გამოყენებას, თავად შეცვალეთ "მომხმარებლის სახელი" რეალურ "href" ბმულებში.

  ნაბიჯი 6: საწყისი გვერდი

  

  

  

  Თქვენი სახელი

  პროგრამისტი მწერალი გამერი

  ეს განყოფილება და შინაარსის შემდგომი გვერდები დამოკიდებული იქნება იმაზე, თუ რა გსურთ განათავსოთ თქვენს პორტფელში. ცხადია, მე არ შემიძლია მივმართო შინაარსის თითოეულ ტიპს, მაგრამ შევეცადე ჩავრთო სურათები, pdf, ვიდეო, კოდის ბლოკები, ზოგიერთი ტიპიური ჩანართები.

  მაგიდის ფორმატი

  საწყისი გვერდი შეიქმნა მაგიდის ფუნქციის შესასრულებლად. მე არ დავეყრდნობი ჩემს საოცარ დიზაინის უნარებს თქვენი საბოლოო პროდუქტის შესაქმნელად, მაგრამ დავამატე მწკრივებისა და სვეტების კომბინაციების სხვადასხვა ვარიაციები, რათა დავანახო, რომ ის ძალიან დინამიური და მოქნილია. თქვენ შეგიძლიათ შექმნათ 3 სტრიქონი და 2 სვეტი, რომლებსაც აქვთ ღილაკები მარცხნივ და შინაარსი მარჯვნივ, ან შეგიძლიათ გააკეთოთ რაიმე სრულიად განსხვავებული. ამას მხოლოდ მცირე ექსპერიმენტი სჭირდება.

  ღილაკები

  ეს ფუნქციები არსებითად, ისევე როგორც ჩვეულებრივი ღილაკები. ერთადერთი რეალური Bootstrap ინტეგრაცია აქ გამომდინარეობს სტილიდან, რომელიც ემთხვევა დანარჩენ თემას. წინააღმდეგ შემთხვევაში, შექმენით იმდენი ან იმდენი პატარა ღილაკი, რამდენიც გჭირდებათ თქვენი შინაარსის საჩვენებლად და შემდეგ დარწმუნდით, რომ შეესაბამება href ბმულებს div- ების ID- ებთან.

  პროგრამირების კოდის შინაარსი

  "კოდის" ტეგები არის ნაგულისხმევი ტეგები, რომლებსაც highlight.js იყენებს ყველა ხაზგასმის სამართავად. თუ გახსოვთ javascript.js ფაილიდან, არის განყოფილება სხვა ფაილებიდან შინაარსის ჩასატვირთად.

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

  • ამის პირველი ნაწილი ეძებს იმ ელემენტის "id", რომელშიც გსურთ შინაარსის ჩასმა.
  • მეორე ნაწილი არის ფაილის ადგილმდებარეობა, რომელშიც გსურთ ჩატვირთვა.

  შენიშვნა: შინაარსი ფაქტიურად არ იტვირთება მთლიანად, რადგან დიდი შანსია თქვენ შეცვალოთ ეს ვებ გვერდი ადგილობრივად და არა სერვერზე. ეს შეიძლება მოგვარდეს სხვადასხვა გზით, რომელსაც მე მივმართავ ინსტრუქციის ბოლოს.

  YouTube ვიდეო

  ჩამონტაჟებული "iframe" რეალურად მოდის თავად YouTube- დან. მე არ განვმარტავ, თუ როგორ უნდა მივიღო ისინი, მაგრამ როდესაც გადადიხართ ვიდეოს "გაზიარებაზე", არის "ჩაშენება" ვარიანტი, რომელიც დაგეხმარებათ კოდის გენერირებაში, რომელიც აუცილებელია თქვენი ვიდეოს საჩვენებლად ვებ გვერდზე.

  ნაბიჯი 7: ველი წინ

  ძალიან დიდი შანსია, რომ მე არ განვიხილო რაიმე ელემენტი ან შინაარსის ტიპი, რომელიც გსურთ შეიტანოთ თქვენს ვებგვერდზე. საბედნიეროდ, ბევრი კარგი ვარიანტია თქვენთვის, რომ შემდეგი ნაბიჯები თავად გადადგათ.

  Bootstrap– ის დოკუმენტაცია

  Bootstrap– ის დოკუმენტაცია შესანიშნავი ადგილია დასაწყებად, თუ თქვენ ეძებთ წინასწარ დაპროგრამებულ ელემენტებს და აქვთ მაგალითები, რომელთა ექსპერიმენტისთვის შეგიძლიათ დააკოპიროთ და ჩასვათ თქვენს პორტფოლიოში. მე არ შევეხე ბარათებს, კარუსელებსა და ფორმებს. მე გირჩევთ, რომ გადახედოთ "კომპონენტებს" განყოფილებას, რომ ნახოთ პარამეტრები.

  W3 სკოლები

  W3Schools არის მშვენიერი ვებ – გვერდი, სადაც შეგიძლიათ გაიგოთ ყველაფერი, რაც დაკავშირებულია ვებ პროგრამირებასთან და განვითარებასთან. ისინი ჩემზე ბევრად ჭკვიანები არიან და მოიცავს თითქმის ყველა HTML, CSS და Javascript ფუნქციონირებას, რომლის მოფიქრებაც შეგიძლიათ.

  თქვენი პორტფელის მასპინძლობა

  ეს ინსტრუქცია გასწავლით თუ როგორ უნდა უმასპინძლოთ თქვენს ვებ გვერდს რამდენიმე სხვადასხვა პლატფორმაზე. ეს არის ის ნაბიჯები, რომლებიც თქვენ უნდა გადადგათ, თუ გსურთ, რომ ადამიანებს, დამქირავებლებს და ა.შ. აჩვენოთ თქვენი პორტფოლიო.

  ექსპერიმენტი და გაერთეთ

  ერთადერთი გზა, რომლითაც შეგიძლიათ შექმნათ შესანიშნავი პორტფოლიო არის ექსპერიმენტი და სცადოთ ყველაფერი და ყველაფერი, რაც გამოიყურება საინტერესო. ბევრი ლამაზი დიზაინის პორტფოლიო და ვებ – გვერდი იყენებს შესანიშნავ გარდამავალ ეფექტებს ან დინამიურ ფონს, მაგრამ არცერთი მათგანი არ არის წინასწარ დამზადებული.