تصویر ثابت

پایگاه رسمی مهندس محسن اشکبوس

کارشناس ارشد طراحی سامانه های نرم افزاری تحت وب و شیرپوینت

پایگاه رسمی مهندس محسن اشکبوس

کارشناس ارشد طراحی سامانه های نرم افزاری تحت وب و شیرپوینت

آخرین نظرات

آموزش Materialcss - گرید بندی صفحه

اشکبوس محسن | چهارشنبه, ۲۳ تیر ۱۳۹۵، ۰۵:۱۵ ق.ظ

در واقع materialcss از یک سیستم گرید بندی واکنش گرا روان با 12 ستون استفاده می کند.به عبارت دیگر صفحه شما را به 12 ستون واکنش گرا تقسیم بندی می کند.برای درک بیتشر کد html ذیل یک تقسیم بندی 12 ستونه صفحه شما را انجام می دهد : 


    <div class="row">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>

s1 نشان داده شده در کلاس col s1 فوق به معنی این است که در دستگاه های کوچک مثل گوشی های هوشمند یک ستون در نظر گرفته شود.

شما از کلاسی به نام Container در طراحی خود می توانید استفاده کنید در واقع قبل از تگ row از این تگ استفاده می کنند به شکل ذیل : 

    <body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
    </body>



اما شاید این سوال پیش آید چه تفاوتی می کند که از آن استفاده کنید یا نه برای مشاهده این تفاوت می توانید به آدرس ذیل مراجعه کنید : 

http://materializecss.com/grid.html


نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی