• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش طراحی متریال با Materialize (جلسه 9) - علامتها و Breadcrumb

0 279 ۲ اردیبهشت ۹۵

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

علامت ها یا Badges

با استفاده از Badges میتونین اعداد یا آیکون مورد نظرتون رو مورد تاکید قرار بدین و کاری کنید که کاربران بهتر اونو ببینن. در این زمینه 2 کلاس وجود داره:

  • badge : با استفاده از این کلاس میتونین بگید که این المنت یک علامت یا badge هست. باید این کلاس رو به span مورد نظرتون بدید
  • new : این کلاس رو اگه به همراه کلاس بالایی به کار ببرید، باعث میشه که یک رنگ پس زمینه برای اون در نظر گرفته بشه و همچنین استایل اون تغییر بکنه و بیشتر تو چشم باشه

مثالها

استفاده از علامت در لیست:

میبینید که در بالا هم badge خالی وجود داره و هم همراه با new.

خروجی:badge1

استفاده از علامت در DropDown:

خروجی:badge2

استفاده از علامت در Navigation:

خروجی:badge3

Breadcrumb

با استفاده از نسبت دادن کلاس breadcrumb به تگهای a میتونین اونا رو بصورت breadcrumb در بیارید. برای مثال به کد زیر نگاه کنید:

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

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

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

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

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram