พื้นฐาน Bootstrap เบื้องต้น

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

Post Reply
จันนุสรณ์ ดีแก่
PHP VIP Members
PHP VIP Members
Posts: 1478
Joined: 15/11/2018 10:01 am

พื้นฐาน Bootstrap เบื้องต้น

Post by จันนุสรณ์ ดีแก่ » 23/11/2018 11:32 am

bootstrap (บูทแสป) คืออะไร
Bootstrap ในภาษาอังกฤษแปลว่าการทำให้ลงตัว สิ่งที่ทำให้ง่ายขึ้น หรือ สิ่งที่ทำด้วยตัวมันเอง bootstrap คือ framework ที่ช่วยในการพัฒนาเว็บไซต์
ประกอบด้วยกัน 3 โฟลเดอร์
1. CSS
2. lmg
3. js เป็นโฟเดอร์เก็บไฟล์ จาวาสคริป (Java Script)

ในตัวอย่างนี้จะเป็นการ สร้างปุ่มด้วย Bootstrap และ การสร้าง layouts ด้วย Bootstrap สามารถดูได้ตามด้านล่างนี้

การสร้างปุ่มด้วย Bootstrap พูดง่ายๆคือปุ่มเมนูนั้นเอง

Code: Select all

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
    </head>
    <body>
        <div class="container">
            
            <button class="btn">ยินดีต้อนรับ</button> 
        </div>
     
    <scripe src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
        
    </body>
</html>

ผลลัพธ์โปรแกรม
Screenshot (230).png
การสร้าง layouts ด้วย Bootstrap ในตัวอย่างนี้เป็นการสร้างแถวทั้งหมด 5 แถว โดยมีคอลัมล์ 1 คอลัมล์

Code: Select all

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            
        <div class="column"><!-- เป็นการสร้างคลาส ในนี่สร้าง class ชื่อ column -->

            <div class="spanl">row 1</div><!--ส่วนใน class="span1 เป็นการใส่แถวให้กับคอลัมล์ ในนี่จะมีตั้งแต่ 1-5  -->
            <div class="span1">row 2</div>
            <div class="spanl">row 3</div>
            <div class="span1">row  4</div>
            <div class="spanl">row 5</div>
        </div>
            
       </div>
        
       <scripe src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>    
    </body>
</html>

ผลลัพธ์โปรแกรม
Screenshot (233).png
ต่อไปจะเป็นการสร้างเมนูจาก Bootstrap และสร้างคลาสชื่อ nav มีให้เลือก 3 แบบ คือ
1. nav-tabs แบบ tab
2. nav-pills แบบ button
3. nav-lists แบบ list
ในตัวอย่างต่อไปนี้จะยกตัวอย่างแบบ ที่ 2. คือ nav-pills แบบ button


ผลลัพธ์
Screenshot (241).png

สามารถดูข้อมูลเพิ่มเติมได้จาก บทที่ 31 สอน PHP7 พื้นฐาน Bootstrap ทำหน้าเว็บ รองรับมือถือ

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: facebook.com [Crawler] and 31 guests