Bootstrap - มันคืออะไร? Twitter Bootstrap - การออกแบบและพัฒนาเว็บไซต์

สารบัญ:

Bootstrap - มันคืออะไร? Twitter Bootstrap - การออกแบบและพัฒนาเว็บไซต์
Bootstrap - มันคืออะไร? Twitter Bootstrap - การออกแบบและพัฒนาเว็บไซต์
Anonim

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

bootstrap มันคืออะไร
bootstrap มันคืออะไร

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

Bootstrap - มันคืออะไร?

ดังนั้น รายละเอียดของสินค้าควรเริ่มต้นด้วยลักษณะทั่วไป ดังนั้นเราจึงทราบว่า Bootstrap เป็นแพลตฟอร์มที่แสดงใน setเทมเพลตดั้งเดิมสำหรับไซต์ แต่ละรายการมีกราฟิก CSS และ HTML แน่นอน

ทวิตเตอร์ bootstrap
ทวิตเตอร์ bootstrap

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

เริ่มสร้างเว็บไซต์ได้อย่างไร

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

เมนูบูตสแตรป
เมนูบูตสแตรป

ปรับแต่งธีม

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

ที่เราสนใจคือไฟล์ CSS ที่มีชื่อธีม (อยู่ในโฟลเดอร์ "css" นอกจากนี้ คุณจะพบไฟล์การตั้งค่าพื้นฐานของแพลตฟอร์มอีก 2 ไฟล์คือคุณ ปล่อยทิ้งไว้ตามลำพัง); เช่นเดียวกับ "index.html" ซึ่งเป็นมาร์กอัปของหน้าหลัก คุณควรเริ่มต้นจากสิ่งนี้ และส่วนเพิ่มเติมอื่นๆ ในรูปแบบของตัวเลื่อน เอฟเฟกต์ Javascript บางอย่างจะถูกกำหนดโดยงานของคุณเพื่อสร้างไซต์เฉพาะ ตัวอย่างเช่น ในเทมเพลต Bootstrap มาตรฐาน เมนูอาจได้รับการออกแบบด้วยสีเทาหม่น สำหรับเว็บไซต์ของคุณ แน่นอน คุณจะเปลี่ยนมันเพื่อให้มันเสร็จในสีที่ถูกต้องและด้วยเอฟเฟกต์ที่ต้องการทั้งหมด นี่คือการปรับแต่งเอง แต่เนื่องจากมี Bootstrap คุณไม่จำเป็นต้องสร้างเมนูตั้งแต่เริ่มต้น ซึ่งช่วยประหยัดเวลา

bootstrap css
bootstrap css

โอกาสสำหรับนักออกแบบ

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

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

นอกจากนั้น ข้อดีอีกอย่างของ Bootstrap นั้นไม่ได้ถูกบันทึกไว้ - มันเป็นวิธีที่จะช่วยให้ผู้ที่ไม่มีทักษะมาร์กอัป CSS ระดับสูงสร้างการออกแบบระดับมืออาชีพของตนเองได้ เพราะเครื่องมือทั้งหมดที่นักออกแบบเลย์เอาต์อาจใช้ ความต้องการมีอยู่แล้วในเทมเพลตที่เป็นปัญหา บุคคลที่รู้เกี่ยวกับการสร้างเว็บไซต์มีความสามารถมากขึ้น และนี่เป็นข้อดีที่สำคัญมากสำหรับ Bootstrap

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

แนะนำ: