การเพิ่มสี theme ที่ boostrap 4 มีไว้ให้และยังไม่เปิดใช้งาน

บทความใหม่ ปีนี้ โดย Ninenik Narkdee
bootstrap 4 boostrap theme

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ bootstrap 4 boostrap theme



เนื้อหานี้เราจะมาทำการเปิดใช้งาน สี theme ของ boostrap 4
โดยทำการสร้าง theme จากตัวแปรชื่อค่าสีที่มีเดิมอยู่แล้วใน 
bootstrap แต่ไม่ได้เปิดใช้งาน
    การใช้งาน boostrap theming สามารถทบทวนต่อจากเนื้อหาด้านล่างนี้
    แนวทางปรับแต่ง bootstrap 4 ด้วยการใช้งาน theming อย่างง่าย http://niik.in/875 
 
ให้เตรียมความพร้อมสำหรับการสร้าง 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 เหล่านี้เป็นต้น




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