สร้างเว็บไซต์ด้วย Bootstrap

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

ใน บทความก่อนหน้า คุณจะพบคำแนะนำในการติดตั้ง VS Codium แปลส่วนต่อประสานผู้ใช้เป็นภาษาสเปนและติดตั้งปลั๊กอิน Bootstrap

สองสิ่งที่ควรคำนึงถึง:

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

วิธีโคลนที่เก็บ GitHub

สิ่งที่แยกผู้ยิ่งใหญ่ออกจากพวกเราที่เหลือคือวิธีที่พวกเขาตอบสนองต่อปัญหา Richard Stallman ไม่ชอบไดรเวอร์เครื่องพิมพ์ของเขา และเนื่องจากพวกเขาไม่ยอมให้เขาเปลี่ยน เขาจึงเริ่มเคลื่อนไหวซอฟต์แวร์ฟรี Linus Torvalds ไม่เชื่อมั่นในแพลตฟอร์มการแชร์โค้ดใดๆ และสร้างขึ้นมาเอง คอมไพล์

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

มีบริการหลายอย่างตาม Git ฉันเลือก GitHub เพียงเพราะมันผสานรวมกับ VS Codium

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

จากนั้นคุณพิมพ์คำสั่งต่อไปนี้

ฉันชอบที่จะบันทึกไฟล์ในโฟลเดอร์ Documents ดังนั้นฉันจึงเปลี่ยนไดเร็กทอรีด้วย

cd Documentos

จากนั้นฉันก็โคลนไฟล์ด้วย:

git clone https://github.com/dggonzalez1971/bootstrap.git

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

ในการดูไฟล์เพียงแค่เปิด file explorer แล้วมองหาโฟลเดอร์ บูตสแตรป

สร้างเว็บไซต์ด้วย Bootstrap

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

จากนั้นเราทำตามขั้นตอนต่อไป:

1. ไปที่เมนูกันเลย เก็บถาวร
2. คลิกที่ ไฟล์ข้อความใหม่.
3. คลิกที่ ประหยัด
4. เรามองหาโฟลเดอร์ที่เราสร้างและใส่ชื่อไฟล์ example1.html
5. คลิกที่ ประหยัด

บางครั้งหน้าต่าง File Explorer อาจถูกซ่อนโดย VSCodium หนึ่ง

ให้ส่วนขยายสร้างเทมเพลตพื้นฐานสำหรับเรา สำหรับสิ่งนี้เราพิมพ์ !b5-$

สิ่งนี้จะสร้างรหัสที่คุณจะพบในโฟลเดอร์ตัวอย่างเป็น example1.html

เราจะเห็นสิ่งต่อไปนี้:

เราจะทำการเปลี่ยนแปลงบางอย่างกับไฟล์นี้ คุณจะพบการแก้ไขภายใต้ชื่อ example2.html

• ในบรรทัดที่ 2 เราเปลี่ยนภาษาโดยแทนที่ eng ด้วย es สิ่งนี้บ่งชี้ให้เครื่องมือค้นหาทราบว่าภาษาของเว็บไซต์เป็นภาษาสเปน
• ในบรรทัดที่ 6 เราเปลี่ยนข้อความที่อยู่ใต้ป้ายกำกับ ชื่อเรื่อง. เราใส่ ไซต์ Bootstrap แรกของฉัน
• ในบรรทัดที่ 12 เราเปลี่ยนเนื้อหาระหว่างแท็ก h1 โดย นี่คือเว็บไซต์ที่สร้างด้วย Bootstrap

ต่อไป เราจะทำการปรับเปลี่ยนที่สำคัญบางอย่าง การปรับเปลี่ยนเหล่านี้เกี่ยวข้องกับ:

1. ผู้พัฒนาปลั๊กอินไม่สามารถติดตามเวอร์ชัน Bootstrap ได้และมีเวอร์ชันปัจจุบันมากกว่านี้
2. มีตัวเลือกมากมายสำหรับส่วนประกอบ bootstrap และฉันสนใจอีกตัวเลือกหนึ่ง
3. ตามเอกสารอย่างเป็นทางการ การเรียกไปยังไลบรารี Javascript ต้องอยู่ภายในแท็ก body

ตัวอย่างเช่น 2 เราแก้ไขเนื้อหาของบรรทัดที่ 7 ลบบรรทัดที่ 8 และ 9 และอัปโหลดเนื้อหาที่เหลือเพื่อรักษาความเข้ากันได้ของการกำหนดหมายเลข จากนั้นเราคลิกที่ท้ายบรรทัดที่ 10 เพื่อสร้างบรรทัดใหม่ 11 และใส่ลิงก์ไปยังไลบรารี Javascript

ไม่ต้องกังวลหากคุณไม่เข้าใจรหัส ฉันจะอธิบายการทำงานของแต่ละบรรทัดในบทความถัดไป