วิธีสร้างเว็บไซต์ที่เพรียวบางและเรียบง่ายด้วย Bootstrap 4: 7 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

จุดประสงค์ของคำแนะนำนี้คือเพื่อให้ผู้ที่คุ้นเคยกับการเขียนโปรแกรม - HTML หรืออย่างอื่น - คำแนะนำง่ายๆ เกี่ยวกับการสร้างพอร์ตโฟลิโอออนไลน์ด้วย Bootstrap 4 ฉันจะแนะนำคุณเกี่ยวกับการตั้งค่าเริ่มต้นของเว็บไซต์ วิธีสร้างบล็อกเนื้อหาต่างๆ และปัญหาเล็กน้อยที่คุณอาจพบ

พอร์ตโฟลิโอแบ่งออกเป็นขั้นตอนเล็กๆ จำนวนหนึ่งเพื่อพยายามทำให้จัดการได้ง่ายขึ้น: เฟรม HTML, เฟรม CSS, เฟรม Javascript, แถบนำทาง และโฮมเพจ (พร้อมบล็อกเนื้อหา)

หากคำอธิบายของฉันสำหรับบางสิ่งยังคงทำให้คุณสับสน โปรดแสดงความคิดเห็นพร้อมคำถาม ข้อเสนอแนะ หรือ google องค์ประกอบที่คุณสับสน มีแหล่งข้อมูลมากมายสำหรับเว็บไซต์การเขียนโปรแกรมและ Bootstrap

หมายเหตุ: คู่มือนี้ไม่ได้ครอบคลุมทั้งหมด และไม่ควรใช้แทนการเรียนรู้วิธีเขียนโปรแกรมใน HTML, CSS หรือ Javascript

ทรัพยากรที่จำเป็น

• Bootstrap4
• jQuery 3.3.1

ทรัพยากรทางเลือก

• FontAwesome
• Google Fonts
• highlight.js

หากคุณต้องการข้ามไปยังตัวอย่างแบบเต็มหรือดูที่ที่เก็บ:

• ตัวอย่างเต็ม
• ที่เก็บ

หมายเหตุ: ฉันจะใช้ Sublime ในรูปภาพสำหรับตัวอย่างของฉัน หากคุณต้องการใช้โปรแกรมแก้ไขข้อความเดียวกัน

ขั้นตอนที่ 1: การตั้งค่า

ตั้งค่าโฟลเดอร์

1. สร้างโฟลเดอร์ในที่ซึ่งคุณสามารถจัดเก็บทุกอย่างที่เราจะดาวน์โหลด นี่จะเป็นไดเรกทอรีรากของคุณสำหรับพอร์ตโฟลิโอ
2. สร้างโฟลเดอร์ภายในชื่อ "bootstrap"
3. สร้างโฟลเดอร์อื่นภายในโฟลเดอร์รูทพอร์ตของคุณที่ชื่อ “jquery”

แฟ้มผลงาน

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

Bootstrap4

1. เยี่ยมชมเว็บไซต์ของพวกเขาและคลิกปุ่ม "ดาวน์โหลด" ใต้ส่วน "Css และ JS ที่คอมไพล์แล้ว"
2. บันทึกไฟล์.zip ไว้ในโฟลเดอร์ "ดาวน์โหลด" หรือตำแหน่งอื่นที่สะดวก
3. เปิดไฟล์.zip และแตกโฟลเดอร์ "css" และ "js" ไปยังโฟลเดอร์ "bootstrap" ที่คุณสร้างไว้ก่อนหน้านี้

jQuery

1. เยี่ยมชมเว็บไซต์ของพวกเขาและดาวน์โหลด “uncompressed, development jQuery 3.3.1”
2. บันทึกไฟล์นั้นในโฟลเดอร์ "jquery" ที่คุณทำไว้ก่อนหน้านี้

กรอบงานทั้งหมดพร้อมแล้วเมื่อเราเริ่มทำงานกับพอร์ตโฟลิโอจริง

ขั้นตอนที่ 2: เฟรม HTML (index.html)

ชื่อของคุณ

เฟรมนี้ไม่มีอะไรซับซ้อนเกินไป แต่ฉันต้องการอธิบายวัตถุประสงค์ทั่วไปของการตั้งค่า

