การปรับแต่ง Bootstrap Layouts Trends, Tools & Frameworks

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

ในบทความนี้ฉันต้องการแบ่งปันบางสิ่งเหล่านี้ ทรัพยากรและแนวปฏิบัติที่ดีที่สุด สำหรับนักพัฒนาที่ต้องการไปต่อด้วย Bootstrap.

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

Restyling ด้วย Bootstrap

ไลบรารี Bootstrap เริ่มต้นมาพร้อมกับมัน การออกแบบที่เป็นเอกลักษณ์ของตัวเอง ที่ดูน่าอัศจรรย์ เป็นที่รู้จักอย่างกว้างขวางทั่วทั้งเว็บและคุณสามารถบอกได้อย่างง่ายดายว่าเมื่อใด ใช้องค์ประกอบ Bootstrap แบบดั้งเดิม.

แต่คุณยังสามารถ restyle องค์ประกอบเหล่านี้ด้วยตัวคุณเอง เพื่อใช้รหัสของ Bootstrap เป็นพื้นฐานสำหรับการจัดวางของคุณ.

มี วิธีที่ต่างกันเล็กน้อย คุณสามารถทำสิ่งนี้:

• เพิ่มสไตล์ชีทของคุณเองเพื่อเขียนทับค่าเริ่มต้น.
• ปรับแต่งเอาต์พุตของ BootStrap ดังนั้นคุณจะได้รับองค์ประกอบที่คุณต้องการเท่านั้น.
• รวมกับส่วนเสริมและปลั๊กอิน / ธีม.

ตัวเลือกสุดท้ายนั้นเป็นสิ่งที่พบได้บ่อยที่สุดและเป็นหนึ่งในเหตุผลที่ Bootstrap เติบโตขึ้นอย่างรวดเร็ว.

ได้รับฉันยังเป็นแฟนตัวยงของพวกเขา ปรับแต่งเครื่องมือ เพราะมันฟรีทั้งหมดและให้คุณควบคุมได้มากมาย คุณสมบัติที่คุณต้องการใช้.

มีทรัพยากรมากมายสำหรับ BootStrap 3/4 ที่สร้างโดยนักพัฒนาบุคคลที่สามดังนั้นจึงง่ายกว่าที่เคย สร้างเค้าโครง BootStrap ของคุณเอง โดยไม่ต้องเขียนโค้ดมาก.

ปลั๊กอินและส่วนเสริม

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

นี่คือรายการโปรดของฉันทั้งหมด สนับสนุน Bootstrap โดยกำเนิด. มากมายของพวกเขา ทำงานกับ jQuery, ดังนั้นจึงเป็นเรื่องง่ายที่จะปรับแต่งถ้าคุณรู้วิธีการของคุณในห้องสมุด jQuery.

เครื่องมือตรวจสอบแบบฟอร์ม

ครั้งแรกที่ฉันชอบคือ ปลั๊กอินการตรวจสอบแบบฟอร์ม, เครื่องมือตรวจสอบแบบฟอร์ม. มันรันบน jQuery และสนับสนุนกองเฟรมเวิร์กส่วนหน้าทั้งหมด: Bootstrap, Foundation, Pure, UIKit และอื่น ๆ.

คุณสามารถ ต่อท้ายด้วยตัวตรวจสอบจำนวน 51 ตัวด้วยตนเอง ไปยังแบบฟอร์มใด ๆ ในเว็บไซต์ของคุณ ซึ่งหมายความว่าผู้เข้าชมจะต้องปฏิบัติตามข้อกำหนดการตรวจสอบความถูกต้องก่อนจึงจะสามารถส่งเนื้อหาได้.

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

ตัวเลือกวันที่และเวลา

ตัวเลือกวันที่ นอกจากนี้ยังมีความเจ็บปวดอย่างมากในการเขียนโค้ดด้วยตัวเอง หลายรูปแบบเพียงใช้เมนูแบบเลื่อนลงสำหรับการตั้งค่าวัน / เดือน / ปี แต่คุณสามารถใช้สิ่งนี้ได้ ปลั๊กอินตัวใช้เลือกวันที่ Bootstrap เพื่อช่วยตัวเองให้ยุ่งยาก.

มันเป็นโอเพ่นซอร์สอย่างสมบูรณ์และ ทำงานบน Bootstrap 3.x library. คุณจะสังเกตเห็นมันด้วย รองรับทั้งวันที่ และเวลา โดยใช้ปลั๊กอิน jQuery อื่น, Moment.js.

โดยรวมแล้วห้องสมุดนี้ยอดเยี่ยมมากที่จะใช้เครื่องมือเลือกวันที่ทำงาน มันมี การพึ่งพาอาศัยกันมาก แต่โชคดีที่คุณไม่จำเป็นต้องเขียนโค้ดมากนักเพื่อให้มันทำงานได้.

ติดดาว

นี่เป็นอีกคุณสมบัติที่ยอดเยี่ยมสำหรับ การจัดอันดับดาว บนเว็บ คุณสามารถ เพิ่มการจัดอันดับดาวหนึ่งถึงห้าต่อท้าย ที่ใดก็ได้ในไซต์ของคุณโดยใช้ไลบรารี Bootstrap สำหรับการทำงานของ JavaScript.

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

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

