การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

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

ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap

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

จาก บทความ การสร้างตารางโดยใช้ class ของ Booststap นั้นเป็นการสร้าง table ธรรมดา โดยใช้ Booststap โดยแต่ละคอลัมน์มีขนาดเท่ากันในทุกช่อง ซึ่งในบทความนี้จะเป็นการแนะนำการสร้างคอลัมน์ที่มีขนาดไม่เท่ากันซึ่ง เราจะใช้การกำหนด width ให้กับช่องนั้นๆเลย โดยจะทำการยกตัวอย่างดังต่อไปนี้
  • ตัวอย่างที่ 1 กำหนดให้ คอลัมน์ที่ 1 กว้าง 50% และ คอลัมน์ที่ 2, 3 มีความกว้างคอลัมน์ละ 25%

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

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_trial_balance_print </TITLE>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        </HEAD>
        <body>
            <center>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%">
                <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 1</div>
                <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 2</div>
                <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 3</div>
            </div>
            </center>
        </body>
    </HTML>
    ผลลัพธ์ที่ได้
    การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap1.jpg
    การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap1.jpg (6.48 KiB) Viewed 550 times
  • ตัวอย่างที่ 2 กำหนดให้ คอลัมน์ที่ 6 กว้าง 50% และ คอลัมน์ที่ 4, 5 มีความกว้างคอลัมน์ละ 25%

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

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_trial_balance_print </TITLE>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        </HEAD>
        <body>
            <center>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%">
                <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 1</div>
                <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 2</div>
                <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 3</div>
            </div>
    <br>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%">
              <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 4</div>
              <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 5</div>
              <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 6</div>
          </div>
            </center>
        </body>
    </HTML>
    ผลลัพธ์ที่ได้
    การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap 2.jpg
    การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap 2.jpg (11.59 KiB) Viewed 550 times
  • ตัวอย่างที่ 3 กำหนดให้ คอลัมน์ที่ 8 กว้าง 50% และ คอลัมน์ที่ 7, 9 มีความกว้างคอลัมน์ละ 25%

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

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_trial_balance_print </TITLE>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        </HEAD>
        <body>
            <center>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%">
                <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 1</div>
                <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 2</div>
                <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 3</div>
            </div>
    <br>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%">
              <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 4</div>
              <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 5</div>
              <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 6</div>
          </div>
    
    <br>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%">
              <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 7</div>
              <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 8</div>
              <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 9</div>
          </div>
            </center>
        </body>
    </HTML>
    ผลลัพธ์ที่ได้
    การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap 3.jpg
    การกำหนดความกว้างของคอลัมน์ โดยใช้ Class ของ Booststap 3.jpg (16.55 KiB) Viewed 550 times
จากการเขียนในตัวโค้ดภายใต้แท้กของ HTML จะเห็นได้ว่า มีการใช้ <div class="row"> ในการกำหนด ตัวแถว ซึ่งภายใต้แท็ก จะมีการกำหนด <div>ช่องที่ 1</div> ย่อยๆ ซึ่งแม้เราจะไม่ได้ใส่ class="col" แต่การแสดงผลก็จะออกมาในรูปแบบของคอลัมน์ เพราะอยู่ภายใต้ <div class="row"> และในการกำหนดขนาดช่อง เราใช้การกำหนด ความกว้าง คือ width: 50% ซึ่งในหนึ่งแถวจะมีความกว้างเป็น 100% เมื่อเราจะทำการแบ่งขนาดช่อง เป็นกี่ช่อง หรือขนาดกว้างใหญ่เท่าใดก็ให้ นำมาหักจาก 100 เช่นในตัวอย่าง มีการแบ่ง เป็น 3 ช่อง โดยขนาดแต่ละช่องคือ 50,25,25 ซึ่งรวมกันจะได้ 100 พอดี
you're the only one treasure💎
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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