Bootstrap JS หลังจาก jQuery

ดูเหมือนว่าจะมีการทับซ้อนกันระหว่างไฟล์ Javascript ของ Bootstrap และของ jQuery ฉันไม่ได้ทดสอบเพื่อดูว่าการทับซ้อนกันนี้กว้างขวางเพียงใด แต่ตัวอย่างหนึ่งคือฟังก์ชันดรอปดาวน์ที่ฉันใช้ในแถบนำทาง หากคุณโหลดใน Bootstrap ก่อน ปุ่มดรอปดาวน์จะไม่ทำงาน

FontAwesome

หากคุณได้ทำการพัฒนาเว็บไซต์มาแล้ว โอกาสที่คุณจะรู้ว่า FontAwesome คืออะไร อย่างไรก็ตาม หากไม่เป็นเช่นนั้น จะเป็นชุดไอคอนที่มีชุดเครื่องมือสำหรับการปรับแต่งเพิ่มเติม มันมีประโยชน์มากถ้าคุณเป็นเหมือนฉันและไม่มีพรสวรรค์ด้านศิลปะเลย

hightlight.js

เฟรมเวิร์กนี้ช่วยให้สามารถเน้นโค้ดแบบไดนามิกบนหน้าเว็บได้ คุณสามารถนำเข้าได้เหมือนกับเฟรมเวิร์กอื่นๆ ที่ฉันใช้ หากคุณใช้เฉพาะภาษาโปรแกรมทั่วไปเท่านั้น แต่ยังมีตัวเลือกในการดาวน์โหลดชุดภาษาที่กำหนดเองอีกด้วย ฉันเลือกตัวเลือกหลังเนื่องจากมีการมาโครและภาษา ini ไม่กี่ภาษา แต่ก็ขึ้นอยู่กับคุณทั้งหมด

หมายเหตุ: ระวังสถานที่ที่ฉันใช้ลิงก์แบบฮาร์ดโค้ดไปยังไฟล์ต่างๆ เช่น ไอคอนทั้งสองและ highlight.js นอกจากนี้ เนื่องจากจำเป็นต้องใช้ Bootstrap และ jQuery เท่านั้น คุณสามารถเพิ่มหรือลบเฟรมเวิร์กอื่น ๆ ได้ตามสบาย หากคุณลบออก อย่าลืมลบบรรทัดของรหัสที่สัมพันธ์กันในภายหลัง

ขั้นตอนที่ 3: เฟรม CSS (style.css)

/* * หวังว่าการปรับสี bg ให้เป็นสีเทาและการเปลี่ยนรูปแบบตัวอักษรจะทำให้เว็บไซต์ใช้งานได้ง่ายขึ้น */ เนื้อหา { พื้นหลัง: สีเทา; ตระกูลแบบอักษร: 'Open Sans', sans-serif; }

/*

* สิ่งนี้ทำให้แน่ใจว่าแถบนำทางอยู่ด้านบนของทุกสิ่ง */ nav { z-index: 9999; }

/*

* สิ่งนี้ควรทำให้ข้อความในย่อหน้าอ่านง่ายขึ้น */ p { font-size: 18px; ขอบบน: 5px; ระยะขอบล่าง: 5px; }

/*

* สิ่งนี้ทำให้แน่ใจว่าบล็อคโค้ดทั้งหมดของฉันมีรูปแบบที่ถูกต้อง */ code { text-align: left; }

/*

* ฉันไม่ต้องการให้รายการมีสัญลักษณ์แสดงหัวข้อย่อย */ li { list-style-type: none; }

/*

* ลิงก์จะเป็นสีน้ำเงินโดยค่าเริ่มต้น และฉันต้องการให้พวกมันสอดคล้องกับสไตล์ของ Bootstrap */ li a, a{ สี: สีขาว; }

/*

* ฉันผูกแท็กคลาสกับ div ที่มีแถบนำทางเพื่อให้แน่ใจว่าเนื้อหาจะไม่ทับซ้อนกัน */.navFix { padding-bottom: 70px; }

/*

* ขนาดที่เพิ่มขึ้นขยายแถบนำทาง */.social-media { ขนาดแบบอักษร: 1.3em; }

