เร่งความเร็วการพัฒนาแอพพลิเคชั่นด้วย Bootstrap

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

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

โดยส่วนตัวแล้วฉันได้ทำงานกับกรอบนี้ในช่วง 4 ปีที่ผ่านมากับ 90% ของโครงการของฉัน ในบทความนี้ ฉันต้องการแบ่งปันเคล็ดลับเล็กๆ น้อยๆ ที่จะช่วยให้คุณพัฒนาแอปพลิเคชันได้เร็วขึ้น โดยไม่พลาดความสามารถที่ยอดเยี่ยมของ Bootstrap

ทำความเข้าใจ Bootstrap

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

อุทิศเวลาหนึ่งชั่วโมงเพื่ออ่านเอกสารบนไซต์ของ Bootstrap หรือเรียนรู้เพิ่มเติมจากโพสต์ที่ยอดเยี่ยมในบล็อกของ Toptal Bootstrap คืออะไร บทแนะนำสั้น ๆ เกี่ยวกับอะไร ทำไม และอย่างไร และบทความดีๆ เกี่ยวกับ Bootstrap 3 Tips and Tricks ที่คุณอาจไม่รู้บน scotch.io

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

เจาะลึกโครงสร้างของเพจและเรียนรู้วิธีสร้างเลย์เอาต์

 <div class="container"> <div class="row"> ... </div> </div>

… ปรับขนาดหน้าต่างเบราว์เซอร์ของคุณหรือใช้ Viewport Resizer ของ Chrome เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับยูทิลิตี้การสืบค้นสื่อ

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… และวิธีการใช้และเมื่อใด ทำความคุ้นเคยกับคลาสของคอลัมน์เพื่อผลลัพธ์การออกแบบที่ตอบสนองได้ดีที่สุด

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

ดูที่ W3Schools ที่คุณจะได้พบกับการอ้างอิง Bootstrap ที่สมบูรณ์ของคลาส CSS ส่วนประกอบและปลั๊กอิน JavaScript ทั้งหมด - ทั้งหมดนี้มีตัวอย่าง "ลองใช้เอง":

• ระบบกริดของ Bootstrap อธิบาย: กริดใน Bootstrap
• คลาส CSS พื้นฐาน: การพิมพ์, ปุ่ม, ฟอร์มและองค์ประกอบของฟอร์ม, คลาสตัวช่วย, รูปภาพ, ตาราง
• ส่วนประกอบแต่ละอย่าง: glyphicons, drop-downs, navs

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

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

7 ข้อผิดพลาดในการจัดแต่งทรงผมที่พบบ่อยที่สุด

1. เมื่อจัดกึ่งกลางข้อความหรือ divs

หากคุณต้องการจัด div และ/หรือเนื้อหาให้อยู่ตรงกลาง คุณสามารถใช้หนึ่งในคลาสเหล่านี้:

ใช้ ศูนย์ข้อความ

 <p class="text-center">I am centered text</p>

…หรือ เซ็นเตอร์บล็อค

 <div class="center-block">I am centered text</div>

ไม่ใช่ .center หรือ <center>

2. เมื่อเปลี่ยนขนาดตัวอักษร

หากคุณต้องการฟอนต์ที่เล็กกว่าหรือใหญ่กว่า คุณสามารถใช้หนึ่งในคลาสเหล่านี้:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

ในกรณีที่คุณต้องการส่วนหัวที่ใหญ่ขึ้นหรือเล็กลง อย่าลืม . h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small ใช้มันเช่นนี้:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. เมื่อล้างทุ่นลอยหรือบังคับองค์ประกอบให้ล้างลูกของมันเอง

ไม่จำเป็นต้องสร้างคลาสเช่น .clear คุณสามารถใช้ . clearfix ของ Bootstrap แทนได้เสมอ

 <div class="clearfix">...</div>

4. เมื่อฆ่า .row class margins

เพียงใช้ .clearfix แทนการกำหนดสไตล์ของคุณเอง (หรือแย่กว่านั้นคือใช้สไตล์อินไลน์):

 <div class="clearfix">...</div>

5. เมื่อ unstyling หรือ inlining รายการ unordered และองค์ประกอบอื่น ๆ

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

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

ในทำนองเดียวกัน สำหรับช่องทำเครื่องหมายหรือปุ่มตัวเลือก เรามี .checkbox-inline และ .radio- inline

และคุณสามารถเพิ่ม .form-inline ให้กับแบบฟอร์มของคุณได้เสมอ (ซึ่งไม่จำเป็นต้องเป็น <form> ) สำหรับการควบคุมแบบชิดซ้ายและแบบอินไลน์บล็อก

6. เมื่อปรับขนาดปุ่ม

แฟนซีปุ่มขนาดใหญ่หรือเล็ก? เพิ่ม .btn-lg , .btn-sm หรือ .btn-xs สำหรับขนาดเพิ่มเติม

7. เมื่อลอยและจัดตำแหน่งรายการไปทางขวาหรือซ้าย

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

ใช้ .pull-right , .pull-left , .text- right , .text- left แทน .right , .left , .left -float , .right-float

 <div class="pull-left">...</div> <div class="pull-right">...</div>

