ฺฺBootstrap คือเครื่องมือที่ช่วยในการสร้างเว็บไซต์ได้อย่างรวดเร็วและทำให้[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2443-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%881-%E0%B9%82%E0%B8%84%E0%B8%A3%E0%B8%87%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2-html-%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2.html]เว็บไซ[/url]ต์มีความสวยงามมากขึ้น ซึ่ง [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css/4884-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%96%E0%B8%9A%E0%B9%80%E0%B8%A1%E0%B8%99%E0%B8%B9%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%81%E0%B8%96%E0%B8%9A%E0%B9%80%E0%B8%A1%E0%B8%99%E0%B8%B9%E0%B8%A2%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B9%83%E0%B8%99-bootstrap-%E0%B8%9A%E0%B8%B9%E0%B8%98%E0%B8%AA%E0%B9%81%E0%B8%97%E0%B8%A3%E0%B9%87%E0%B8%9B.html]Bootstrap[/url] มีให้ดาวน์โหลดฟรีมากมายเราสามารถนำโค้ดไปใช้งานเพื่อตกแต่งเว็บไซต์ได้ฟรี ในบทความนี้จะเป็นการสอนวิธีนำ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3963-bootstrap.html]Bootstrap 2.3.2[/url] เครื่องมือ Modals ที่ใช้แสดงกล่องข้อความขึ้นในหน้าเว็บเมื่อคลิกที่ปุ่ม
[attachment=11]180822191210-28xs.jpg[/attachment]
[attachment=10]180822191242-qd07.jpg[/attachment]
[b]วิธีนำมาใช้งาน[/b]
[b]1.นำโค้ดไปใส่ภายใน <body> </body>[/b]
[code] <a href="#myModal" role="button" class="btn" data-toggle="modal">Click</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">MindPHP</h3>
</div>
<div class="modal-body">
<p>Hello</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>[/code]
[b]2.เปลี่ยนชื่อปุ่มที่ใช้คลิกก่อนแสดงกล่องข้อความ[/b]
[attachment=9]180822191338-v854.jpg[/attachment]
[attachment=8]180822191359-6G10.jpg[/attachment]
[b]3.เปลี่ยนชื่อส่วนหัวของกล่องข้อความ[/b]
[attachment=7]180822191427-wL86.jpg[/attachment]
[attachment=6]180822191447-mUS2.jpg[/attachment]
[b]4.เปลี่ยนข้อมูลที่ต้องการให้แสดงในกล่องข้อความ[/b]
[attachment=5]180822191514-T59M.jpg[/attachment]
[attachment=4]180822191535-OIO8.jpg[/attachment]
[b]6.เปลี่ยนชื่อปุ่มในกล่องข้อความ[/b]
[attachment=3]180822191605-934x.jpg[/attachment]
[attachment=2]180822191634-9C3t.jpg[/attachment]
[attachment=1]180822191701-N7cx.jpg[/attachment]
[attachment=0]180822191722-W43h.jpg[/attachment]