logo TTVONE.COM

[วิดีโอสอน] การเริ่มต้น Bootstrap การติดตั้งผ่าน CDN

poster
boostrap icon

การเริ่มต้น 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 -->
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>
    <body>
        <!-- Standard button -->
        <button type="button" class="btn btn-default">Default</button>

        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">Primary</button>

        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">Success</button>

        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">Info</button>

        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">Warning</button>

        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">Danger</button>

        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">Link</button>
    </body>
</html>

ถ้ามีข้อสงสัยสอบถามได้ที่ : https://www.facebook.com/ttvone

Tags : [CSS Programming]
  • ทุกคนมองเห็น
  • 0 ความเห็น
  • 376 คนเข้าดู

ความเห็นต่อโพส (ล่าสุด)


แสดงความเห็นต่อโพส