ปรับข้อความใหม่เป็นส่วนประกอบได้อย่างง่ายดายด้วยคลาสการจัดตำแหน่งข้อความ

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

อย่าปรับแต่งไฟล์หลักของ Framework โดยตรง

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

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

อย่างไรก็ตาม หากคุณกำลังเริ่มต้นหรือทำงานบนไซต์ขนาดใหญ่ที่มีนักพัฒนาหลายคนขึ้นไป ทางที่ดีควรแยกสิ่งต่าง ๆ และจัดระเบียบอย่างดี ย้ายไฟล์เฟรมเวิร์กนอกโฟลเดอร์ CSS หลักที่กำหนดเองและเก็บไว้ในโฟลเดอร์ที่ไม่ใช่เวอร์ชันที่ไม่มีการแก้ไข และลบ CSS ที่ไม่ได้ใช้ออกโดยใช้ปลั๊กอิน Grunt หรือ Gulp grunt-uncss หรือ gulp-uncss อีกทางเลือกหนึ่งที่จะเก็บไว้ต่างหากคือให้บริการผ่าน CDN การแยกโค้ดของเฟรมเวิร์กและไม่ถูกแตะต้องทำให้คุณมีตัวเลือกที่ดีขึ้นและเร็วขึ้นเมื่ออัปเกรดเป็นเวอร์ชันล่าสุด นอกจากนี้ยังช่วยลดปัญหาการปรับขนาดและสไตล์ให้เหลือน้อยที่สุด หรือช้าลงเมื่อทำการเพิ่มด้วยการเปลี่ยนแปลง UI อย่างต่อเนื่องอย่างรวดเร็ว

ใช้เครื่องมือนั่งร้าน เช่น Yeoman หรือ Slush และตัวจัดการแพ็คเกจ เช่น Bower, Python's pip, Node's NPM หรือ Ruby Gems เนื่องจากพวกเขากำลังทำมากกว่าการเพิ่มไฟล์ในเส้นทางของแอปพลิเคชันของคุณ ฉันซาบซึ้งในพลังของ Bower จริงๆ มันสามารถทำอะไรได้มากกว่าแค่ดาวน์โหลดไฟล์เพียงไฟล์เดียวหรือสองไฟล์ การใช้ตัวจัดการแพ็คเกจเป็นความคิดที่ดี เนื่องจากมีแนวโน้มสูงว่าความซับซ้อนของโปรเจ็กต์ของคุณจะเพิ่มขึ้น รวมถึงจำนวนปลั๊กอินของบุคคลที่สาม และวิธีที่คุณดูแลปลั๊กอินเหล่านั้นจะกลายเป็นเรื่องบ้าๆ บอ ๆ และใช้เวลานาน Bower จะช่วยคุณติดตามแต่ละปลั๊กอินและการอ้างอิงรวมถึงสิ่งที่เกี่ยวข้องกับ Bootstrap

ใช้ทรัพยากร Bootstrap ที่มีอยู่สำหรับการพัฒนาแอปพลิเคชัน

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

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

ด้านล่างนี้ คุณจะพบรายการทรัพยากรที่มีประโยชน์เพื่อเริ่มต้นใช้งาน:

เทมเพลต ธีม และปลั๊กอิน

ธีมอย่างเป็นทางการจากผู้สร้าง Bootstrap: themes.getbootstrap.com

Marketplaces ที่มีธีมและเทมเพลต Bootstrap ระดับพรีเมียม: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap

ธีมและเทมเพลต Bootstrap ฟรี: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates

“รายการ Big Badass” - รายการทรัพยากร Bootstrap ที่มีประโยชน์ 319 รายการ: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI เขียนด้วย AngularJS ล้วนๆ โดยทีม AngularUI

ReactJS

React-Bootstrap เป็นไลบรารีของส่วนประกอบส่วนหน้าที่ใช้ซ้ำได้ คุณจะได้รับรูปลักษณ์ของ Twitter Bootstrap แต่ด้วยโค้ดที่สะอาดกว่ามาก ผ่านเฟรมเวิร์ก React.js ของ Facebook

จังโก้

การรวม Bootstrap 3 กับ Django: https://github.com/dyve/django-bootstrap3

เจคิล

Jekyll-Bootstrap เป็นโครงบล็อกเต็มรูปแบบสำหรับบล็อกที่ใช้ Jekyll

WordPress

ธีมเริ่มต้นของ WordPress Sage พร้อมเวิร์กโฟลว์การพัฒนาส่วนหน้าที่ทันสมัย อิงตาม HTML5 Boilerplate, อึก, Bower และ Bootstrap

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

การออกแบบวัสดุสำหรับ Bootstrap เป็นธีมสำหรับ Bootstrap 3 ซึ่งช่วยให้คุณใช้ Google Material Design ใหม่ในเฟรมเวิร์กส่วนหน้าสุดโปรดของคุณได้

บทสรุป

Bootstrap เป็นหนึ่งในเฟรมเวิร์กที่ดีที่สุดที่มีเครื่องมือและทรัพยากรที่ยอดเยี่ยมมากมายเพื่อเร่งความเร็วและเร่งกระบวนการพัฒนาแอปพลิเคชันของคุณ

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