ایجاد جدول ریسپانسیو در بوت استرپ

اول شما باید بدونید طراحی ریسپانسیو چی هست

طراحی ریسپانسیو چیست ؟

وقتی کاربری وارد سایت شما می شود و یا هنگامی که پروژه ای را تحویل به مشتری خود می دهید شاید در نگاه اول مهم ترین نکته شکل و شمایل سایت شما باشد که می تواند چشم نواز باشد. طراحی ریسپانسیو به معنی تنظیم اندازه اجزای موجود در صفحه با هر اندازه می باشد.

اما برای اینکه بتونید یک جدول رو به صورت کاملا ریسپانسیو با بوت استرپ طراحی کنید به صورت مرحله به مرحله توضیح میدم که چه کاری رو باید انجام بدید. فرض رو بر این میذاریم که شما از قبل اسکریپتها و فایلهای css مربوط به بوت استرپ رو به پروژه خودتون اضافه کردید.

ایجاد جدول ریسپانسیو در بوت استرپ

مرحله اول :

یک فایل html ساده ایجاد کنید. دقت کنید که لینک فایلهای css و jquery مربوط به بوت استرپ به این صفحه html به درستی لینک شده باشه و کلاسهای بوت استرپی قابل شناسایی باشه.

مرحله دوم :

یک table ساده ایجاد کنید. شما می تونید با استفاده از دستورات و تگ های html یک table رو ایجاد کنید. کدهای زیر برای ایجاد یک جدول ساده در html می باشد.

<table class="table table-bordered">
            <thead>
                <tr>
                    <td>عنوان</td>
                    <td>تاریخ</td>
                    <td>کاربر ثبت کننده</td>
                    <td>عملیات</td>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>گروه اول</td>
                    <td>1398/02/04</td>
                    <td>نام کاربر</td>
                    <td>
                        <a class="btn btn-bitbucket" style="margin-bottom:3px; width:80px;">
                            <i class="glyphicon glyphicon-pencil"></i>
                            ویرایش
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>گروه دوم</td>
                    <td>1398/02/04</td>
                    <td>نام کاربر</td>
                    <td>
                        <a class="btn btn-bitbucket" style="margin-bottom:3px; width:80px;">
                            <i class="glyphicon glyphicon-pencil"></i>
                            ویرایش
                        </a>
                    </td>
                </tr>
                
            </tbody>
        </table>

خب حالا اگر این تگ های html رو اجرا کنید چنین چیزی خواهید داشت

البته این عکس رو از این لینک گرفتم ولی جدول طراحی شده هم تقریبا چنین چیزی هست.

مرحله سوم :

در انتها هم کافیه که این جدول رو داخل تگ div قرار بدید و به div کلاس table-responsive رو بدید و به خود تگ table هم کلاس table و  table-bordered رو بدید.

<div class="table-responsive">

        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>عنوان</td>
                    <td>تاریخ</td>
                    <td>کاربر ثبت کننده</td>
                    <td>عملیات</td>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>گروه اول</td>
                    <td>1398/02/04</td>
                    <td>نام کاربر</td>
                    <td>
                        <a class="btn btn-bitbucket" style="margin-bottom:3px; width:80px;">
                            <i class="glyphicon glyphicon-pencil"></i>
                            ویرایش
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>گروه دوم</td>
                    <td>1398/02/04</td>
                    <td>نام کاربر</td>
                    <td>
                        <a class="btn btn-bitbucket" style="margin-bottom:3px; width:80px;">
                            <i class="glyphicon glyphicon-pencil"></i>
                            ویرایش
                        </a>
                    </td>
                </tr>
                
            </tbody>
        </table>

    </div>

جدول شما بعد از اجرا به این صورت تبدیل میشه 

به همین سادگی شما می تونید یک جدول کاملا ریسپانسیو با بوت استرپ رو طراحی کنید.