تایپوگرافی
JSN Ares با تمرکز قوی بر روی تایپوگرافی برنامه نویسی شده است و ما امیدوار هستیم توانایی ارائه جامع ترین محتوا را داشته باشد. سرتیتر، متن، پیوند ها، جدول ها، تصاویر و همه با سطح بالایی از پالایش طراحی شده اند. بیایید نگاهی به آن بیندازیم.
عنوان
این یک عنوان H1 است
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
این یک عنوان H2 است
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
این یک عنوان H3 است
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
این یک عنوان H4 است
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
این یک عنوان H5 است
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
این یک عنوان H6 است
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
ستون های متنی
شما می توانیدمتن ود را در چند ستون توسط یک کد ساده html مرتب کنید. JSN Ares تعداد ستون هایی را که تعریف کرده اید تشخیص داده و بطور اتوماتیک آنها را مرتب می کند.
استفاده: <div class=”grid-layout”><div>متن ستون 1</div><div>متن ستون 2</div></div>
محتوا در 2 ستون مرتب می شوند
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
محتوا در 3 ستون مرتب می شوند
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
محتوا در 4 ستون مرتب می شوند
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
محتوا در 5 ستون مرتب می شوند
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
ستون متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
سبک های متن
متن بدون قالب(<pre> تگ)
div.grid-layout2 div.grid-col {
float: left;
width: 49.95%;
}
div.grid-layout3 div.grid-col {
float: left;
width: 33.3%;
}
متن نقل قول (<blockquote> تگ)
شما می توانید این سبک را برای نقل قول کردن صحبت ها، ایده های یک شخص یا قسمتی از یک کتاب، مقاله و غیره استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
طرز استفاده: <blockquote>این نقل قول شماست</blockquote>
Drop Cap
شما می توانید این سبک علامت را برای پاراگراف متنی روزنامه / مجله بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
طرز استفاده: <p class="text-dropcap">این یک متن با نماد Drop Cap می باشد</p>
متن برجسته
شما می توانید این سبک را برجسته نمودن کلمات مهم یا نشان دادن کلید واژه در صفحه نتایج جستجو استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
طرز استفاده: <span class="text-highlight">.این متنی است که برجسته شده است</span>
متن برجسته شده با حرکت موس
شما می توانید این سبک را برای برجسته کردن متن های مهم توسط حرکت موس استفاده کنید. فقط کافیست موس را روی این قسمت حرکت دهید تا ببینید چطور برجسته می شود.
طرز استفاده: <div class="text-box-highlight">.این متنی است که برجسته شده است</div>
شما می توانید این سبک را برای برجسته کردن متن های مهم توسط حرکت موس استفاده کنید. فقط کافیست موس را روی این قسمت حرکت دهید تا ببینید چطور برجسته می شود.
طرز استفاده: <div class="text-box-highlight">.این متنی است که برجسته شده است</div>
متن هشدار
شما می توانید این سبک را برای ساخت پاراگراف متنی هشدار یا اخطار که نیازمند توجه کاربر است استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
طرز استفاده: <p class="text-alert">این متنی است که نیازمند توجه کاربر است.</p>
متن اطلاع رسانی
شما می توانید از این سبک برای پاراگراف متنی اطلاع رسانی که نیاز چندانی به توجه کاربر ندارد استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
طرز استفاده: <p class="text-info">این متنی است که نیازمند توجه کاربر نمی باشد.</p>
متن دانلود
شما می توانید این سبک را برای پاراگراف متنی اطلاع رسانی که مربوط به فرایند دانلود است استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
طرز استفاده: <p class="text-download">این متن مربوط به دانلود است.</p>
متن نکته
شما می توانید از این سبک برای اطلاعات مفید از قبیل نکته ها، اشاره ها و متن راهنما استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
طرز استفاده:<p class="text-tip">این متن اشاره ای یا راهنما می باشد.</p>
متن توضیح
متن ضمیمه
متن ویدئویی
شما می توانید این سبک را برای پاراگراف متنی مرتبط با ویدئو بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
طرز استفاده: <p class="text-video">This is your video related text.</p>
متن صوتی
شما می توانید این سبک را برای پاراگراف متنی مرتبط با فایل صوتی بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
طرز استفاده: <p class="text-audio">این متن مرتبط با فایل صوتی است.</p>
سبک های پیوند
سبک های آیکن پیوند
شما می توانید با اضافه کردن یک کلاس ساده، تا 20 آیکن از پیش تعریف شده به جلوی هر پیوند اضافه کنید.
طرز استفاده<a class="link-icon jsn-icon-xxx">.این متن پیوند است</a>، که xxx نام آیکن است. اطلاعات تفصیلی در مورد همه نام آیکن ها در مستندات قالب آورده شده است.
مثال: <a class="link-icon jsn-icon-download">.این پیوند برای دانلود است</a>
سبک های دکمه پیوند
JSN Ares شش سبک دکمه برای هر پیوند فراخوانی که در محتوایتان دارید پیشنهاد می کند.
طرز استفاده: <a class="link-button button-xxx">این متن پیوند است.</a>، که xxx نام رنگ دکمه است که از این ها انتخاب می شود: روشن، تیره، سبز، نارنجی، آبی و قرمز
نمونه: <a class="link-button button-orange">مشاهده پلن ها وقیمت ها</a>
ترکیب سبک های آیکن و دکمه
شما می توانید سبک های آیکن و دکمه پیوندها را با هم ترکیب کنید.
طرز استفاده: <a class="link-button button-xxx"><span class="link-icon jsn-icon-yyy">این متن پیوند است</span></a>، که xxx و yyy رنگ دکمه و نام آیکن است.
نمونه:<a class="link-button button-green"><span class="link-icon jsn-icon-cart">افزودن به سبد خرید</span></a>
دکمه با سبک علامت و آیکن
JSN Ares با سبک دکمه علامت دار
طرز استفاده: <a class="link-button button-xxx button-flag"><span class="link-icon jsn-icon-yyy">این متن پیوند است.</span></a>، که xxx و yyy رنگ دکمه و نام آیکن می باشد.
نمونه: <a class="link-button button-green button-flag"><span class="link-icon jsn-icon-cart">افزودن به سبد خرید</span></a>
سبک های پیوند افزونه ها
JSN Ares نه تنها قادر است آن طوری که در بالا گفته شد آیکن به جلوی یک پیوند اضافه کند، بلکه 23 آیکن افزونه را هم می تواند به انتهای آن اضافه کند.
همه آیکن ها می تواند به صورت اتوماتیک و با فعال کردن یک پارامتر در قالب و یا به صورت دستی با افزودن یک کلاس به پیوند اختصاص داده شوند.
طرز استفاده: <a class="link-icon-ext jsn-icon-ext-xxx">این متن پیوند است.</a>، که xxx نام آیکن است. اطلاعات تفصیلی درباره همه نام آیکن ها در مستندات قالب آورده شده است.
سبک های جدول
سبک جدولی ردیف های ساده
| سرتیتر جدول | سرتیتر ستون 1 | سرتیتر ستون 2 | سرتیتر ستون 3 |
|---|---|---|---|
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| پانویس جدول | اطلاعات پانویس | ||
سبک جدولی نوار رنگی
| سرتیتر جدول | سرتیتر ستون 1 | سرتیتر ستون 2 | سرتیتر ستون 3 |
|---|---|---|---|
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| پانویس جدول | لورم ایپسوم | ||
سبک جدولی نوار طوسی
| سرتیتر جدول | سرتیتر ستون 1 | سرتیتر ستون 2 | سرتیتر ستون 3 |
|---|---|---|---|
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| سرتیتر ردیف 1 | لورم ایپسوم | متن ساختگی | تولید سادگی |
| پانویس جدول | اطلاعات پانویس | ||
سبک های فهرست
سبک های فهرست استاندارد
فهرست غیر مرتب
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست نامرتب
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
سبک فهرست پیکاندار
پیکان قرمز
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
پیکان آبی
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
پیکان سبز
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
سبک های فهرست آیکنی
فهرست با آیکن مطلب
فهرست با آیکن پوشه
فهرست با آیکن تصویر
Online icon list
فهرست با آیکن ستاره
فهرست با آیکن کاربر
شما می توانید هرکدام از 20 آیکن را به لیست اضافه کنید. آیکن های بالا فقط برای نمونه بودند.
سبک های فهرست شماره دار
فهرست شماره دار بالت آبی
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار بالت سبز
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار بالت بنفش
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار نارنجی
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار بالت قرمز
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار بالت طوسی
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار رقم آبی
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار رقم سبز
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار رقم بنفش
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار رقم بنفش
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار رقم قرمز
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
فهرست شماره دار رقم طوسی
- لورم ایپسوم متن ساختگی
- با تولید سادگی نامفهوم
- از صنعت چاپ و با استفاده
با ما تماس بگیرید
آدرس : 26 rue du Chalet, 75010 Paris - France
فکس : +00 (0)1 23 45 6789
موبایل: +00 (0)1 23 45 6789
ایمیل : این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید
درباره ما
JSN Ares برای هر وب سایت نمونه کار یا وب سایت های برنامه های کاربردی موبایل بسیار مناسب است. JSN Ares داری طرح بندی واکنشگراست و از کامپوننت های K2 و Kunena پشتیبانی می کند.
شما می توانید این سبک را برای پاراگراف متنی توضیحی بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
طرز استفاده: <p class="text-comment">این متن توضیحی شما است.</p>