/*

* สีไฮไลต์เริ่มต้นสำหรับลิงก์แบบเลื่อนลงคือสีขาว */.dropdown-menu a:hover { background-color: #212529; }

/*

* บังคับ divs แสดง pdfs เป็นความสูงที่กำหนด */.pdfFill { height: 45rem; }

/*

* เพิ่มระยะห่างระหว่างปุ่มและบล็อคโค้ด */.codeStyle { padding-top: 30px; }

ฉันได้รวมองค์ประกอบ CSS ตามเนื้อหาไว้ในเฟรมนี้เพื่อพยายามช่วยคุณประหยัดเวลาในภายหลัง ทั้งหมดนี้เรียบง่ายมากและส่วนใหญ่เป็นการเปลี่ยนแปลงคุณภาพชีวิตที่ทำให้ผู้อ่านโต้ตอบกับพอร์ตโฟลิโอได้ง่ายขึ้น

nav z-index

ฉันมีประสบการณ์การพัฒนาเว็บในจำนวนที่จำกัด ดังนั้นฉันไม่แน่ใจว่านี่เป็นปัญหาทั่วไปเมื่อใช้แถบนำทางของ Bootstrap หรือไม่ แต่ไม่มีข้อกำหนดการวางแนวหน้า-หลัง แถบนำทางจะปรากฏภายใต้เนื้อหาอื่นๆ เช่น การ์ดของ Bootstrap สิ่งนี้สังเกตเห็นได้ชัดเจนที่สุดด้วยแถบนำทางที่ยุบได้ แต่ฉันรวมการเปลี่ยนแปลงดัชนีไว้ด้วยเพื่อความปลอดภัย

การจัดตำแหน่งรหัส

เนื่องจากโดยปกติฉันใช้คลาส "justify-content-center" และ "text-center" ของ Bootstrap เพื่อจัดแนวองค์ประกอบ ฉันไม่ต้องการให้โค้ดของฉันสืบทอดลักษณะการจัดกึ่งกลางนั้น ซึ่งแก้ไขได้ง่ายโดยเขียนทับการเปลี่ยนแปลงการจัดตำแหน่งและจัดแท็กโค้ดให้ชิดซ้าย ซึ่งจะรักษาระยะห่างแท็บในโค้ด

navFix padding

เมื่อแถบนำทางของ Bootstrap ติดอยู่ที่ด้านบนของหน้า เนื้อหาจะโหลดอยู่ใต้นั้น ฉันเชื่อว่าสิ่งนี้เกิดขึ้นเพราะจริง ๆ แล้วแถบนำทางติดอยู่ที่ด้านบนของวิวพอร์ตแทนที่จะเป็นหน้า ไม่ว่าสิ่งนี้จะได้รับการแก้ไขโดยการเพิ่มช่องว่างระหว่างแถบนำทางและเนื้อหาที่เหลือ

pdf ความสูง

ความสูงเริ่มต้นของไฟล์ pdf นั้นเล็กมากอย่างไม่น่าเชื่อ โดยพื้นฐานแล้วไม่สามารถอ่านได้ ดังนั้นฉันจึงเปลี่ยนความสูงเพื่อพยายามให้มีพื้นที่เพียงพอสำหรับครั้งละประมาณหนึ่งหน้า

ขั้นตอนที่ 4: Javascript Frame (javascript.js)

/* * สิ่งนี้ค้นหาองค์ประกอบใด ๆ ที่มีคลาส 'toggle' และซ่อนหรือยกเลิกการซ่อน */ function toggleSection(id, toggleID) { if (document.getElementById(id)) { var divID = document.getElementById(id); var divArray = document.getElementsByClassName (toggleID);

สำหรับ (var i = 0; i < divArray.length; i++) { divArray.style.display = "none"; }

divID.style.display = "บล็อก";

}

คืนค่าเท็จ;

}

/*

* รหัสที่ต้องรันในลำดับที่แน่นอน */ $(document).ready(function() { /* * โหลดเนื้อหาจากไฟล์ */

/*

* บังคับให้โหลดข้อมูลล่าช้าเล็กน้อย */ setTimeout(function() { /* * เน้นรหัสทั้งหมดที่โหลดใน */ $('pre code').each(function(i, block) { hljs.highlightBlock(บล็อก); }); }, 1000); });

เพื่อให้พอร์ตโฟลิโอนี้ง่ายต่อการปรับเปลี่ยนและจัดการ ฉันจึงตัดสินใจใช้รูปแบบหน้าเดียว มันทำให้ทุกอย่างอยู่ในเครื่องเป็นส่วนใหญ่และทำให้การโหลดเนื้อหาเร็วขึ้น

สลับส่วน

ฉันใช้ค่าของคลาสเพื่อจัดการเนื้อหาที่ต้องแสดงหรือซ่อน เพราะส่วนใหญ่ฉันใช้ div เพื่อแยกและจัดกลุ่มองค์ประกอบต่างๆ เข้าด้วยกัน คุณสามารถใช้ปุ่มนี้เพื่อจัดกลุ่มปุ่มแต่ละปุ่มไว้ด้วยกันได้เช่นกัน แต่ต้องมีการตรวจสอบเพิ่มเติมก่อนตั้งค่าการแสดง "บล็อก" เพื่อไม่ให้แสดงเนื้อหา

การโหลดเอกสาร

ฉันรวมสิ่งนี้ไว้เพราะโดยทั่วไปแล้วการใส่โค้ดโปรแกรมอิสระจำนวนมากในไฟล์ HTML ปกติจะยุ่งเหยิง เราสามารถใช้วิธีการเน้นแบบไดนามิกนี้เพื่อบังคับให้กระบวนการเกิดขึ้นหลังจากที่เราโหลดเนื้อหาจากไฟล์อื่น

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

นี่คือตัวอย่างวิธีการโหลดเนื้อหา

ขั้นตอนที่ 5: แถบนำทาง

ชื่อย่อ

• บ้าน
• เกี่ยวกับฉัน
• โครงการสอน
• ติดต่อฉัน

แถบนำทางเป็นองค์ประกอบที่ซับซ้อนที่สุดจากทุกสิ่งในพอร์ตโฟลิโอ การผสมผสานของคลาสต่างๆ เข้าด้วยกันทำให้ดูเหมือนปริศนาที่คุณต้องดูกฎอย่างต่อเนื่อง

ฟังก์ชั่น Bootstrap

Bootstrap ทำงานโดยอาศัยค่าคลาสที่แตกต่างกัน เมื่อพิจารณาจากองค์ประกอบ "nav" แล้ว การระบุวัตถุประสงค์ของแต่ละคลาสนั้นไม่ยากเกินไป:

"navbar" ของเราคือตัวเลือก "md" (กลาง) "ขยาย" ได้ "มืด" และเรา "แก้ไข" ไปที่ "ด้านบน" มันดูสับสนเพราะเป็นตัวระบุที่สับสน แต่ถ้าคุณมองว่ามันเป็นคำคุณศัพท์สำหรับองค์ประกอบ จะเข้าใจสิ่งที่เกิดขึ้นได้ง่ายขึ้นมาก

ยี่ห้อ

แบรนด์คือโลโก้และชื่อทั่วไปที่คุณเห็นในทุกเว็บไซต์ที่ด้านบนซ้าย เป็นองค์ประกอบการออกแบบที่ได้รับการพิสูจน์แล้วซึ่งผู้ใช้ทุกคนคาดหวัง ณ จุดนี้

หมายเหตุ: แท็ก "i" แท้จริงแล้วคือไอคอน FontAwesome และคุณได้รับแท็กเหล่านี้จากหน้าของไอคอนใดๆ

ปุ่มสลับ/พับ (มือถือ)

ปุ่มนี้แสดงเฉพาะบนอุปกรณ์มือถือเท่านั้น แต่เนื่องจากเรารวมไว้ในประกาศ "nav" ว่าแถบการนำทางจำเป็นต้องขยายได้ องค์ประกอบเหล่านี้จึงเชื่อมต่อกันผ่าน ID และตัวระบุ "data-toggle"

ลิงก์ Navbar (ด้านซ้าย)

ลิงก์เหล่านี้ทั้งหมดขึ้นอยู่กับประเภทที่คุณต้องการสำหรับพอร์ตโฟลิโอของคุณ ฉันได้รวมตัวอย่างทั่วไปสองสามตัวอย่างเป็นจุดเริ่มต้น แต่ไม่มีใครเหมือนกัน คุณอาจไม่ต้องการส่วน "บทช่วยสอน" เนื่องจากคุณมุ่งเน้นที่การประดิษฐ์งานประติมากรรม คุณสามารถคัดลอกและวางรายการ "li" แต่ละรายการได้ ดังนั้นเมื่อคุณทราบแล้วว่าต้องการอะไร คุณก็ตั้งค่าการนำทางได้ง่าย

หมายเหตุ: ในทางเทคนิค คุณสามารถสร้างเมนูดรอปดาวน์ในเมนูดรอปดาวน์อื่นๆ ได้ แต่ฉันจะไม่แนะนำเว้นแต่คุณจะเต็มใจที่จะเพิ่ม CSS และ Javascript เพิ่มเติมเพื่อทำให้อินเทอร์เฟซดูสะอาดตา

ลิงค์ Navbar (ด้านขวา)

ด้วยการให้รายการลิงก์ที่ถูกต้องกับคลาส "ml-auto" Bootstrap จะแยกรายการทั้งสองอย่างเท่าๆ กัน สิ่งนี้จะสร้างการแบ่งด้านซ้ายและขวาที่สะอาด ฉันตัดสินใจใช้พื้นที่นี้สำหรับลิงก์โซเชียลมีเดีย เพราะเป็นวิธีที่ธรรมดาและเป็นที่นิยมมากในการเพิ่มการแสดงตัวของคุณ หากไม่เกี่ยวข้อง คุณสามารถทิ้งลิงก์เหล่านี้สำหรับแถบค้นหา ข้อมูลการเข้าสู่ระบบ ฯลฯ แต่อย่าลืมว่าพื้นที่ดังกล่าวเป็นพื้นที่สำคัญที่ต้องใช้ และคล้ายกับลิงก์แถบนำทางทางด้านซ้าย คุณสามารถคัดลอกและวางลิงก์เหล่านี้ได้เช่นกัน

หมายเหตุ: หากคุณวางแผนที่จะใช้ลิงก์ที่ฉันได้ตั้งค่าไว้แล้ว ให้เปลี่ยน "ชื่อผู้ใช้" ในลิงก์ "href" จริงด้วยตนเอง

ขั้นตอนที่ 6: หน้าแรก

ชื่อของคุณ

โปรแกรมเมอร์ นักเขียน เกมเมอร์

ส่วนนี้และหน้าเนื้อหาถัดไปของคุณจะขึ้นอยู่กับสิ่งที่คุณต้องการใส่ในพอร์ตโฟลิโอของคุณ เห็นได้ชัดว่าฉันไม่สามารถระบุเนื้อหาทุกประเภทได้ แต่ฉันพยายามรวมรูปภาพ, pdf, วิดีโอ, โค้ดบล็อก, การรวมทั่วไปบางส่วน

รูปแบบตาราง

หน้าแรกถูกตั้งค่าให้ทำหน้าที่เป็นตาราง ฉันจะไม่พึ่งพาทักษะการออกแบบอันน่าทึ่งของฉันในการสร้างผลิตภัณฑ์ขั้นสุดท้ายของคุณ แต่ฉันได้เพิ่มรูปแบบต่างๆ ของการผสมผสานแถวและคอลัมน์เพื่อแสดงให้เห็นว่ามันเป็นแบบไดนามิกและยืดหยุ่นมาก คุณสามารถสร้าง 3 แถวและ 2 คอลัมน์เพื่อให้มีปุ่มทางด้านซ้ายและเนื้อหาทางด้านขวา หรือคุณสามารถทำสิ่งที่แตกต่างไปจากเดิมอย่างสิ้นเชิง ใช้เวลาทดลองเพียงเล็กน้อย

ปุ่ม

ฟังก์ชั่นเหล่านี้โดยพื้นฐานแล้วเหมือนกับปุ่มปกติ การรวม Bootstrap ที่แท้จริงเพียงอย่างเดียวที่นี่เกิดขึ้นจากการจัดสไตล์เพื่อให้เข้ากับธีมที่เหลือ มิฉะนั้น ให้สร้างปุ่มมากหรือน้อยเท่าที่คุณต้องการเพื่อแสดงเนื้อหาของคุณ จากนั้นตรวจสอบให้แน่ใจว่าได้จับคู่ลิงก์ href กับรหัสสำหรับ div

เนื้อหารหัสการเขียนโปรแกรม

แท็ก "code" เป็นแท็กเริ่มต้นที่ highlight.js ใช้เพื่อจัดการการเน้นสีทั้งหมด หากคุณจำได้จากไฟล์ javascript.js มีส่วนให้โหลดเนื้อหาจากไฟล์อื่น

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

• ส่วนแรกของสิ่งนี้จะมองหา "id" ขององค์ประกอบที่คุณต้องการแทรกเนื้อหาเข้าไป
• ส่วนที่สองคือตำแหน่งของไฟล์ที่คุณต้องการโหลด

หมายเหตุ: เนื้อหาไม่สามารถโหลดได้อย่างสมบูรณ์เนื่องจากมีโอกาสดีที่คุณจะแก้ไขหน้าเว็บนี้ในเครื่องแทนบนเซิร์ฟเวอร์ สามารถแก้ไขได้หลายวิธี ซึ่งฉันจะพูดถึงในตอนท้ายของคำแนะนำ

วิดีโอ YouTube

จริงๆ แล้ว "iframe" ที่ฝังตัวมาจาก YouTube เอง ฉันจะไม่อธิบายอย่างละเอียดถึงวิธีการรับมัน แต่เมื่อคุณไปที่ "แชร์" วิดีโอ จะมีตัวเลือก "ฝัง" ที่จะช่วยคุณสร้างโค้ดที่จำเป็นในการแสดงวิดีโอของคุณบนหน้าเว็บ

ขั้นตอนที่ 7: มองไปข้างหน้า

มีโอกาสที่ดีมากที่ฉันไม่ได้ครอบคลุมองค์ประกอบหรือเนื้อหาบางประเภทที่คุณต้องการรวมไว้ในเว็บไซต์ของคุณ โชคดีที่มีตัวเลือกดีๆ มากมายให้คุณดำเนินการในขั้นตอนต่อไปด้วยตนเอง

เอกสารของ Bootstrap

เอกสารประกอบของ Bootstrap เป็นจุดเริ่มต้นที่ดี หากคุณกำลังมองหาองค์ประกอบที่ได้รับการตั้งโปรแกรมไว้ล่วงหน้าและมีตัวอย่างที่คุณสามารถคัดลอกและวางลงในพอร์ตโฟลิโอของคุณเพื่อทดลองได้ ฉันไม่ได้แตะต้องการ์ด ภาพหมุน หรือแบบฟอร์ม เราขอแนะนำให้คุณดูส่วน "ส่วนประกอบ" เพื่อดูตัวเลือกต่างๆ

W3Schools

W3Schools เป็นเว็บไซต์ที่ยอดเยี่ยมที่คุณสามารถเรียนรู้อะไรก็ได้ที่เกี่ยวข้องกับการเขียนโปรแกรมเว็บและการพัฒนา พวกเขาฉลาดกว่าฉันมากและครอบคลุมเกือบทุกฟังก์ชัน HTML, CSS และ Javascript ที่คุณนึกออก

การโฮสต์ผลงานของคุณ

คำแนะนำนี้จะสอนวิธีโฮสต์เว็บไซต์ของคุณบนแพลตฟอร์มที่แตกต่างกันสองสามแบบ นี่คือขั้นตอนที่คุณต้องดำเนินการ หากคุณต้องการแสดงให้ผู้คน นายหน้า และอื่นๆ แสดงพอร์ตโฟลิโอของคุณ

ทดลองและสนุก

วิธีเดียวที่คุณจะสร้างพอร์ตโฟลิโอที่ยอดเยี่ยมคือการทดลองและทดลองทุกอย่างที่ดูน่าสนใจ พอร์ตโฟลิโอและเว็บไซต์การออกแบบที่หรูหราจำนวนมากใช้เอฟเฟกต์การเปลี่ยนภาพที่ยอดเยี่ยมหรือพื้นหลังแบบไดนามิก แต่ไม่มีสิ่งใดที่สร้างไว้ล่วงหน้า