عرض الاعمده في سطر واحد في Web و اكثر من سطر في Display columns on one row in Web and more than one row in mobile - mobile

تطوير الويب FrontEnd - Bootstrap

بنتعلم في هذا المقال كيف ممكن نتحكم بعرض الاعمده في الصفحه بحيث اذا كانت الصفحة صفحة Web في desktop بتم عرض عدد معين من الاعمده(بناسب حجم الصفحه)، واذا كانت في mobile بتم عرض عدد اقل من الاعمدة لكن مش عمود واحد فقط

المطلوب هنا تطبيق المثال حتى يكون بالشكل التالي:

 اذا تم عرض الصفحة في متصفح في Desktop 

 اذا تم عرض الصفحة في متصفح في Mobile بكون الشكل

اكيد لاحظت الفرق بين الصفحتين. 

في الموبايل عرضنا 2 column في الصف الواحد بدل ما نعرضهم كلهم تحت بعض (كل عمود في صف) 

تمام حتى نطبق هذا الكلام محتاجين كود CSS 

اول اشي لازم نضيف ملف CSS التالي الى الصفحه 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

يحتوي هذا الملف على الاكواد الخاصة ب CSS الي بنحتاجها هنا. 

بعد هيك بنضيف الكود التالي في صفحة HTML 

<div class="container text-center">
    <div class="panel-body  text-center">
        <div class="col-md-3 col-xs-6 colmpadding">
            <a href='#'>
                <div class="box fadeBox">
                    <img src="~/Content/MenuImgs/img.jpg" class="Menu" />
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6 colmpadding">
            <a href='#'>
                <div class="box fadeBox">
                    <img src="~/Content/MenuImgs/img.jpg" class="Menu" />
                </div>
            </a>
        </div>
       <div class="col-md-3 col-xs-6 colmpadding">
            <a href='#'>
                <div class="box fadeBox ">
                    <img src="~/Content/MenuImgs/img.jpg" class="Menu" />
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6 colmpadding">
            <a href='#'>
                <div class="box fadeBox">
                   <img src="~/Content/MenuImgs/img.jpg" class="Menu" />
                </div>
           </a>
        </div>
        <div class="col-md-3 col-xs-6 colmpadding">
            <a href='#'>
                <div class="box fadeBox">
                    <img src="~/Content/MenuImgs/img.jpg" class="Menu" />
                </div>
            </a>
        </div>
        <div class="row  text-center">
        </div>
    </div>
</div>

نفهم شو يعني الكود

الفكره الاساسية في الكود هي استخدام class المسمى col-md-3 col-xs-6  . تمام نرجع نتذكر شو يعني هذا class في Bootstrap

يحتوي grid system في  Bootstrap على 4 classes هي:

• xs يستخدم مع الهواتف phones (حجم الشاشة اقل او يساوي 576px)
• sm يستخدم مع الأجهزة اللوحية tablets (حجم الشاشة ≥ 576px او اكبر)
• md يستخدم مع أجهزة الكمبيوتر المكتبية desktops (حجم الشاشة ≥ 768px او اكبر)
• lg يستخدم مع أجهزة الكمبيوتر المكتبية الأكبر حجمًا larger desktops ( حجم الشاشة ≥ 992px او اكبر)

بناء عليه اذا كان العرض على شاشة كمبوتر مكتبي desktops بتم استخدام md، واذا كان موبايل بتم استخدام xs. 

للمزيد حول Bootstrap grid system 

يمكن دمج الفئات أعلاه لإنشاء تخطيطات أكثر ديناميكية ومرونة.

لاحظ انو طبقنا class باسم menu على كل صورة لعرض الدوائر بالشكل المطلوب. بعد هيك على نفس div طبقنا class باسم colmpadding بهدف اضافة تباعد بين الدوائر.

الكود : 

.colmpadding {
    padding:5px 5px 5px 5px;
}

وعلى الصورة طبقنا class باسم Menu لعرض الصور بالشكل الدائري مع اضافة shadow: 

الكود:

.Menu {
    border-radius: 50%;
    width: 80%;
    height: 80%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}