مقدمه

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


عنوان

عناصر <h1> تا <h6> را برای تعریف المنت‌های هدینگ در هر صفحه استفاده نمایید.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

ویژگی‌های عناصر

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

ElementDescription
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

خط افقی

با استفاده از این تگ <hr>شما می توانید در محل خاصی از صفحه خط افقی ایجاد کنید.


نقل قول

با استفاده از این تگ می توانید از ویژگی نقل قول در طراحی صفحات استفاده کنید.<blockquote> المنت.

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

Someone famous
<blockquote>
    <p>Quotation</p>
    <small>Source</small>
</blockquote>

بلاک

برای استفاده چند خط متن در صفحه شما می توانید از المنت <pre> اشتفاده نمایید و نمایش متن و شکستگی خطوط به همان شکل در صفحه سایتتان نمایش داده میشود و همچنین از تگ <code> نیز می توانید برای نمایش کدها استفاده نمایید.

IMPORTANTبرای تاکید و مهم کردن یک متن خاص

<pre>
    <code>...</code>
</pre>

لیست‌ها

ایجاد یک لیست نا مرتب با استفاده از <ul> و همچنین استفاده از <ol> در این تگ برای نمایش لیست نامرتب <li> و استفاده از این المنت برای نمایش لیست مرتب که در زیر مشاهده میشود.

  • Item 1
  • Item 2
    • Item 1
    • Item 2
      • Item 1
      • Item 2
  • Item 3
  • Item 4
  1. Item 1
  2. Item 2
    1. Item 1
    2. Item 2
      1. Item 1
      2. Item 2
  3. Item 3
  4. Item 4
<ul>
    <li>...</li>
    <li>...
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>
<ol>
    <li>...</li>
    <li>...
        <ol>
            <li>...</li>
        </ol>
    </li>
</ol>

توجه شما همچنین می توانید از پلاگین‌ ابزاری مربوط به ابن نیاز را تهیه و استفاده نمایید. اینجا.


تعاریف لیست‌‌ها

برای نمایش جزئیات یک لیست از <dl> استفاده میشود و از <dt> برای ایجاد لیست تشریحی به کار می رود و از <dd> که در آن توضیحات کلمه و یا عبارت مورد نظر، قرار می گیرد.

Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.
<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

توجهشما همچنین می توانید از افزونه‌های کاربردی برای انجام این کار استفاده کنید اینجا.


جدول

شما به آسانی با استفاده از این تگ <table> و استفاده از المنت <thead> جدول دلخواه خود را ایجاد نمایید <tfoot> و از المنت‌هایی که برای این تگ کاربردی هستند استفاده نمایید <tbody> برای نمایش جزئیات جدول استفاده میشود.

Table HeadingTable HeadingTable Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

<table>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

NOTEYou can also use additional UIkit classes for the tables. You will find more details here.


فرم

شما براختی می توانید با استفاده از عناصر <legend>, <input>, <select>فرم دلخواه ایجاد کنید..

Form
<form>
    <fieldset>
        <legend>...</legend>
        <input type="text" placeholder="">
        <input type="password" placeholder="">
        <select>
            <option>...</option>
            <option>...</option>
        </select>
    </fieldset>
</form>

NOTEYou can also use additional UIkit classes for the forms. You will find more details here.

گرید

به شما در ایجاد لایه ها برای ایجاد سطر و ستون کمک میکند.


گانتری ۵

گنتری یک فریم ورک برای طراحی قالب های جوملا تحت جی‌پی‌ال قدرتمند و بسیار حرفه ای توسط راکت تم منتشر شده است. به دلیل اینکه این فریم ورک برای طراحی قالب بسیار قدرتمند است و خیلی از کار ها را برایمان انجام می دهد و طراحی قالب را شیرین می کند.

Block 1
Block 2
Block 3

<div class="g-grid">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

Gantry5 grid system or better said "Nucleus" grid system does not have a grid gutter, it uses the .g-content class instead.

As you can see in the above example, all 3 blocks are surrounded by empty space. This empty space comes from the .g-content class which adds some margin and padding to the element.

We have added a utility class to the template which takes care of the unnecessary spacing and makes the whole grid looks more natural. The utility class is called .g-gutter.

Block 1
Block 2
Block 3

<div class="g-grid g-gutter">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

"Nucleus" comes with another very useful class called .size-# where # is the percentage of the whole width of the grid a particular element should occupy.

Block 1
Block 2
Block 3

Block 1
Block 2
Block 3