WATable

Bootstrap มาพร้อมกับมัน สไตล์เค้าโครงตารางของตัวเอง สำหรับการแสดงข้อมูลแบบตารางในส่วนหน้า แต่ด้วยความที่ ปลั๊กอิน WATable, คุณสามารถเพิ่มฟีเจอร์พิเศษทั้งหมดลงในตาราง Bootstrap ของคุณ.

นี่เป็นหนึ่งในปลั๊กอิน jQuery ที่มีรายละเอียดมากที่สุดและนี่เป็นเพียงคุณสมบัติบางอย่างที่คุณสามารถเพิ่ม:

• การแบ่งหน้าแบบกำหนดเอง.
• การเรียงลำดับคอลัมน์.
• การกรองข้อมูล.
• เอฟเฟ็กต์ภาพเคลื่อนไหวบนโต๊ะ.
• ทำเครื่องหมายเพื่อเลือกทั้งแถว.

WATable ถูกอธิบายว่าเป็น มีดสวิสกองทัพของปลั๊กอินตาราง และฉันต้องเห็นด้วยกับคำอธิบายนี้ ความจริงที่ว่ามันรองรับ Bootstrap เป็นเพียงไอซิ่งบนเค้ก.

นี่คือปลั๊กอินโปรดของฉันบางส่วน แต่ก็มีปลั๊กอินอื่น ๆ อีกมากมาย คุณสามารถเรียกดูเพิ่มเติมในหน้านี้หากคุณอยากรู้.

กรอบ Bootstrap

Bootstrap เป็นเฟรมเวิร์กขนาดใหญ่เพราะช่วยให้ผู้ใช้ กำหนดสไตล์ HTML และ CSS เริ่มต้นเอง กับชั้นเรียนไม่กี่.

แต่นักพัฒนาได้ใช้ไลบรารี BootStrap เริ่มต้นและเพิ่มสไตล์ของตัวเองเพื่อสร้างเฟรมเวิร์กที่ใหญ่ขึ้น ทำงานเหมือนธีม, ดังนั้นคุณไม่จำเป็นต้อง restyle Bootstrap ตั้งแต่เริ่มต้น.

โชคดีที่พวกเขาทั้งหมดฟรีและพวกเขาทั้งหมดทำงานในคลาส BootStrap เริ่มต้น.

Bootflat

บางทีเฟรมเวิร์ก BootStrap ที่รู้จักกันดีที่สุดก็คือ Bootflat UI ที่ ตามแนวโน้มการออกแบบแบน.

มันใช้ได้กับ คุณสมบัติ Bootstrap เริ่มต้นทั้งหมด, รวมถึงส่วนประกอบ JavaScript ทั้งหมด ความแตกต่างที่สำคัญมีมากขึ้น การออกแบบและโครงสร้าง ที่อิลิเมนต์หน้าใช้โครงร่างสีแบบราบเพื่อย้ายออกจากลักษณะการไล่ระดับสีของ Bootstrap.

Bootflat ยังไม่ได้ใช้มากเกินไป เป็นอย่างมากดังนั้นคุณสามารถเพิ่มเฟรมเวิร์กนี้ในหน้า Landing Page หรือโฮมเพจใด ๆ เพื่อสร้างรูปลักษณ์ที่เป็นเอกลักษณ์สำหรับไซต์ของคุณ.

มันฟรี 100% และยังมาพร้อมกับ ตัวเลือกสี, เพื่อให้คุณสามารถค้นหาโครงร่างสีแบบแบนเพื่อให้ตรงกับเค้าโครงของคุณ.

รับอึเสร็จแล้ว

นี้ ชุดเครื่องมือทื่อ UI ที่น่าประหลาดใจ สร้างบนห้องสมุด Bootstrap 3 และวางจำหน่ายบน GitHub ฟรี.

Get Shit Done มาจากทีมที่ Creative Tim ซึ่งพวกเขาขายทรัพยากรระดับพรีเมียมเพียงไม่กี่แห่ง ชุด UI เฉพาะนี้มีรุ่นโปร แต่มันก็ไม่จำเป็นเลย.

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

การออกแบบวัสดุ Bootstrap

อีกหนึ่งเทรนด์การออกแบบยอดนิยมคือ การออกแบบวัสดุของ Google. นี่คือภาษาการออกแบบที่สร้างขึ้นสำหรับนักออกแบบแอพ Android แต่เดิมมี แพร่กระจายไปยังเว็บ และได้รับการสนับสนุนมากมายจากนักออกแบบ UI / UX.

เฟรมเวิร์กวัสดุ Bootstrap ที่เหลือเชื่อนี้ใช้คุณสมบัติการออกแบบวัสดุเพื่อ สร้างสไตล์การออกแบบที่กำหนดเอง ออกจากห้องสมุด Bootstrap.

