Jir4yu.me

ความรู้สึก.. ที่ตอนไหนๆก็(ไม่)เหมือนกัน

ปรับแต่ง Bootstrap ด้วย CSS

Bootstrap เพื่อนรัก – ใช้ก็ง่าย ขายก็ดี

ดยปรกติแล้ว Bootstrap นั้นถูกเขียนมาทั้ง HTML, CSS และ Javascript บางส่วน จึงทำให้ค่อนข้างจะสมบูรณ์ในตัวเองอยู่แล้ว แต่ผู้อ่านหลายๆ ท่านที่ต้องการจะตกแต่งให้เป็นแบบของตัวเองมากขึ้น หรือ อยากจะทำ layout บางส่วนให้เอาไว้ใช้สำหรับเฉพาะเจาะจงในงานแต่ละงาน ก็อาจจะต้องมีการเขียน CSS เพิ่มเล็กน้อย หรือที่เราเรียกกันว่าการ Override CSS ให้กับ Bootstrap ครับ

เขียน Override นั้นดียังไง? แล้วจำเป็นมากน้อยแค่ไหนกับการเขียน CSS เพิ่ม

จริงๆ แล้วในเว็บไซต์หลายต่อหลายเว็บของต่างประเทศยกตัวอย่างเช่น Themeforest หรือ Wrapbootstrap นั้น เราจะเห็นนักพัฒนาจำนวนหนึ่งทำ Custom CSS ให้กับ Bootstrap แล้วนำมาขายด้วย ถือเป็นทางเลือกสำหรับ Designer หรือ Developer ที่ชื่นชอบในการเขียน CSS ที่จะหารายได้จากการขาย Bootstrap Theme ซึ่งก็ไม่ได้ยากเหมือนที่ใครหลายๆ คนคิดเอาไว้ด้วยครับ

WrapBootstrap
ตัวอย่างเว็บไซต์บน WrapBootstrap ที่สร้างด้วย Bootstrap

ซึ่งราคาก็มีให้เลือกซื้อกันตั้งแต่ 3$​ (ประมาณ 100 บาท) ไปจนถึง 30$ (ประมาณ 1000 บาท) ซึ่งถ้าผู้อ่าน หรือ ใครที่กำลังมองหา template Bootstrap สวยๆ ไม่ต้องเขียน CSS เองก็สามารถเข้าไปเลือกซื้อเลือกชมกันได้ตามสะดวก หรือ กดที่ภาพเพื่อไปยังเว็บไซต์ผู้ขายได้เลยครับ

Kanda Bootstrap skin
Kanda, ธีม Bootstrap สวยๆ มาพร้อมกับคู่มือ
Kanda Bootstrap skin
คู่มือวิธีการติดตั้ง และ ใช้งานของ Kanda

ซึ่งบางตัว หากผู้อ่านเลือกซื้อจาก Digital market ชื่อดังอย่าง Codecanyon หรือ Themeforest แล้ว ผู้อ่านจะได้รับคู่มือวิธีการใช้ วิธีการติดตั้ง พร้อมทั้งการซัพพอร์ตบริการหลังการขายเป็นอย่างดีหากมีปัญหาเกี่ยวกับตัวสินค้าที่เราซื้อมา อีกอย่างคือการซื้อสินค้าตามแหล่งดังๆ เหล่านี้ เราก็จะได้สินค้าที่มีคุณภาพดีอีกด้วย (เพราะการวัดคุณภาพของสินค้าเคร่งครัดมาก) ยกตัวอย่างเช่น Kanda Bootstrap skin ที่คนไทยเป็นคนทำขึ้นไปขายด้วย

ExtraStrap 3
ExtraStrap 3 แม่แบบสำหรับ Bootstrap สวยๆ บน Themeforest

หรือแบบของฟรีมีให้ใช้ให้ดาวน์โหลดกันฟรีๆ ก็ตามไปที่นี่ได้ครับ http://bootswatch.com/

