آموزش طراحی متریال با Materialize (جلسه 13) - Chips و Footer

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۰۶ اردیبهشت ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

در مورد Chips

Materialize یک جزء مخصوص فراهم کرده و اسم اون رو chip یا تراشه یا ورقه قرار داده و میتونین با استفاده مجموعه‌های کوچکی مثل تگها و اطلاعات تماس و .... رو درست کرده و قرار بدید. با دادن کلاس chip به div مورد نظرتون اون رو بصورت یک تراشه یا چیپس در میارید و میتونین مواردی که میخاید رو در اون قرار بدین. متن و عکس و آیکون میتونه در این chip قرار بگیره.

عکس و متن در Chip:

<div class="chip">
    <img alt="HTML5" src="html5-mini-logo.jpg">HTML 5
</div>

خروجی:chip1

میبینید که موارد مورد نظر قرار داده شدن. عکسی هم که در chip قرار میگیره ارتفاعش 42 میشه و بصورت دایره ای در میاد.

متن و آیکون در Chip:

<div class="chip">
    HTML 5<i class="material-icons">close</i>
</div>

خروجی:chip2

زمانی هم که بر روی آیکون کلیک میشه، chip مورد نظر حذف میشه.

در مورد Footer

Materialize کلاسهایی مرتبط با فوتر یا Footer داره و میتونین با استفاده از اونا فوتر مورد نظرتون رو برای سایتتون قرار بدین.

  • page-footer : با نسبت دادن این کلاس به div مورد نظر باعث میشید که اون المنت بصورت فوتر در بیاد
  • footer-copyright : با استفاده از این کلاس، المنت مورد نظر به یک المنت footer-copyright تبدیل میشه و میتونین متن copyright رو در اون قرار بدین.

مثالها

<footer class="page-footer">
    <div class="row">
        <div class="col s12 m6 l6">
            <h5 class="white-text">Footer Content</h5>
        </div>
        <div class="col">
            <ul>
                <li><a href="#" class="grey-text text-lighten-4 right">Help</a></li>
                <li><a href="#" class="grey-text text-lighten-4 right">Privacy and Terms</a></li>
                <li><a href="#" class="grey-text text-lighten-4 right">User Agreement</a></li>
            </ul>
        </div>
    </div>
</footer>

همونطور که دیدید به المنت footer کلاس page-footer دادیم و محتوای مورد نظر رو درونش قرار دادیم.

خروجی بصورت زیر هست:footer1

حالا میتونیم کلاس footer-copyright رو هم در المنت بالا قرار بدیم:

<footer class="page-footer">
    <div class="row">
        <div class="col s12 m6 l6">
            <h5 class="white-text">Footer Content</h5>
        </div>
        <div class="col">
            <ul>
                <li><a href="#" class="grey-text text-lighten-4 right">Help</a></li>
                <li><a href="#" class="grey-text text-lighten-4 right">Privacy and Terms</a></li>
                <li><a href="#" class="grey-text text-lighten-4 right">User Agreement</a></li>
            </ul>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            © 2016 Copyright Information
            <a class="grey-text text-lighten-4 right" href="#!">Links</a>
        </div>
    </div>
</footer>

خروجی بصورت زیر خواهد شد:footer2

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.