เนื้อหานี้เราจะมาทำการเปิดใช้งาน สี theme ของ boostrap 4
โดยทำการสร้าง theme จากตัวแปรชื่อค่าสีที่มีเดิมอยู่แล้วใน
bootstrap แต่ไม่ได้เปิดใช้งาน
การใช้งาน boostrap theming สามารถทบทวนต่อจากเนื้อหาด้านล่างนี้
แนวทางปรับแต่ง bootstrap 4 ด้วยการใช้งาน theming อย่างง่าย http://niik.in/875
https://www.ninenik.com/content.php?arti_id=875 via @ninenik
ให้เตรียมความพร้อมสำหรับการสร้าง theme เพิ่ม ตามบทความจากลิ้งค์ด้านบน
หากต้องการเปลี่ยนเวอร์ชั่นของ boostrap ก็สามารถทำการ ยกเลิกเวอร์ชั่นเดิมโดยถอนการ
ติดตั้งผ่าน คำสั่ง
npm uninstall bootstrap
และติดตั้งเข้าไปใหม่ ใช้เป็นเวอร์ชั่นล่าสุด ณ ขณะนั้นด้วยคำสั่ง
npm install bootstrap
หรือถ้าต้องการเวอร์ชั่นเฉพาะ ก็ระบุเวอร์ชั่นต่อท้ายไป เช่น
npm install bootstrap@4.5.0
การใช้งาน Default Theme
ไฟล์ index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" >
<!-- <link rel="stylesheet" href="css/custom.css"> -->
</head>
<body>
<div id="default-theme" class="container py-5">
</div>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
// ชื่อ theme สีที่มีอยู่แล้ว ในบางค่า จะไม่มีในบาง component เช่น white greay gray-dark จะ
// ไม่มีใน button แต่เราจะไม่สร้างเพิ่ม
var bootstrapColor = ['primary','secondary','success','info','warning','danger',
'light','dark','white','gray','gray-dark'];
bootstrapColor.forEach((theme)=>{
var btnTheme = "btn btn-"+theme;
var button = $("<button>",{
class:btnTheme,
text:theme
});
$("#default-theme").append(button);
});
});
</script>
</body>
</html>
โค้ดข้างต้น เป็นการทดสอบการใช้งาน boostrap ผ่าน cdn เป็นเวอร์ชั่น 4.5.0 โดยเรากำหดนดตัวแปร array เป้นชื่อ theme
ที่มีอยู่แล้ว แล้วให้ทำการวนลูป สร้างปุ่ม ตามชื่อ theme นั้นๆ แล้วแสดงผล ผลลัพธ์ที่ได้ จะเป็นดังรูปด้านล่าง
เมื่อเราทำการ inspect code แล้วคลิกไปที่ root หรือ html tags จะสังเกตเห็นค่าตัวแปร ในส่วนของ :root และด้านล่างเป็น
ตัวแปรและค่าสีเพิ่มเติม ที่เราจะใช้ในการสร้าง theme
การสร้าง theme เพิ่ม ก็เท่ากับเป็นการเพิ่ม style เข้ามา ขนาดของไฟล์ css ก็จะเพิ่มขึ้นมาด้วย อย่างไรก็ตามเราสามารถบีบอัด
โดยเรียกใช้แบบ minify ได้ ทั้งนี้ที่เราสร้าง theme เพิ่ม ก็เพื่อให้ boostrap ของเรารองรับการกำหนด รุปแบบได้มากขึ้นนั่นเอง
การเพิ่ม theme จากค่าสีของ boostrap variable
ต่อไปเราจะทำการเพิ่ม theme โดยใช้ตัวแปร ค่าสีของ boostrap
ให้เราเปิดไฟล์ custom.scss ในโฟลเดอร์ scss ตามรูป
ลบโค้ดเก่าทั้งหมดถ้ามี แล้วเพิ่มโค้ด scss ใหม่เข้าไปเป็นดังนี้
ไฟล์ custom.scss
// 3 ส่วนนี้จำเป็นต้องมี @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; /* กำหนด thme color */ $theme-colors: ( "blue":$blue, "indigo":$indigo, "purple":$purple, "pink":$pink, "red":$red, "orange":$orange, "yellow":$yellow, "green":$green, "teal":$teal, "cyan":$cyan ); @import "../node_modules/bootstrap/scss/bootstrap";
ตัวแปรใน css จะเป็นแบบ --ชื่อตัวแปร แต่สำหรับใน scss จะใช้เป็น $ตัวแปร ซึ่งชื่อตัวแปรข้างต้น
อย่าง $blue ,$indigo นั้น อยู่ในไฟล์ _variables.scss ที่เรา import เข้ามา
เมื่อกำหนดชื่อ theme (ใช้ชื่อเดียวกับตัวแปร) และค่าสีจากตัวแปรเรียบร้อยแล้ว
ให้เราทำการ สร้าง css ไฟล์ โดยจะแปลงเป้นแบบ minify หรือแบบบีดอัดไปเลย ตามคำสั่งดังนี้
sass scss/custom.scss css/custom.min.css -s compressed
จากนั้นทำการเรียกใช้งาน css ไฟล์ที่เราทำการ compile แทนไฟล์จาก cdn และทดสอบแสดงผลตามรูปแบบ
โค้ดตัวอย่างดังนี้
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" > -->
<link rel="stylesheet" href="css/custom.min.css">
</head>
<body>
<div id="default-theme" class="container py-5">
</div>
<div id="more-theme" class="container py-5">
</div>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
// ชื่อ theme สีที่มีอยู่แล้ว ในบางค่า จะไม่มีในบาง component เช่น white greay gray-dark จะ
// ไม่มีใน button แต่เราจะไม่สร้างเพิ่ม
var bootstrapColor = ['primary','secondary','success','info','warning','danger',
'light','dark','white','gray','gray-dark'];
bootstrapColor.forEach((theme)=>{
var btnTheme = "btn btn-"+theme;
var button = $("<button>",{
class:btnTheme,
text:theme
});
$("#default-theme").append(button);
});
var moreColor = ['blue','indigo','purple','pink','red',
'orange','yellow','green','teal','cyan'];
moreColor.forEach((theme)=>{
var btnTheme = "btn btn-"+theme;
var button = $("<button>",{
class:btnTheme,
text:theme
});
$("#more-theme").append(button);
});
});
</script>
</body>
</html>
ผลลัพธ์ที่ได้ จะเป็นดังนี้
จะเห็นว่าเรามี theme สีสวยเพิ่มเข้ามา และสามารถนำไปใช้ในโปรเจ็คงานของเรา ทำให้กำหนดได้หลากหลายมากกว่าเดิม
ค่าเหล่านี้ ไม่ใช่ว่าใช้ได้เฉพาะใน button ตามตัวอย่างข้างต้น แต่สามารถใช้กับส่วนอื่นๆ เช่น text background และส่วนอื่นๆ
ตามรูปแบบการเรียกมช้งาน เช่น alert-pink text-pink bg-yellow text-red เหล่านี้เป็นต้น
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง