ลูกเล่นของ boostrap

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

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

tai14
PHP Super Member
PHP Super Member
โพสต์: 309
ลงทะเบียนเมื่อ: 06/08/2018 10:25 am

ลูกเล่นของ boostrap

โพสต์โดย tai14 » 07/08/2018 5:23 pm

วิธีนำ boostrap มาใช้ในการตกแต่งเว็บไซต์
-copy โค้ดที่อยู่ภายใน <head> </head> มาใส่ในโปรแกรม Dreamweaver
-copy โค้ดที่อยู่ภายใน <body> </body> มาใส่ในโปรแกรม Dreamweave
-ทดลองรัน

Bootstrap Collapse

เป็นลูกเล่นการซ่อนข้อความ ข้อความจะปรากฎเมื่อคลิกที่ปุ่ม
180807161518-922O.jpg
180807161518-922O.jpg (22.38 KiB) เปิดดู 111 ครั้ง


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

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">click me</button>
  <div id="demo" class="collapse">
   สวัสดี
  </div>
</div>

</body>
</html>


ผลลัพธ์
c1.jpg

เมื่อคลิก
c2.jpg



Bootstrap Modal Plugin
หน้าต่าง popup จะปรากฎขึ้นเมื่อคลิกที่ปุ่ม
180807164419-m274.jpg
180807164419-m274.jpg (24.94 KiB) เปิดดู 111 ครั้ง


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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">LogIn</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
   
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>ยินดีต้อนรับเข้าสู่เว็บไซต์ค่ะ</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
     
    </div>
  </div>
 
</div>

</body>


ผลลัพธ์
Screenshot_15.jpg

เมื่อคลิก
Screenshot_16.jpg



Bootstrap Popover Plugin
เมื่อคลิกจะมีเครื่องมือโชว์ข้อมูลขึ้นมา สามารถนำไปใช้เมื่อต้องการใส่คำแนะนำได้
180807170048-7RGU.jpg
180807170048-7RGU.jpg (26.33 KiB) เปิดดู 111 ครั้ง


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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

</body>


ผลลัพธ์
Screenshot_18.jpg

เมื่อคลิก
Screenshot_19.jpg



Bootstrap Tooltip Plugin
เมื่อเลื่อนเมาส์ไปชี้ จะมี popup ขนาดเล็กปรากฎขึ้น
180807171632-S536.jpg
180807171632-S536.jpg (25.37 KiB) เปิดดู 111 ครั้ง


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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Tooltip Example</h3>
  <p>The data-placement attribute specifies the tooltip position.</p>
  <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>


ผลลัพธ์
Screenshot_21.jpg

เมื่อคลิก
Screenshot_22.jpg

Screenshot_23.jpg

Screenshot_24.jpg

Screenshot_25.jpg

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน