เป็นการใช้งาน class หนึ่งใน bootstrap นะครับ ชื่อว่า glyphicon นะครับ เป็น icon ที่ติดมากับ bootstrap เป็นวิดีโอสั้นๆง่ายๆครับ ตัวอย่างโค๊ด : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap การใช้งาน Icon class ที่ชื่อว่า Glyphicon</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> </head> <body> <button class="btn btn-success"> <i class="glyphicon glyphicon-ok"></i> สำเร็จ […]
การเริ่มต้น Bootstrap การใช้งาน git system เบื้องต้น สมัยก่อนการสร้างเว็บไซต์จะใช้ตารางเป็นตัวจัดการ layout ทำให้ไม่ยืดหยุดพอ เวลาจะแสดงข้อมูลหลากหลายหน้าจะ ซึ่งระบบ git system ของ bootstrap นี่ล่ะจะเข้ามาช่วยในเรื่องนี้ วิดีโอนี้เป็นวิดีโอสอน เบื้องต้นนะครับ เพื่อนให้เข้าใจหลักการง่ายๆของระบบ git system จะได้รู้ว่า ไม่ยากอย่างที่คิดแน่นอนครับ โค๊ดตัวอย่างนะครับ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>การเริ่มต้น Bootstrap - การใช้งาน git system เบื้องต้น</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- […]
การเริ่มต้น Bootstrap การติดตั้งผ่าน CDN จากวิดีโอสอนการติดตั้ง bootstrap คลิปที่แล้วนั้นเป็นการติดตั้งโดยการโหลดไฟล์เข้ามาในโปรเจคนะครับ แต่วิดีโอนี้จะเป็นการใช้งานผ่าน CDN เลยไม่ต้องเสียเวลาโหลด แต่จะมีข้อเสียอยู่อีกอย่างคือ ถ้าไม่มีการเชื่อมต่ออินเทอร์เน็ต จะไม่สามารถใช้งาน Bootstrap ได้นะครับ ตัวอย่างโค๊ดนะครับ : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>การเริ่มต้น Bootstrap การติดตั้งผ่าน CDN</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript […]
หัวข้อนี้เป็นหัวข้อสำหรับคนที่ไม่เคยใช้งาน CSS Bootstrap เลยนะครับ ซึ่งวิดีโอนี้เป็นการสอนการนำ ไฟล์ bootstrap เข้ามาใน project เท่านั้นครับ ยังไม่ได้ทำอะไรมาก สำหรับมือใหม่ก่อนนะครับ คุณสามารถดาวน์โหลดไฟล์ตัวอย่างได้ที่นี่ ดาวน์โหลด
