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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: พื้นฐาน Bootstrap เบื้องต้น

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

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

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

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

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

โค้ด: เลือกทั้งหมด

<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 คอลัมล์

โค้ด: เลือกทั้งหมด

<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 ทำหน้าเว็บ รองรับมือถือ

ข้างบน