آموزش W3CSS

آموزش W3.CSS – لیست ها

می توان از W3.CSS برای نمایش انواع مختلف لیست ها با استفاده از استایل های مختلفِ w3-ul استفاده کرد.

نام کلاس

توضیحات

w3-ul

یک لیست ابتدایی و بدون قاب نمایش میده.

w3-striped

لیستی را نمایش میده که سطرهای آن یکی در میان رنگی هستن.

w3-bordered

لیستی می کشه که در امتداد سطرهاش قاب داره.

w3-border

یک لیست قاب دار می کشه.

w3-card

لیست را بصورت کارت می کشه.

w3-tiny

یک لیست با فونت های خیلی کوچک می کشه.

w3-small

یک لیست با فونت های کوچک می کشه.

w3-large

یک لیست با فونت های بزرگ می کشه.

w3-xlarge

یک لیست با فونت های خیلی بزرگ می کشه.

w3-xxlarge

یک لیست با فونت های خیلی خیلی بزرگ می کشه.

w3-xxxlarge

یک لیست با فونت های خیلی خیلی خیلی بزرگ می کشه.

w3-jumbo

یک لیست با فونت های بزرگ و درشت (jumbo) می کشه.

مثال

w3css_lists.htm

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body class="w3-container"> 
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class="w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      <h3>Stripped List with borders</h3>
      <ul class="w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>     
      <h3>List as Card</h3>
      <ul class="w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>           
      <h3>List with very small font</h3>
      <ul class="w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>            
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...