โดยปกติแล้วมัน รองรับทุกอย่างใน BootStrap 3 และกำลังได้รับการทำใหม่เพื่อรองรับ Bootstrap 4 คุณสามารถเรียนรู้เพิ่มเติมได้จากโฮมเพจอย่างเป็นทางการซึ่งมีเอกสารและการสาธิต.

ห้องสมุดที่คล้ายกันคุณอาจลองคือ MDBootstrap, แม้ว่าฉันจะพบว่ามันยากที่จะทำงานด้วย.

Bootplus

Google สร้างภาษาการออกแบบวัสดุ แต่พวกเขาก็มีสไตล์เป็นของตัวเองสำหรับเครื่องมือและแอพพลิเคชั่นบนเว็บมากมาย.

Bootplus เลียนแบบสไตล์ของอินเทอร์เฟซ Google+, พร้อมกับเอกสารช่วยเหลือของ Google, Google Drive และแอปพลิเคชันเว็บอื่น ๆ ที่คล้ายกัน มันมีคุณสมบัติเช่นเดียวกับ Bootstrap รวมถึงกริดสไตล์เลย์เอาต์สไตล์องค์ประกอบและองค์ประกอบ JavaScript.

คุณสามารถเรียกดูการสาธิตบนเว็บไซต์เพื่อดู ความแตกต่างระหว่าง Bootplus และ Bootstrap UI ดั้งเดิม. สำหรับทรัพยากรฟรี Bootplus นั้นกว้างขวางและเหมาะสำหรับทุกคนที่ชอบเทคนิคการออกแบบของ Google.

เครื่องมือและทรัพยากร

ท้ายสุดฉันต้องการดำดิ่งลงสู่เครื่องมือฟรีมากมายสำหรับ การปรับแต่งและสร้างรูปแบบ Bootstrap.

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

โปรแกรมแก้ไขสด

ของฟรี Bootstrap โปรแกรมแก้ไขสด เป็นหนึ่งในเครื่องมือที่ดีที่สุด สำหรับนักออกแบบที่ไม่ใช่ด้านเทคนิค. หากคุณไม่ทราบวิธีการใช้รหัสคุณยังคงสามารถใช้เครื่องมือสร้าง Bootstrap นี้เพื่อสร้างเค้าโครงทั้งหมดตั้งแต่เริ่มต้น.

มัน ทำงานในเบราว์เซอร์ของคุณ และคุณยังสามารถเลือกจากแม่แบบที่สร้างไว้ล่วงหน้าเพื่อเริ่มต้นใช้งาน.

ตัวเลือกในแถบด้านข้างช่วยให้คุณ เพิ่มค่า CSS บางอย่าง ถ้าคุณรู้รหัสส่วนหน้า แต่คุณยังสามารถใช้ GUI เพื่อเปลี่ยนสีแบบอักษรขนาดและสิ่งอื่น ๆ ที่คุณต้องการ.

เมื่อเสร็จแล้ว, คลิก “รับชุดรูปแบบ” และคุณสามารถคัดลอก / วางสไตล์ CSS ที่อัปเดตไปยังโครงการของคุณเอง วิธีที่ง่ายที่สุดในการ restyle Bootstrap โดยไม่จำเป็นต้องทำการรีบูตทุกสิ่งตั้งแต่เริ่มต้น.

สร้างแบบฟอร์ม

ฟรี ตัวสร้างฟอร์ม Bootstrap คือ เครื่องมือเบราว์เซอร์แบบลากแล้ววาง ที่ช่วยให้คุณสร้างรูปแบบ Bootstrap ตั้งแต่เริ่มต้น.

อีกครั้งมัน ต้องใช้ความรู้การเข้ารหัสเป็นศูนย์ และคุณสามารถเข้าถึงองค์ประกอบ Bootstrap 3 ทั้งหมดได้อย่างเต็มที่ เพียงเลือกองค์ประกอบที่คุณต้องการและลากไปทางขวาลงในกล่องด้านซ้าย จากที่นี่คุณสามารถเปลี่ยนทุกอย่างจากข้อความตัวยึดเป็นคลาส CSS.

จนถึงตอนนี้ผู้สร้างแบบเจ๋งที่สุดที่ฉันเคยเห็นมาและฟรี 100%!

BootSwatchr

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

สิ่งที่ฉันชอบเกี่ยวกับแอพนี้คือวิธีที่มันมาพร้อมกับ แกลเลอรี่ฟรีสไตล์ที่ออกแบบไว้ล่วงหน้า.

ดังนั้นคุณสามารถดาวน์โหลดการออกแบบที่ คนอื่นทำไปแล้ว หรือคุณสามารถใช้เป็นจุดเริ่มต้นในการปรับแต่งธีมของคุณเอง.

ก้าวไปข้างหน้า

Bootstrap ได้รับความนิยมเพิ่มขึ้นเรื่อย ๆ ดังนั้นตอนนี้เป็นเวลาที่ดีที่สุด ดำน้ำในกรอบนี้. โชคดีที่มีปลั๊กอินเฟรมเวิร์กและเครื่องมือฟรีมากมายที่คุณสามารถใช้เพื่อเร่งกระบวนการ dev.

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