สำหรับในบทความนี้ก็จะเป็นวิธีเล็กๆ น้อยๆที่จะช่วยให้ผู้อ่านสามารถปรับแต่ง Bootstrap กันได้ด้วยการเขียน CSS ทับลงไป โดยให้เปิดแฟ้ม first_web ที่ใช้ในบทความก่อนๆ ขึ้นมา(สำหรับผู้อ่านที่เพิ่งจะเข้ามาใหม่ ลองดูบทความ ขึ้น mockup ด้วย Bootstrap กันก่อนครับ) ในที่นี้ผมต้องการจะเขียน CSS เพิ่มเติมโดยยึด CSS หลักของ Bootstrap ไว้ก่อนไม่ให้เสียหาย ผมจึงสร้างไฟล์ css ใหม่ขึ้นมาโดยใช้ชื่อว่า global.css อยู่ในแฟ้ม css/ ครับ

Sublime Text - New file
เลือก New file แล้วสร้างไฟล์เปล่าที่ชื่อว่า global.css

โอเค จากนั้นก็ลิงค์ไฟล์ที่เพิ่งสร้างขึ้นเข้าไปในโปรเจ็คหลักของเรา หรือไฟล์ index.html โดยการใส่ link tag ไว้ใต้บรรทัดที่เราเขียนเรียก css ของ Bootstrap ตามภาพด้านล่าง

override bootstrap CSS
ทำการเรียกไฟล์ global มาใต้บรรทัด CSS ของ Bootstrap

เพียงเท่านี้เราก็สามารถเขียน CSS ไปทับ CSS เดิมของ Bootstrap กันได้แล้ว ยกตัวอย่างเช่นผมต้องการจะทำให้ตัว “Jumbotron” ของเราเขยิบห่างลงมาจากด้านบนของเว็บไซต์ประมาณ 30 pixels

override bootstrap css

ก็เขียนใส่เข้าไปกันได้เลยที่ไฟล์ global.css ประมาณภาพด้านล่าง

override bootstrap css
ใช้ margin-top ช่วยสร้างระยะห่างจากขอบบน

ซึ่งถ้าหากกลับไป preview ที่ web browser ของเราก็จะเห็นว่า “jumbotron” ของเราถูกดีดลงมาจากขอบบนประมาณหนึ่งแล้ว แบบนี้จะทำให้ layout ของหน้าเว็บไซต์เราค่อนข้างดูโอเคกว่าตอนที่ยังไม่ได้เขียน CSS ทับลงไป สำหรับผู้ที่ยังไม่เข้าใจเรื่องของการเขียน CSS สามารถกลับไปอ่านบทความก่อนหน้านี้ที่ผู้เขียนเคยทำวิดีโอสอนไปแล้วได้ด้วยที่บทความ สอนเขียนเว็บ – พื้นฐาน CSS จะได้เข้าใจวิธีเรียกใช้ class กับ id ได้ง่ายขึ้น และจะทำให้เขียน CSS รวดเร็วขึ้นด้วยครับ

ผมจะยกตัวอย่างการ Override CSS ของ Bootstrap ให้เสริมความเข้าใจอีกสักกรณี อย่างเช่นต้องการเปลี่ยนสีพื้นหลังของปุ่ม, ปรับขนาดตัวหนังสือให้ใหญ่ขึ้น และ เป็นตัวหนา อีกทั้งใส่ขอบสีดำให้กับปุ่มด้วย ซึ่งก็เขียน CSS คร่าวๆ ประมาณภาพด้านล่าง

override bootstrap button
ใส่ CSS ให้กับ class ที่ชื่อว่า btn

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

Bootstrap CSS override
layout เมื่อทำการเขียน CSS เข้าไปทับ หรือ override css
Jirayu Limjinda

ถ้าไม่รู้จักกัน บางทีคุณอาจจะไม่เข้าใจกับสิ่งที่ผมทำ.. กลับกัน ถ้าคุณรู้จักผมดี คุณจะไม่ต้องเอ่ยปากถามเลยว่าทำไม

ความคิดเห็นจากบุคคลอื่นๆ

แสดงความคิดเห็นของคุณที่นี่

loading, please wait..

loading, please wait..