Block 1
Block 2

Block 1
Block 2

<div class="g-grid g-gutter">
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-60">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-60">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block size-25">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-75">
        <div class="g-content">...</div>
    </div>
</div>

سیستم یولکیت گرید

سیستم شبکه یولکیت به ۱۰ ستون شبکه متصل می شود. این واحدها با کلاسهای از پیش تعریف شده درون هر شبکه استفاده می کنند که عرض ستون را تعریف می کنند.

برای ایجاد یک سیستم یولکیت کلاس .uk-grid ایجاد کنید.uk-width-* این کلاس فرزندان و المنت های یک عنصر را بخوبی تعریف و تشکیل میدهند.

.uk-width-1-3
.uk-width-1-3
.uk-width-1-3
.uk-width-1-2
.uk-width-1-2
.uk-width-3-10
.uk-width-7-10

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

NOTEYou can find more information about the UIkit Grid System here.

ایجاد دکمه

نمونه و کدهای تشکیل دهنده دکمه


دکمه ‌های پیش فرض

Default Button Dark Button Empty Button

<a href="#" class="button">Default Button</a>
<a href="#" class="button dark">Dark Button</a>
<a href="#" class="button empty">Empty Button</a>

رنگ بندی دکمه

Button Grey Button Green Button Orange Button Purple Button Blue

<a href="#" class="button button-grey">Button Grey</a>
<a href="#" class="button button-green">Button Green</a>
<a href="#" class="button button-orange">Button Orange</a>
<a href="#" class="button button-purple">Button Purple</a>
<a href="#" class="button button-blue">Button Blue</a>

آیکن دکمه

Default Button Dark Button Empty Button Button Green

Button Purple

<a href="#" class="button"><i class="fa fa-fw fa-download"></i> Default Button</a>
<a href="#" class="button dark"><i class="fa fa-fw fa-star"></i> Dark Button</a>
<a href="#" class="button empty"><i class="fa fa-fw fa-lock"></i> Empty Button</a>
<a href="#" class="button button-green"><i class="fa fa-fw fa-clock-o"></i> Button Green</a>
<a href="#" class="button button-purple"><i class="fa fa-fw fa-arrows"></i> Button Purple</a>

سایز دکمه

Button XLarge Button Large Button Medium Button Small

Button XSmall

<a href="#" class="button button-xlarge">Button XLarge</a>
<a href="#" class="button dark button-large">Button Large</a>
<a href="#" class="button empty button-medium">Button Medium</a>
<a href="#" class="button button-green button-small">Button Small</a>
<a href="#" class="button button-purple button-xsmall">Button XSmall</a>

بلاک دکمه

Default Button
Dark Button
Empty Button

<a href="#" class="button button-block">Default Button</a>
<a href="#" class="button dark button-block">Dark Button</a>
<a href="#" class="button empty button-block">Empty Button</a>

NOTEYou can also use additional UIkit classes for the buttons. You will find more details here.

دکمه های نمایش هشدارها

This section shows the different alert styles and classes you can use.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

<p class="alert alert-success">...</p>
<p class="alert alert-info">...</p>
<p class="alert alert-warning">...</p>
<p class="alert alert-error">...</p>

NOTEYou can also use additional UIkit classes for the alerts. You will find more details here.

ماژول

چگونه به آسانی می توان از ماژول ها استفاده کرد

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

ClassDescription
<.uk-modal> Add this class to a <div> element to create the dialog container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling.
<.uk-modal-dialog> Add this class to a child <div> element to create the dialog box.
<.uk-modal-close> Add this class to an <a> or <button> element to create a close button within the dialog box. We recommend adding the .uk-close class from the Close component to give the button a proper styling, though you can also use text or an image.

You can use any element to toggle a modal dialog. An <a> element needs to be linked to the modal's id. To enable the necessary JavaScript, add the data-uk-modal attribute. If you are using another element, like a button, just add the data-uk-modal="{target:'#ID'}" attribute to target the modal's id.

Open

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is a button toggling the modal -->
<button class="button" data-uk-modal="{target:'#my-id'}">...</button>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>

NOTEYou can find more details and options about the modals here.

لایت باکس

نمایش ویدئوها و تصاویر بصورت لایت باکس به سادگی قالب استفاده و انجام است.

To apply this component, add the data-uk-lightbox attribute to an anchor linking to the image you wish to display. If a title attribute exists it will be displayed as a caption for the lightbox.

Open lightbox

<a href="/my-image.jpg" data-uk-lightbox title="">...</a>

