logo TTVONE.COM

[วิดีโอสอน] การเริ่มต้น Bootstrap – การใช้งาน git system เบื้องต้น

poster
boostrap icon

การเริ่มต้น 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">

        <!-- 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>


        <style>
            .row > div{
                border: solid 1px #000;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col-xs-6">columns</div>
                <div class="col-sm-3 col-xs-6">columns</div>
                <div class="col-sm-3">columns</div>
                <div class="col-sm-3">columns</div>
            </div>
        </div>
    </body>
</html>

สอนระดับพื้นฐานนะครับ สามารถไปเรียนรู้เพิ่มเติมได้จาก :

http://getbootstrap.com/css/#grid

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

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


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