Q - สอบถามวิธีการทำตัวแบ่งหน้า (pagination) ให้ย่อเมื่ออยู่ในโหมดมือถือค่ะ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
pprn
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 565
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Q - สอบถามวิธีการทำตัวแบ่งหน้า (pagination) ให้ย่อเมื่ออยู่ในโหมดมือถือค่ะ

โพสต์โดย pprn » 29/10/2018 10:51 pm

สอบถามวิธีการทำตัวแบ่งหน้า (pagination) ให้ย่อเมื่ออยู่ในโหมดมือถือค่ะ ดังนี้ค่ะ

ใน Desktop จะเห็นดังนี้
pre1.jpg


ใน Mobile จะเห็นดังนี้
pre2.jpg
pre2.jpg (21.14 KiB) เปิดดู 763 ครั้ง


ตัวอย่าง code ทำได้แค่อยู่ใน Desktop เท่านั้นค่ะ แต่ย่อ ใน Mobile ไม่ได้

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

<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<center>
    <nav>
        <ul class="pagination">
            <li class="left-etc" style="display: inline;"><a href="#">«</a></li>
            <li class="page-away-14" style="display: inline;"><a href="#">1</a></li>
            <li class="page-away-13" style="display: inline;"><a href="#">2</a></li>
            <li class="page-away-12" style="display: inline;"><a href="#">3</a></li>
            <li class="page-away-11" style="display: inline;"><a href="#">4</a></li>
            <li class="page-away-10" style="display: inline;"><a href="#">5</a></li>
            <li class="page-away-9" style="display: inline;"><a href="#">6</a></li>
            <li class="page-away-8" style="display: inline;"><a href="#">7</a></li>
            <li class="page-away-7" style="display: inline;"><a href="#">8</a></li>
            <li class="page-away-6" style="display: inline;"><a href="#">9</a></li>
            <li class="page-away-5" style="display: inline;"><a href="#">10</a></li>
            <li class="page-away-4" style="display: inline;"><a href="#">11</a></li>
            <li class="active page-away-3" style="display: inline;"><a href="#">12</a></li>
            <li class="page-away-2" style="display: inline;"><a href="#">13</a></li>
            <li class="page-away-1" style="display: inline;"><a href="#">14</a></li>
            <li class="page-away-0" style="display: inline;"><span>15</span></li>
            <li class="page-away-1" style="display: inline;"><a href="#">16</a></li>
            <li class="page-away-2" style="display: inline;"><a href="#">17</a></li>
            <li class="page-away-3" style="display: inline;"><a href="#">18</a></li>
            <li class="page-away-4" style="display: inline;"><a href="#">19</a></li>
            <li class="page-away-5" style="display: inline;"><a href="#">20</a></li>
            <li class="page-away-6" style="display: inline;"><a href="#">21</a></li>
            <li class="page-away-7" style="display: inline;"><a href="#">22</a></li>
            <li class="page-away-8" style="display: inline;"><a href="#">23</a></li>
            <li class="page-away-9" style="display: inline;"><a href="#">24</a></li>
            <li class="page-away-10" style="display: inline;"><a href="#">25</a></li>
            <li class="right-etc" style="display: inline;"><a href="#">»</a></li>
        </ul>
        </nav>
</center>
</body></html>


ผลลัพธ์ของ Code ที่เขียน
pre3.jpg
pre3.jpg (38.83 KiB) เปิดดู 763 ครั้ง


ต้องเพิ่ม CSS หรือเขียน Javascript อย่างไรบ้างคะ ขอบคุณค่ะ

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

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

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

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