You can link multiple images to the same lightbox and switch between them from within the lightbox, thus creating a gallery. Just add the {group:'my-group'} option to the data attribute of each item using the same name on all items that you want to group.

<a href="/" data-uk-lightbox="{group:'my-group'}">...</a>

A lightbox is not restricted to images. Other media, like videos, can be displayed inside a lightbox and it will automatically generate the correct output by evaluating your path.

Image MP4 Vimeo YouTube

NOTEYou can find more details and options about the lightbox here.

تولتیپ

نمایش و حالات نمایش تولتیپ برای آیتم های سایت

To create a tooltip, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.

Hover me

<button class="button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

Add one of the following options to the data-uk-tooltip attribute to adjust the tooltip's alignment.

AttributeDescriptionExample
<pos:'top'> Aligns the tooltip to the top.
<pos:'top-left'> Aligns the tooltip to the top left.
<pos:'top-right'> Aligns the tooltip to the top right.
<pos:'bottom'> Aligns the tooltip to the bottom.
<pos:'bottom-left'> Aligns the tooltip to the bottom left.
<pos:'bottom-right'> Aligns the tooltip to the bottom right.
<pos:'left'> Aligns the tooltip to the left.
<pos:'right'> Aligns the tooltip to the right.

<button class="button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

NOTEYou can find more details about the tooltip here.

زبانه‌ها

این بخش شامل نمایش زبانه ها برای نمایش جزئیات و توضیحات می باشد.

The Tab component consists of clickable tabs, that are aligned side by side.

ClassDescription
.uk-tab Add this class to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.uk-active Add this class to a list item to apply an active state.
.uk-disabled Add this class to a list item to apply a disabled state.

The data-uk-tab attribute is required for two purposes. Firstly, it enables the responsive behaviour. If the parent container is too small to accomodate all tabs, they will be combined into a dropdown, toggled by a single tab, which represents the active tab item.

And secondly, its functionality is coupled to the Switcher component, which is necessary to dynamically transition through different contents using tabbed navigation.

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li class="uk-disabled"><a href="#">...</a></li>
</ul>

There are many more options and layouts available for the tabs, for example centered tabs, tabs on the left, tabs on the right, etc. You will find all these details on the UIkit website.

NOTEYou can find more details and options about the lightbox here.

آکاردئون

در این بخش نمایش چگونگی ایجاد یک لیست از آیتم ها مورد نظر را نشان میدهد که با کلیک بر روی آکاردئون شما می توانید آیتم ها را مشاهده و انتخاب کنید.

To create an Accrodion, add the uk-accordion class and the data-uk-accordion attribute to a container element. Add the uk-accordion-content class to each of the content sections within the container. Finally, add the uk-accordion-title class to any element, like a heading, above the content section to create a toggle.

عنوان ۱

این یک متن نمونه برای نمایش عملکرد قالب می باشد .شما می توانید با مراجعه به مدیریت سایت این متون را ویرایش یا حذف بفرمایید.این یک متن نمونه برای نمایش عملکرد قالب می باشد .شما می توانید با مراجعه به مدیریت سایت این متون را ویرایش یا حذف بفرمایید.

عنوان ۲

این یک متن نمونه برای نمایش عملکرد قالب می باشد .شما می توانید با مراجعه به مدیریت سایت این متون را ویرایش یا حذف بفرمایید.این یک متن نمونه برای نمایش عملکرد قالب می باشد .شما می توانید با مراجعه به مدیریت سایت این متون را ویرایش یا حذف بفرمایید.

عنوان ۳

این یک متن نمونه برای نمایش عملکرد قالب می باشد .شما می توانید با مراجعه به مدیریت سایت این متون را ویرایش یا حذف بفرمایید.این یک متن نمونه برای نمایش عملکرد قالب می باشد .شما می توانید با مراجعه به مدیریت سایت این متون را ویرایش یا حذف بفرمایید.

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

</div>

NOTEYou can find more details and options about the accordion here.

یولکیت

مواردی که در اینجا مشاهده میکنید، در صفحه تایپوگرافی، فقط یک مرور سریع از عناصر رایج استفاده می شود. در واقع بسیاری از چیزهای جالب دیگری وجود دارد که می توانید آنها را استفاده کنید. Utility classes, Overlays, Text Styles, Switchers, Toggles, Scrollspy, Smooth scroll, Dynamic Grids, Sliders, Slidesets, Slideshows, Parallax, Sticky elements and more!

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