ลูกเล่นของ boostrap

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

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

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

ลูกเล่นของ boostrap

โพสต์ที่ยังไม่ได้อ่าน โดย tai14 »

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

Bootstrap Collapse

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

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

<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) Viewed 1114 times

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

<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) Viewed 1114 times

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

<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) Viewed 1114 times

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

<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
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 78