سیستم grid فریمورک semantic

سیستم grid فریمورک semantic

Category : semantic-ui

در این مطلب فریم ورک سمانتیک رو به صورت مختصر معرفی کردیم

Grid

اما حالا می خواهیم نگاهی به سیستم grid این فریمورک بیندازیم . که به شما قابلیت کادربندی مناسب صفحات را می دهد . برخلاف bootstrap که فضا را به 12 قسمت تقسیم می کند semantic ui از فضا را به 16 قسمت تقسیم می کند در ادامه از یک مثال ساده استفاده می کنیم

<div class="ui grid" >

  <div class="four wide column" >

  </div>

  <div class="ten wide column" >

  </div>

  <div class="two wide column" >

  </div>

</div>

در مثال بالا ما سه div تعریف کردیم که div اول ما 4 واحد از 16 واحد و div دوم ده واحد از فضا را به خود اختصاص داده است

یک روش دیگر برای این کار

<div class="ui three column grid" >

  <div class="column" >1<div>
  <div class="column" >2<div>
  <div class="column" >3<div>

</div>

در این روش می توانید صفحه را به سه قسمت مساوی تقسیم کنیم .

توجه کنید که در این مثال ها ما به هر div یک background اختصاص دادیم که بهتر بتوانید عملکرد کد ها را ببینید

در طراحی ساخت سایت شما باید صفحات سایت را ریسپانسیو ( واکنشگرا ) بسازید تا هم در مبایل و یا در مانیتور ها با سایز های مختلف به درستی نمایش داده شوند فریمورک semantic هم کلاس های مختلفی را برای این منظور در نظر گرفته است به نمونه کد زیر توجه کنید

<div class="ui centered grid">
  <div class="computer only row">
    <div class="column"></div>
  </div>
  <div class="six wide tablet eight wide computer column"></div>
  <div class="six wide tablet eight wide computer column"></div>
  <div class="six wide tablet eight wide computer column"></div>
</div>

این اموزش بروزرسانی خواهد شد


Leave a Reply