บริการทุกระดับครับผม
เปิดต้อนรับลูกค้าทุกวันจ้า....!
นังพักก่อนค่ะ....!
การสร้างเว็บไซต์ให้รองรับทุกขนาดหน้าจอ หรือที่เรียกว่า Responsive Website
<![CDATA[
หลังจากเราจัดวางรูปแบบ ขนาด คอลัมน์ ด้วย Bootstrap Framework
เรียบร้อยแล้ว เรามีโค้ดสำหรับวางวัตถุต่างลงในหน้าเว็บเพ็จในรูปแบบ
Responsive เพื่อให้รองรับกับขนาดหน้าจอหลายๆ ขนาด
ไมว่าจะเป็นหน้าจอคอมพิวเตอร์ แท็บเล็ต หรือมือถือขนาดต่างๆ ได้
โดยใช้โค้ดพิเศษกำกับดังตัวอย่าง
การวาง Nav Bar ให้ใส่โค้ดดังนี้
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<a href="http://ddbaba.orgfree.com"
class="btn btn-outline-danger" target="_blank">Home</a>
<a href="https://www.facebook.com"
class="btn btn-outline-primary" target="_blank">Facebook</a>
<a href="https://twitter.com/ManatK5?lang=th"
class="btn btn-outline-info" target="_blank">Twitter</a>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger
dropdown-toggle"
data-bs-toggle="dropdown">Code</button>
<div class="dropdown-menu">
<a class="dropdown-item"
href="https://www.w3schools.com/default.asp"
target="_blank">Coding Tutorial</a>
<a class="dropdown-item"
href="https://www.w3schools.com/html/default.asp"
target="_blank">HTML</a>
<a class="dropdown-item"
href="https://www.w3schools.com/css/default.asp"
target="_blank">CSS</a>
<a class="dropdown-item"
href="https://www.w3schools.com/js/default.asp"
target="_blank">Java Script</a>
<a class="dropdown-item"
href="https://www.w3schools.com/php/default.asp"
target="_blank">PHP</a>
<a class="dropdown-item"
href="https://www.w3schools.com/sql/default.asp"
target="_blank">SQL</a>
</div></div>
</ul>
</div>
</div>
</nav>
การวางรูปภาพให้ระบุเป็น class="img-fluid" ดังเช่น
<img class="img-fluid" src="image_111.jpg">
การวาง iframe ให้ใส่โค้ดดังนี้
<div style="padding-bottom:56.25%;
position:relative; display:block; width: 100%">
<iframe width="100%" height="100%"
src="https://www.youtube.com/embed/5kUeK0Uobvs?si
=-BJzrb43TAF4-fMU"
frameborder="0" allowfullscreen=""
style="position:absolute; top:0; left: 0">
</iframe>
</div>
]]>
