โฮมเพจ » ออกแบบเว็บไซต์ » การปรับแต่ง Bootstrap Layouts Trends, Tools & Frameworks

    การปรับแต่ง 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 และดูว่ามีอะไรอีกบ้างที่คุณสามารถหาได้.