گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید.
در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.
مرحله 1
HTML embed Tag <title></span></div>
<div style="direction: ltr;"><span style="font-size: 12px;"><head></span></div>
<div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div>
<div style="direction: ltr;"><span style="font-size: 12px;"><embed src="/html/yourfile.mid"` width="100%" height="60"></span></div>
<div style="direction: ltr;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media"><noembed></span></div>
<div style="direction: ltr;"><span style="font-size: 12px;"><embed></span></div>
<div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div>
<div style="direction: ltr;"><span style="font-size: 12px;"><html><br /><br /></span>
<h3 class=" InnerTitle1" style="text-align: right;">ویژگی های برچسب < embed></h3>
<p style="text-align: right;">در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.</p>
<span style="font-size: 12px;"><br /></span>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableHead">Attribute</div>
<div class="divTableHead">Description</div>
</div>
<div class="divTableRow">
<div class="divTableCell">align</div>
<div class="divTableCell">تعیین می کند که چگونه یک آبجکت را تنظیم کرد، که می تواند هم در مرکز، هم در راست و یا چپ تنظیم شود.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">autostart</div>
<div class="divTableCell">این ویژگی Boolean نشان می دهد که آیا مدیا باید به طور خودکار شروع به کار کند. شما می توانید آن را با true یا false تنظیم کنید.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">loop</div>
<div class="divTableCell">تعیین می کند که آیا صدا متداولا پشت سرهم تکرار شود( لوپ را روی true تنظیم کنید)، یا چند دفعه باید تکرار شود ( یک مقدار مثبت) و یا اصلا تکرار نشود(false).</div>
</div>
<div class="divTableRow">
<div class="divTableCell">playcount</div>
<div class="divTableCell">تعداد دفعاتی را که یک صدا باید تکرار شود تعیین می کند. اگر در حال استفاده از IE هستید، این گزنیه جایگزینی برای loop می باشد.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">hidden</div>
<div class="divTableCell">مشخص می کند که آیا آبجکت مولتی مدیا باید روی صفحه نمایش داده شود.مقدار false یعنی نه و مقدار true یعنی بله.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">width</div>
<div class="divTableCell">عرض آبجکت به پیکسل.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">height</div>
<div class="divTableCell">عرض آبجکت به پیکسل.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">name</div>
<div class="divTableCell">نامی که برای اشاره به آبجکت استفاده می شود.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">src</div>
<div class="divTableCell">URL مربوط به آبجکت که باید جاسازی شود.</div>
</div>
<div class="divTableRow">
<div class="divTableCell">volume</div>
<div class="divTableCell" style="direction: rtl;">میزان صدا را کنترل می کند که می تواند از 0 (صدا قطع شده) تا 100 (آخرین حد صدا) باشد.</div>
</div>
</div>
</div>
<h3 class=" InnerTitle1" style="direction: rtl;">انواع ویدیوهای پشتیبانی شده</h3>
<p style="direction: rtl;">می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.</p>
<span style="font-size: 12px;"><br /></span>
<div style="direction: rtl;">فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.</div>
<div style="direction: rtl;">فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.</div>
<div style="direction: rtl;">فایل های mov - فرمت Quick time movie در اپل.</div>
<div style="direction: rtl;"> فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.</div>
<div class="example">
<h2 class="example_head" style="direction: rtl; text-align: right;">مرحله2<br /><br /></h2>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><!DOCTYPE html></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html xmlns="http://www.w3.org/1999/xhtml"></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><title>HTML embed Tag<title></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed src="/html/yourfile.swf" width="200" height="200"></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media"><noembed></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div>
<div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html><br /></span>
<h3 class=" InnerTitle1" style="text-align: right;">صدای زمینه</h3>
<p style="text-align: right;">شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.<br />در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.</p>
<span style="font-size: 12px;"><br /></span>
<div class="example">
<h2 class="example_head" style="text-align: right;">جهت مشاهده مثالها برروی <a title="دوره آموزش طراحی سایت" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">دوره آموزش طراحی سایت</a> کلیک نمایید</h2>
</div>
</div>
</div>
</div>
</div>
<div id="gtx-trans" style="position: absolute; left: 639px; top: -11.9236px;"> </div>
</div>
<div class="post-tags"> <span class="tag"> </span>
برچسب ها: <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت/">آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحی+سایت/">دوره طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/طراحی+سایت+دیجی+کالا/">طراحی سایت دیجی کالا</a>,
</div>
</div>
<div class="post-info">
<ul>
<li>
<div class="postlike"><a href="https://tahlildadeh.farsiblog.com/prate/upAZziFLIwzIZOfYL/" class="uplike"><span class="like-up"></span></a><span class="up-result"><span class="fbrateQuery fbrateUp" id="fbrate_upAZziFLIwzIZOfYL">۰</span></span><a href="https://tahlildadeh.farsiblog.com/prate/downAZziFLIwzIZOfYL/" class="downlike"><span class="like-down"></span> </a><span class="down-result"><span class="fbrateQuery fbrateDown" id="fbrate_downAZziFLIwzIZOfYL">۰</span></span></div>
</li>
<li> <span class="postcmnt"> <a href="https://tahlildadeh.farsiblog.com/post/HTML-Embed-Multimedia/#comments">۰ نظر</a></span> </li>
</ul>
</div>
</div><div class="post">
<div class="post-title"> <span class="post-title-icon"></span>
<h2><a href="https://tahlildadeh.farsiblog.com/post/-آموزش-طراحی-سایت-JQuery/" target="_blank"> آموزش طراحی سایت-JQuery </a></h2>
</div>
<div class="post-body">
<div class="post-details"><span class="postauthor">پیمان کلانتری</span> <span class="postdate"> جمعه ۰۴ مهر ۹۹ | ۱۱:۳۳ </span> <span class="postviews"> ۱۷۳ بازديد </span> </div>
<div class="post-cnt">
<span data-cke-copybin-start="1"></span>
<p><span id="cke_bm_84S" style="display: none;"> </span> </p>
<p><span style="font-size: 16px;"><strong>سلام عزیزان ... با آموزش JQuery از دوره </strong><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"><strong>آموزش طراحی سایت</strong></a><strong> همراه باشید</strong></span></p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;"><strong>جی کوئری Jquery چیست؟</strong></span></p>
<p>برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.</p>
<p><span style="font-size: 14px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"><strong>آموزش طراحی سایت</strong></a></span><strong> : </strong>با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.</p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"><strong>آموزش طراحی سایت</strong></a><strong> : </strong>آموزش انتخاب یک ویرایشگر مناسب برای jQuery</span></p>
<p>می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.</p>
<p>داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="تصویر" data-cke-widget-id="1"><img class="cke_widget_element" src="https://files.virgool.io/upload/users/138093/posts/f5c72ftjgpwk/wgrhloxgxesv.png" alt="" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/f5c72ftjgpwk/wgrhloxgxesv.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Ffiles.virgool.io%2Fupload%2Fusers%2F138093%2Fposts%2Ff5c72ftjgpwk%2Fwgrhloxgxesv.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22%22%2C%22height%22%3A%22%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" /><span class="cke_image_resizer" title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="تصویر" data-cke-widget-id="0"><img class="cke_widget_element" src="https://files.virgool.io/upload/users/138093/posts/f5c72ftjgpwk/sodo1brdqrrz.png" alt="" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/f5c72ftjgpwk/sodo1brdqrrz.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Ffiles.virgool.io%2Fupload%2Fusers%2F138093%2Fposts%2Ff5c72ftjgpwk%2Fsodo1brdqrrz.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22%22%2C%22height%22%3A%22%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" /><span class="cke_image_resizer" title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.</p>
<p> </p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;"><strong>آموزش استفاده از jQuery در صفحات وب</strong></span></p>
<p>جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.</p>
<p>پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):</p>
<p style="text-align: left;"> </p>
<p>اکنون بخشی از صفحه ی شما به شکل زیر خواهد:</p>
<p style="text-align: left;"> </p>
<p>jQuery test</p>
<p style="text-align: left;"> </p>
<p>یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:</p>
<p style="text-align: left;"> </p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"><strong>آموزش طراحی سایت</strong></a><strong> ادامه دارد</strong></p>
<span data-cke-copybin-end="1"></span>
</div>
<div class="post-tags"> <span class="tag"> </span>
برچسب ها: <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت/">آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحی+سایت/">دوره طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+jquery/">آموزش jquery</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت+تحلیل+داده/">آموزش طراحی سایت تحلیل داده</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+جی+کوئری/">آموزش جی کوئری</a>, <a href="https://tahlildadeh.farsiblog.com/tag/کتاب+آموزش+طراحی+سایت/">کتاب آموزش طراحی سایت</a>,
</div>
</div>
<div class="post-info">
<ul>
<li>
<div class="postlike"><a href="https://tahlildadeh.farsiblog.com/prate/uplKbwUuuinUKO/" class="uplike"><span class="like-up"></span></a><span class="up-result"><span class="fbrateQuery fbrateUp" id="fbrate_uplKbwUuuinUKO">۰</span></span><a href="https://tahlildadeh.farsiblog.com/prate/downlKbwUuuinUKO/" class="downlike"><span class="like-down"></span> </a><span class="down-result"><span class="fbrateQuery fbrateDown" id="fbrate_downlKbwUuuinUKO">۰</span></span></div>
</li>
<li> <span class="postcmnt"> <a href="https://tahlildadeh.farsiblog.com/post/-آموزش-طراحی-سایت-JQuery/#comments">۰ نظر</a></span> </li>
</ul>
</div>
</div><div class="post">
<div class="post-title"> <span class="post-title-icon"></span>
<h2><a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-Bootstrap-4/" target="_blank"> آموزش طراحی سایت-Bootstrap 4 </a></h2>
</div>
<div class="post-body">
<div class="post-details"><span class="postauthor">پیمان کلانتری</span> <span class="postdate"> پنجشنبه ۰۳ مهر ۹۹ | ۱۴:۳۴ </span> <span class="postviews"> ۷۸ بازديد </span> </div>
<div class="post-cnt">
<p></p>
<p><span id="cke_bm_137S" style="display: none;"> </span> </p>
<p><span style="font-size: 14px;"><strong>سلام با آموزش Bootstrap 4 از دوره <a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer" data-cke-saved-href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">آموزش طراحی سایت</a> در خدمت شما هستیم</strong></span></p>
<p><span style="font-size: 16px;"><strong>آموزش تعیین جهت شناوری Float عنصر در بوت استرپ 4:</strong></span></p>
<p>در <a rel="nofollow" href="https://virgool.io/@tahlildadehins/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%DA%A9%D9%84%D8%A7%D8%B3-nxn7xqnp6udv" target="_blank" rel="noopener noreferrer" data-cke-saved-href="https://virgool.io/@tahlildadehins/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%DA%A9%D9%84%D8%A7%D8%B3-nxn7xqnp6udv">قسمت قبل </a>با کار با کلاس های کاربردی Utility Classes در Bootstrap 4 آشنا شدید</p>
<p>در شکل زیر، انواع حالت شناوری یک عنصر یا float آن در عنصر دربرگیرنده را نشان داده ایم :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/kjzzmmmuxfhb.jpeg" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/kjzzmmmuxfhb.jpeg" /><span style="background: rgba(220, 220, 220, 0.5) url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png') repeat scroll 0% 0%; top: -15px; left: 0px;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>به وسیله کلاس float-right می توانید عنصر را در جهت راست و با کلاس float-left، عنصر را در جهت چپ، تراز نمایید.</p>
<p>همچنین به وسیله کلاس clearfix می توانید اعمال هرگونه float به عنصر را از بین برده و حالت پیش فرض را نمایش دهید.</p>
<p>مثال : در کد مثال عملی زیر، انواع حالت float را با مثال و سورس کد نشان داده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"><strong>Float left</strong></p>
<p style="text-align: left;"><strong>Float right</strong></p>
<p style="text-align: left;"> </p>
<p> </p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 16px;"><strong><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer" data-cke-saved-href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">آموزش طراحی سایت</a> : آموزش تعیین float به صورت ریسپانسیو Responsive:</strong></span></p>
<p>می توانید به وسیله کلاس هایی خاص، شناوری یا Float عنصر را بر حسب سایز صفحه نمایش تغییر دهید. برای این منظور از کلاس float-*-left/right استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته و جهت هم بایستی یا چپ (left) و یا راست (right) باشد :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>اندازه sm برای صفحه نمایش های بزرگتر از 576 پیکسل.</p>
</li>
<li style="list-style-type: disc;">
<p>اندازه md برای صفحه نمایش های بزرگتر از 768 پیکسل.</p>
</li>
<li style="list-style-type: disc;">
<p>اندازه lg برای صفحه نمایش های بزرگتر از 992 پیکسل.</p>
</li>
<li style="list-style-type: disc;">
<p>اندازه xl برای صفحه نمایش بزرگتر از 1200 پیکسل و ... .</p>
</li>
</ul>
<p>مثال : در کد مثال عملی زیر، نحوه استفاده از انواع کلاس های ریسپانسیو responsive float را در عمل نشان داده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p><strong>Float right on small screens or wider</strong></p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Float right on medium screens or wider</strong></p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Float right on large screens or wider</strong></p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Float right on extra large screens or wider</strong></p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Float none</strong></p>
<p> </p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer" data-cke-saved-href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx"><strong>آموزش طراحی سایت</strong></a><strong> : </strong>آموزش تعیین چیدمان وسط Center Align در Bootstrap 4:</span></p>
<p>نحوه تراز شدن مرکزی یک عنصر در صفحه به شکل زیر است :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/aklenkjabcsz.jpeg" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/aklenkjabcsz.jpeg" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>با اعمال کلاس mx-auto به یک عنصر (که باعث می شود مارجین چپ و راست آن برابر صفر شود)، وسط چین شده و در مرکز صفحه یا عنصر دربرگیرنده خود، قرار می گیرد. همانند کد مثال عملی زیر :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p><strong>Centered</strong></p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش تعیین عرض (width) یک عنصر در Bootstrap 4:</strong></span></p>
<p>در بوت استرپ 4، می توانید با کلاس های خاصی، عرض یک عنصر را سریع تعیین نمایید، همانند شکل زیر :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/yvxdkym6xzew.jpeg" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/yvxdkym6xzew.jpeg" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>برای تعیین عرض عناصر در Bootstrap 4، می توانید از کلاس w-* استفاده نمایید که در آن * نشان دهنده میزان درصد عرض عنصر از 100 درصد عرض ممکن است. برای مثال کلاس هایی مثل w-25، w-50، w-100 و یا mw-100 که مورد آخر خلاصه حداکثر عرض مجاز یا max width است.</p>
<p>مثال : در کد مثال عملی زیر، چندین عنصر با عرض های 25 درصد تا 100 درصد، ایجاد کرده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p><strong>Width 25%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Width 50%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Width 75%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Width 100%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Max Width 100%</strong></p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش تعیین ارتفاع (Hight) عنصر در بوت استرپ 4:</strong></span></p>
<p>به وسیله کلاس های خاصی در Bootstrap 4، می توانید ارتفاع یک عنصر را بسیار ساده تعیین نمایید، مثل شکل زیر :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/i5nqq4valnrw.jpeg" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/i5nqq4valnrw.jpeg" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>برای تعیین ارتفاع عناصر در Bootstrap 4، می توانید از کلاس h-* استفاده نمایید که در آن * نشان دهنده میزان درصد ارتفاع عنصر از 100 درصد ارتفاع ممکن است. برای مثال کلاس هایی مثل h- 25، h-50، h-75 و یا mh-100 که مورد آخر خلاصه حداکثر ارتفاع مجاز یا Max height است.</p>
<p>مثال : در کد مثال عملی زیر، چندین عنصر با ارتفاع های بین 25 درصد تا 100 درصد را به وسیله کلاس های جدید بوت استرپ 4، ایجاد کرده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Height 25%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Height 50%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Height 75%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Height 100%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Max Height 100%</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش تعیین فاصله (Spacing) در Bootstrap 4:</strong></span></p>
<p>بوت استرپ 4، دارای رنج گسترده ای از کلاس های کمکی ویژه جهت تعیین فاصله بیرونی (margin) و حاشیه درونی (padding) می باشد.</p>
<p>این کلاس ها برای سایزهای مختلف صفحه نمایش به صورت زیر عمل می کند :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>حالت xs برای صفحات کوچکتر از عرض 576 پیکسل.</p>
</li>
<li style="list-style-type: disc;">
<p>حالت sm برای صفحات یزرگتر از عرض 576 پیکسل.</p>
</li>
<li style="list-style-type: disc;">
<p>حالت md برای صفحات بزرگتر از عرض 768 پیکسل.</p>
</li>
<li style="list-style-type: disc;">
<p>حالت lg برای صفحات بزرگتر از عرض 992 پیکسل.</p>
</li>
<li style="list-style-type: disc;">
<p>حالت xl برای صفحات یزرگتر از عرض 1200 پیکسل.</p>
</li>
</ul>
<p>این کلاس با فرمت های زیر، برای انواع اندازه صفحه نمایش به کار می روند :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>فرمت حالت xs: {properts} {sides} -{size} = {خاصیت} {جهت ها}- {اندازه}</p>
</li>
<li style="list-style-type: disc;">
<p>- فرمت حالت های sm، md، lg و xl :</p>
</li>
<li style="list-style-type: disc;">
<p>دستور {property} {sides} -{brealpoint} -{size} = {خاصیت} {جهت ها}{سایز صفحه نمایش}- {اندازه}</p>
</li>
</ul>
<p>در فرمول فوق، property یا خاصیت می تواند یکی از دو مقدار زیر را داشته باشد :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>مقدار m که تنظیم کننده حاشیه بیرونی یا margin است.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار p که تنظیم کننده حاشیه درونی یا padding است.</p>
</li>
</ul>
<p>همچنین مقدار sides یا جهت ها هم می تواند یکی از مقادیر زیر را داشته باشد :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>مقدار t که تنظیم کننده حاشیه درونی بالا padding-top یا حاشیه بیرونی بالا margin-top است.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار b که تعیین کننده حاشیه درونی پایین padding-bottom یا حاشیه بیرونی پایین margin-bottom است.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار l که تنظیم کننده حاشیه درونی چپ padding-left و حاشیه بیرونی چپ margin-left است.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار r که تعیین کننده حاشیه درونی راست padding-right و حاشیه بیرونی راست margin-right است.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار x که می تواند هر دو حاشیه درونی راست و چپ (padding-right و padding-left) و هر دو حاشیه بیرونی راست و چپ (margin-right و margin-left) را تنظیم نماید.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار y که می تواند هر دو حاشیه درونی بالا وپایین (padding-top و padding-bottom) و هر دو حاشیه بیرونی بالا و پایین (margin-top و margin-left) را تنظیم نماید.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار خالی، اگر مقداری برای آن تعیین نشود، حاشیه درونی (padding) و حاشیه بیرونی (margin) هر 4 طرف عنصر را به اندازه تعیین شده، به صورت یکسان تنظیم می کند.</p>
</li>
</ul>
<p>همچنین پارامتر اندازه یا Size نیز می تواند یکی از مقادیر زیر را داشته باشد :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>مقدار 0، که حاشیه درونی (padding) و حاشیه بیرونی (margin) را برابر صفر، تنظیم می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار 1، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 0.25rem یا معادل 4 پیکسل در حالتی که اندازه فوت 16 پیکسل باشد، تنظیم می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار 2، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر با مقدار 0.5rem یا معادل 8 پیکسل، در حالتی که اندازه فونت 16 پیکسل باشد، تنظیم می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار 3، که حاشیه بیرونی (margin) و حاشیه درونی (padding) عنصر را برابر مقدار 1rem یا معادل 16 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار 4، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 1.5rem یا معادل 24 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار 5، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 3rem یا معادل 48 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار auto که مارجین و padding عنصر را به صورت اتوماتیک تنظیم می کند.</p>
</li>
</ul>
<p>نکته :</p>
<p>حاشیه بیرونی یا margin می تواند مقادیر منفی نیز داشته باشد. برای این منظور بایستی عدد n را در مقابل سایز هدف، قرار دهید، به صورت زیر :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>مقدار n1، که مارجین را برابر مقدار منفی 0.25 rem یا منفی 4 پیکسل تعیین می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار n2، که مارجین را برابر مقدار منفی -0.5 rem یا منفی 8 پیکسل تعیین می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار n3، که مارجین را برابر مقدار منفی -1 rem یا منفی 16 پیکسل تعیین می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار n4، که مارجین را برابر مقدار منفی 1.5 rem یا منفی 24 پیکسل تعیین می کند.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار n5، که مارجین را برابر مقدار منفی 3 rem یا منفی 48 پیکسل تعیین می کند.</p>
</li>
</ul>
<p>مثال : در کد مثال عملی زیر، چند مثال از کلاس کاربردی ویژه تعیین فاصله را به کار برده و خروجی آن را نشان داده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p><strong>I only have a top padding (1.5rem = 24px)</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>I have a padding on all sides (3rem = 48px)</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</strong></p>
<p> </p>
<p> </p>
<p>سایر کلاس های تعیین مارجین و Padding در بوت استرپ 4، به صورت زیر هستند :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/39fzhdeh9b52.png" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/39fzhdeh9b52.png" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer" data-cke-saved-href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx"><strong>آموزش طراحی سایت</strong></a><strong> : </strong>آموزش تعیین سایه Shadow برای عنصر در Bootstrap 4:</span></p>
<p>شکل زیر، انواع حالت های ایجاد سایه برای یک عنصر را در بوت استرپ 4، نشان می دهد :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/3tgztriauy2j.jpeg" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/3tgztriauy2j.jpeg" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>از کلاس های shadow-*، می توانید برای تعیین سایه یک عنصر در Bootstrap 4 استفاده نمایید که در آن، * می تواند یکی از مقادیر زیر باشد :</p>
<ul style="margin-left: 0px; margin-right: 0px;">
<li style="list-style-type: disc;">
<p>مقدار none: در این حالت عنصر فاقد سایه یا shadow خواهد بود.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار sm: در این حالت عنصر دارای سایه ی کوچک خواهد بود.</p>
</li>
<li style="list-style-type: disc;">
<p>بدون مقدار : حالت پیش فرض بوده و عنصر دارای سایه یا shadow با اندازه معمول است.</p>
</li>
<li style="list-style-type: disc;">
<p>مقدار Lg: در این حالت، عنصر دارای سایه ی بزرگتر از حالت معمول می شود.</p>
</li>
</ul>
<p>مثال: در کد مثال عملی زیر : نحوه مختلف تعیین سایه یا shadow را برای یک عصنر آموزش داده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p><strong>No shadow</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Small shadow</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Default shadow</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Large shadow</strong></p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش ترازبندی عمومی Vertical Align در بوت استرپ 4:</strong></span></p>
<p>به وسیله کلاس های align-*، می توانید ترازبندی عمودی عناصر را در یک خط، تعیین نمایید (این کلاس ها فقط بر روی عناصر درون خطی Inline، درون خطی تمام عرض inline-block، درون خطی جدولی Inline-table و عناصر درون خانه های جدول اثر دارد). مقدار * می تواند یکی از مقادیر زیر باشد :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/rirxszahl4mz.png" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/rirxszahl4mz.png" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>مثال</p>
<p style="text-align: left;"><strong>baseline</strong></p>
<p style="text-align: left;"><strong>top</strong></p>
<p style="text-align: left;"><strong>middle</strong></p>
<p style="text-align: left;"><strong>bottom</strong></p>
<p style="text-align: left;"><strong>text-top</strong></p>
<p style="text-align: left;"><strong>text-bottom</strong></p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش ایجاد فایل های embed ریسپانسیو در Bootstrap4:</strong></span></p>
<p>در بوت استرپ 4، می توانید فایل های الحاق شده به صفحه یا embed، مثل ویدیو یا اسلاید شو را به صورت ریسپانسیو و بر حسب عرض عنصر مادر آن نمایش دهید.</p>
<p>برای این منظور بایستی کلاس embed-responsive-item را به عنصر الحاق شده (embed) مثل تگ video یا iframe اضافه کرده آن را در یک عنصر مادر یا دربرگیرنده که دارای کلاس embed-responsive-* قرار دهید. علامت * هم تعیین کننده نسبت نمایش عرض و طول مثلا 16 در 9 یا 4 در 3 و ... می باشد.</p>
<p>مثال : در کد مثال زیر، انواع حالت های نمایش یک ویدیو را با نسبت های مختلف و به صورت ریسپانسیو در عنصر مادر، نشان داده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش نمایش یا عدم نمایش آیتم (Visibility) در Bootstrap 4:</strong></span></p>
<p>به وسیله کلاس های visible (نمایان) و invisible (مخفی)، می توانید نمایش یا عدم نمایش عنصر را در بوت استرپ 4، کنترل نمایید.</p>
<p>نکته :</p>
<p>کلاس های visible و invisible، مقدار خاصیت CSS display را تغییر نمی دهند. آن ها فقط حالت عنصر را به visibility برابر visible یا hidden تغییر می دهند.</p>
<p>مثال : در کد مثال زیر، عنصر اول را نمایان و عنصر دوم را مخفی کرده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p><strong>I am visible</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>I am invisible</strong></p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش تعیین موقعیت Position عنصر در بوت استرپ 4:</strong></span></p>
<p>می توانید با استفاده از کلاسfixed-top در بوت استرپ 4 ، کاری کنید که عنصر به بالای صفحه چسبیده و همواره (حتی با اسکرول صفحه به پایین)، در جای خود ثابت نشان داده شود.</p>
<p>در کد مثال زیر، منوی navbar را با کلاس fixed-top، در بالای صفحه ثابت کرده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"><strong>...</strong></p>
<p style="text-align: left;"> </p>
<p> </p>
<p>همچنین با استفاده از کلاس fixed-bottom، می توانید یک عنصر را در پایین صفحه چسبانده و همواره (حتی با اسکرول صفحه به بالا)، به طور ثابت در انتهای صفحه نمایش دهید.</p>
<p>در کد مثال دوم، منوی navbar را به انتهای صفحه، چسبانده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"><strong>...</strong></p>
<p style="text-align: left;"> </p>
<p> </p>
<p>در حالت سوم، به وسیله کلاس sticky-top، می توانید کاری کنید تا یک عنصر، هنگامی که موقعیت اسکرول صفحه به آن رسید، به بالای صفحه چسبیده و تا زمان برگشت به موقعیت اسکرول آن، ثابت در بالای صفحه بماند.</p>
<p>نکته :</p>
<p>این کلاس در مرورگر IE 11 کار نمی کند.</p>
<p>مثال : در کد مثال زیر، به منوی navbar کلاس sticky-top داده ایم. هنگامی که کاربر به پایین اسکرول کرده و موقعیت صفحه به آن می رسد، به بالای صفحه پرش کرده و به صورت ثابت در آنجا نمایش داده می شود :</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"><strong>...</strong></p>
<p style="text-align: left;"> </p>
<p> </p>
<p>می توانید از کلاس close، برای ایجاد یک دکمه بستن استفاده کنید. معمولا از این دکمه ها در کادرهای هشدار alert یا پیام modal، استفاده می شود.</p>
<p>اگر به مثال عملی زیر دقت نمایید، ما از کاراکتر ویژه × برای ایجاد یک ضربدر (×) که نمایانگر دکمه بستن است، استفاده کرده ایم. همچنین، علامت × به صورت پیش فرض، در سمت راست عنصر قرار می گیرد :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"><strong>×</strong></p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش تعیین متن برای دستگاه های نابینایان Screen readers :</strong></span></p>
<p>می توانید از کلاس sr-only برای مخفی کردن یک عنصر یا نوشته، در کلیه دستگاه ها و صفحه نمایش ها به جز صفحه نمایش های Screen Reader که مختص نابینایان است، استفاده نمایید. همانند کد مثال عملی زیر :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"><strong>I will be hidden on all screens except for screen readers.</strong></p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش کار با رنگ ها Colors در بوت استرپ 4:</strong></span></p>
<p>همانطور که در بخش های آموزشی قبل توضیح دادیم، بوت استرپ دارای یک سری کلاس متنی رنگی ویژه است که بر حسب رنگ آن ها، مفهوم خاصی را به کاربر القا کرده و برای تعیین رنگ نوشته و یا پس زمینه بسیار مناسب هستند.</p>
<p>این کلاس ها به همراه توضیح مختصری راجع به آن ها، عبارتند از :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/hlbl0annzbyq.png" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/hlbl0annzbyq.png" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<h2><strong>Contextual Colors</strong></h2>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Use the contextual classes to provide "meaning through colors":</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text is muted.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text is important.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text indicates success.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text represents some information.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text represents a warning.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text represents danger.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Secondary text.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text is dark grey.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Default body color (often black).</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text is light grey (on white background).</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text is white (on white background).</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p> </p>
<p>کلاس های رنگی متنی ویژه بوت استرپ 4 را می توانید درون لینک ها (تگ a یا Link) نیز به کار ببرید. در این صورت، در هنگام عبور موس از روی نوشته (hover)، رنگ نوشته لینک کمی تیره تر هم می شود. همانند مثال عملی زیر :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<h2><strong>Contextual Link Colors</strong></h2>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Hover over the links.</strong></p>
<p> </p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Muted link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Primary link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Success link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Info link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Warning link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Danger link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Secondary link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Dark grey link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Body/black link.</a></strong></p>
<p style="text-align: left;"><strong><a href="#" data-cke-saved-href="#">Light grey link.</a></strong></p>
<p style="text-align: left;"> </p>
<p> </p>
<p>همچنین می توانید با استفاده از کلاس های text-black-50 و text-white-50 به نوشته های سیاه یا سفید، پس زمینه و مقدار وضوح 50 درصد بدهید. نحوه کاربرد این کلاس ها را در کد مثال عملی زیر، نشان داده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<h2><strong>Opacity Text Colors</strong></h2>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Black text with 50% opacity on white background</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>White text with 50% opacity on black background</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش کار با رنگ های پس زمینه background Colors در بوت استرپ 4:</strong></span></p>
<p>از کلاس های متنی رنگی ویژه بوت استرپ، برای تعیین رنگ پس زمینه عناصر می توانید استفاده نمایید. این کلاس ها استفاده از رنگ های محبوب را سریع کرده و همچنین بر حسب رنگ خود، پیام های مفهومی به کاربران القا می کنند. فقط توجه داشته باشید که کلاس های رنگ پس زمینه، رنگ نوشته عنصر را تعیین نمی کنند، بنابراین لازم است تا گاهی آن ها را به همراه یک کلاس text-* برای تعیین رنگ نوشته به کار ببرید.</p>
<p>کلاس های رنگی مخصوص پس زمینه در بوت استرپ 4 به همراه توضیح مختصر آن ها به شرح زیر هستند :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/4gb0vbqu3ego.png" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/4gb0vbqu3ego.png" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>مثال : در کد مثال عملی زیر، انواع کلاس های مختلف رنگی بوت استرپ 4 برای پس زمینه را در عمل به کار برده ایم :</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>مثال</p>
<p style="text-align: left;"> </p>
<p> </p>
<p style="text-align: left;"> </p>
<h2><strong>Contextual Backgrounds</strong></h2>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Use the contextual background classes to provide "meaning through colors".</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Note that you can also add a .text-* class if you want a different text color:</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text is important.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text indicates success.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text represents some information.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text represents a warning.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>This text represents danger.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Secondary background color.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Dark grey background color.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p><strong>Light grey background color.</strong></p>
<p> </p>
<p style="text-align: left;"> </p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>بررسی کلاس کار با متن و فن چاپ در بوت استرپ 4 :</strong></span></p>
<p>همانطور که در بخش آموزش کار با متن و فن چاپ در Bootstrap 4 نشان داده ایم، از کلاس های ویژه typography برای کار با متن و نوشته در بوت استرپ 4 استفاده می شود. لیست زیر، تمامی این کلاس ها را به ترتیب معرفی کرده است :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/1fmcsbgxbr0u.png" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/1fmcsbgxbr0u.png" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/qlu3e37zulyc.png" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/qlu3e37zulyc.png" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><span style="font-size: 18px;"><strong>آموزش کار با عناصر تمام عرض (Block) در بوت استرپ 4:</strong></span></p>
<p>برای این که یک عنصر به صورت تمام عرض در صفحه یا عنصر دربرگیرنده آن نمایش داده شود، بایستی کلاس d-block را به آن اضافه کنید. همچنین می توانید از کلاس های d-*-block برای کنترل نمایش تمام عرض عنصر در هر یک از سایزهای صفحه نمایش نیز استفاده کنید که در آن * می تواند یکی از مقادیر sm، md، Lg یا xl باشد.</p>
<p>مثال : در کد مثال عملی زیر، یک عنصر تمام عرض (Block) و چند عنصر دیگر که در صفحه نمایش های مختلف تمام عرض هستند را ایجاد کرده ایم :</p>
<p>مثال</p>
<p style="text-align: left;"><strong>d-block</strong></p>
<p style="text-align: left;"><strong>d-sm-block</strong></p>
<p style="text-align: left;"><strong>d-md-block</strong></p>
<p style="text-align: left;"><strong>d-lg-block</strong></p>
<p style="text-align: left;"><strong>d-xl-block</strong></p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;"><strong>معرفی سایر کلاس های نمایش Display عنصر در Bootstrap 4 :</strong></span></p>
<p>سایر کلاس های کنترل نمایش (Display) عناصر در بوت استرپ 4 را در جدول زیر معرفی کرده ایم :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/dujr5xen8dhl.png" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/dujr5xen8dhl.png" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer" data-cke-saved-href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx"><strong>آموزش طراحی سایت</strong></a><strong> : </strong>آموزش کار با Flex در Bootstrap 4 :</p>
<p>می توانید از کلاس flex-* برای کنترل نحوه نمایش و قالب بندی (layout) یک عنصر توسط FlexBox، استفاده کنید.</p>
<p>برای دریافت اطلاعات بیشتر، به بخش آموزش کاربرد FlexBox در سایت تحلیل داده بروید.</p>
<p>علامت * در کلاس فوق می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد که تعیین کننده سایز صفحه نمایش است.</p>
<p>در عکس زیر ، مثال های مختلفی از تراز بندی عناصر با FlexBox را نشان داده ایم :</p>
<p><span tabindex="-1" contenteditable="false"><img src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/sijbdwnq12uf.jpeg" alt="" data-widget="image" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/ugje4a2xzmyt/sijbdwnq12uf.jpeg" /><span style="background: rgba(220,220,220,0.5); background-image: url('https://www.blogfa.com/Desktop/editor/9/plugins/widget/images/handle.png'); display: none;"><img title="کلیک و کشیدن برای جابجایی" draggable="true" width="15" height="15" data-cke-saved-src="" /></span><span title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p><span style="font-size: 18px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer" data-cke-saved-href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx"><strong>آموزش طراحی سایت</strong></a><strong> ادامه دارد</strong></span></p>
<p></p>
</div>
<div class="post-tags"> <span class="tag"> </span>
برچسب ها: <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت/">آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحی+سایت/">دوره طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+آموزش+طراحی+سایت/">دوره آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+بوت+استرپ+4/">آموزش بوت استرپ 4</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+Bootstrap+4/">آموزش Bootstrap 4</a>,
</div>
</div>
<div class="post-info">
<ul>
<li>
<div class="postlike"><a href="https://tahlildadeh.farsiblog.com/prate/upcUbnluFPnnmR/" class="uplike"><span class="like-up"></span></a><span class="up-result"><span class="fbrateQuery fbrateUp" id="fbrate_upcUbnluFPnnmR">۰</span></span><a href="https://tahlildadeh.farsiblog.com/prate/downcUbnluFPnnmR/" class="downlike"><span class="like-down"></span> </a><span class="down-result"><span class="fbrateQuery fbrateDown" id="fbrate_downcUbnluFPnnmR">۰</span></span></div>
</li>
<li> <span class="postcmnt"> <a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-Bootstrap-4/#comments">۰ نظر</a></span> </li>
</ul>
</div>
</div><div class="post">
<div class="post-title"> <span class="post-title-icon"></span>
<h2><a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-اعداد-در-جاوا-اسکریپت/" target="_blank"> آموزش طراحی سایت-اعداد در جاوا اسکریپت </a></h2>
</div>
<div class="post-body">
<div class="post-details"><span class="postauthor">پیمان کلانتری</span> <span class="postdate"> پنجشنبه ۰۳ مهر ۹۹ | ۱۴:۳۲ </span> <span class="postviews"> ۴۷ بازديد </span> </div>
<div class="post-cnt">
<span data-cke-copybin-start="1"></span>
<p><span id="cke_bm_82S" style="display: none;"> </span> </p>
<p><span style="font-size: 16px;"><strong>سلام عزیزان با آموزش جاوا اسکریپت از دوره<a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"> آموزش طراحی سایت</a> در خدمت شما دوستان هستیم</strong></span></p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;">آموزش اعداد در جاوا اسکریپت</span></p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>اعداد در جاوا اسکریپت</p>
<p><span style="font-size: 14px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"><strong>آموزش طراحی سایت</strong></a><strong> : </strong>زبان جاوا اسکریپت فقط یک نوع متغیر عددی دارد. متغیرهای عددی می توانند از نوع عددی یا اعشاری باشند.</span></p>
<p>مثال:</p>
<p style="text-align: left;"><strong>var x = 34.00; // A number with decimals</strong></p>
<p style="text-align: left;"><strong>var y = 34; // A number without decimals</strong></p>
<p>اعداد بسیار کوچک یا کوچک را می توان با نماد علمی نوشت</p>
<p>مثال:</p>
<p style="text-align: left;"><strong>var x = 123e5; // 12300000</strong></p>
<p style="text-align: left;"><strong>var y = 123e-5; // 0.00123</strong></p>
<p>اعداد جاوا اسکریپت همیشه 64 بیتی و با ممیز شناور (در مبنای 10) هستند. برخلاف بسیاری از زبان های برنامه نویسی، جاوا اسکریپت انواع عددی از قبیل : integer (عدد صحیح)، short، long و floating-point تعریف نمی کند و این نوع اعداد در جاوا اسکریپت استفاده نمی شوند. در جاوا اسکریپت اعداد همیشه به صورت ممیز شناور با دو رقم اعشار (double precision floating-point number) ذخیره می شوند که در حقیقت دنبال رو استاندارد بین المللی IEEE 754 می باشد. در این نوع قالب دهی یا فرمت اعداد در 64 بیت ذخیره می گردند، به گونه ای که کسر (fraction) در بیت های 0 تا 51، نما یا توان (exponent) در بیت های 52 تا 62 و علامت (sign) در بیت 63 ذخیره می گردد.</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="تصویر" data-cke-widget-id="1"><img class="cke_widget_element" src="https://files.virgool.io/upload/users/138093/posts/xm62h1fjaeyv/0fwgpbvounxv.png" alt="" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/xm62h1fjaeyv/0fwgpbvounxv.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Ffiles.virgool.io%2Fupload%2Fusers%2F138093%2Fposts%2Fxm62h1fjaeyv%2F0fwgpbvounxv.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22%22%2C%22height%22%3A%22%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" /><span class="cke_image_resizer" title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>دقت اعشار (precision)</p>
<p>اعداد صحیح integer در حداکثر 15 رقم و همیشه به صورت دقیق مطرح می شوند.</p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p> </p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه یک</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>var x = 999999999999999;</strong></p>
<p style="text-align: left;"><strong>var y = 9999999999999999;</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = x + "<br />" + y;</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<p style="text-align: left;"> </p>
<p>حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه دو</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>var x = 0.2 + 0.1;</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<p style="text-align: left;"> </p>
<p>به منظور حل مشکل بالا، انجام عمل ضرب و تقسیم کمک زیادی می کند.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه سه</p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>var x = (0.2 * 10 + 0.1 * 10) / 10;</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"><strong>آموزش طراحی سایت</strong></a><strong> : </strong>اعداد شانزده شانزدهی (hexadecimal)</span></p>
<p>جاوا اسکریپت ثابت های عددی (اعداد ثابتی) را که با 0x شروع می شوند به عنوان اعداد در مبنای شانزده در نظر می گیرد (تفسیر می کند).</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه چهار</p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<p>توجه:</p>
<p>هیچگاه یک عدد را با صفر مقدم ننویسید (مانند این مثال 07(.</p>
<p>بعضی از ویرایش های جاوا اسکریپت یک عدد را در صورتی که با صفر مقدم نوشته شوند، به صورت octal / هشت هشتی تفسیر می کند. به صورت پیش فرض، جاوا اسکریپت اعداد را به صورت اعشاری و در مبنای 10 نمایش می دهد، اما شما می توانید با استفاده از تابع toString() اعداد را به صورت مبنای 16، مبنای 8 یا مبنای 2 (دودئی) (به عنوان خروجی) نمایش دهید.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه پنج</p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>var myNumber = 128;</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = "128 = " +</strong></p>
<p style="text-align: left;"><strong>myNumber + " Decimal, " +</strong></p>
<p style="text-align: left;"><strong>myNumber.toString(16) + " Hexadecimal, " +</strong></p>
<p style="text-align: left;"><strong>myNumber.toString(8) + " Octal, " +</strong></p>
<p style="text-align: left;"><strong>myNumber.toString(2) + " Binary."</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p><span style="font-size: 18px;"><strong>Infinity (مقدار بی نهایت)</strong></span></p>
<p>چنانچه عددی را که بزرگتر از بیشینه ی حد ممکن اعداد در جاوا اسکریپت است محاسبه کنید، مقدار infinity برگردانده می شود.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه شش</p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>var myNumber = 2;</strong></p>
<p style="text-align: left;"><strong>var txt = "";</strong></p>
<p style="text-align: left;"><strong>while (myNumber != Infinity) {</strong></p>
<p style="text-align: left;"><strong>myNumber = myNumber * myNumber;</strong></p>
<p style="text-align: left;"><strong>txt = txt + myNumber + "<br />";</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = txt;</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<p>در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه هفت</p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>var x = 2 / 0;</strong></p>
<p style="text-align: left;"><strong>var y = -2 / 0;</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = x + "<br />" + y;</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<p>توضیح : infinity یک عدد است : typeOf infinity یک عدد برمی گرداند.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه هشت</p>
<p style="text-align: left;"><strong>function myFunction() {</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = typeof Infinity;</strong></p>
<p style="text-align: left;"><strong>}</strong></p>
<p><span style="font-size: 18px;"><strong>عبارت NaN- عبارت رزرو شده ی Not a Number</strong></span></p>
<p>عبارت NaN یک کلمه ی رزرو شده (reserved word) است که بیان می کند یک مقدار از نوع عدد نیست. چنانچه سعی کنید با رشته ی غیر عددی عملیات محسابه ی انجام دهید، جاوا اسکریپت عبارت رزرو شده ی Not a Number را بر می گرداند.</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه نه</p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = 100 / "Apple"</strong></p>
<p>اما چنانچه رشته دربردارنده ی یک مقدار عددی باشد، نتیجه نیز یک عدد خواهد بود.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه ده</p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = 100 / "10";</strong></p>
<p>می توانید از تابع سراسری (global function) isNaN() برای کشف این مسئله که آیا مقدار یک عدد است یا خیر استفاده کنید.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه یازده</p>
<p style="text-align: left;"><strong>var x = 100 / "Apple";</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = isNaN(x)</strong>;</p>
<p>اگر در محاسبات ریاضی از NaN استفاده کنید، نتیجه نیز NaN خواهد بود.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه دوازده</p>
<p style="text-align: left;"><strong>var x = NaN;</strong></p>
<p style="text-align: left;"><strong>var y = 5;</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = x + y</strong>;</p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p>نمونه سیزده</p>
<p style="text-align: left;"><strong>var x = NaN;</strong></p>
<p style="text-align: left;"><strong>var y = "5";</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = x + y;</strong></p>
<p>دستور NaN یک عدد است : typeOf NaN عدد بازمی گرداند.</p>
<p>مثال:</p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h3>
<p>نمونه چهارده</p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = typeof NaN;</strong></p>
<p>اعداد می توانند شی باشند. به طور معمول اعداد مقادیر اولیه ی هستند که از literal ها ایجاد می گردند.</p>
<p style="text-align: left;"><strong>var x = 123</strong></p>
<p>اما اعداد را می توان با استفاده از کلیدواژه ی new به عنوان شی (object) تعریف کرد، بدین ترتیب</p>
<p style="text-align: left;"><strong>var y = new Number(123)</strong></p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه پانزده</p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = typeof x + "<br />" + typeof y;</strong></p>
<p>از ایجاد شی number خودداری کنید، زیرا که سرعت اجرا را کاهش داده و عوارض جانبی فراوانی را منجر می شوند. عملگر == برای اعدادی بکار می رود که از لحاظ مقدار برابر باشند.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه شانزده</p>
<p style="text-align: left;"><strong>var x = 500; // x is a number</strong></p>
<p style="text-align: left;"><strong>var y = new Number(500); // y is an object</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = (x == y);</strong></p>
<p> </p>
<p>توجه داشته باشید که در صورت استفاده از عملگر === دیگر اعداد با مقدار یکسان مساوی یا برابر محسوب نمی شوند زیرا که این عملگر انتظار دارد اعداد هم از نظر نوع و هم از نظر مقدار با هم برابر باشند.</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه هفده</p>
<p style="text-align: left;"><strong>var x = 500; // x is a number</strong></p>
<p style="text-align: left;"><strong>var y = new Number(500); // y is an object</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = (x === y);</strong></p>
<p>بخاطر داشته باشید که مقایسه ی اشی با هم امکان پذیر نمی باشد.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه هجده</p>
<p style="text-align: left;"><strong>var x = 500; // x is a number</strong></p>
<p style="text-align: left;"><strong>var y = new Number(500); // y is an object</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = (x === y);</strong></p>
<h3 style="margin-left: 0px; margin-right: 0px; text-align: left;"> </h3>
<p><span style="font-size: 18px;"><strong>خواص (properties) و متدهای مربوط به اعداد در جاوا اسکریپت</strong></span></p>
<p>مقادیر اولیه ی مثل 3.14 یا 2014، نمی توانند متد یا خاصیت داشته باشند (زیرا که در اصل این ها شی نیستند که بتوانند خاصیت یا متد داشته باشند). اما در رابطه با جاوا اسکریپت این امر صادق نیست. به این خاطر که زبان بیان شده هنگام اجرای متدها و خصوصیت ها با مقادیر اولیه به مثابه ی شی برخورد می کند. از این رو مقادیر اولیه همچنان قادر هستند در زبان جاوا اسکریپت متد و خاصیت داشته باشند.</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="تصویر" data-cke-widget-id="0"><img class="cke_widget_element" src="https://files.virgool.io/upload/users/138093/posts/xm62h1fjaeyv/znfsahu3vgbk.png" alt="" data-cke-saved-src="https://files.virgool.io/upload/users/138093/posts/xm62h1fjaeyv/znfsahu3vgbk.png" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Ffiles.virgool.io%2Fupload%2Fusers%2F138093%2Fposts%2Fxm62h1fjaeyv%2Fznfsahu3vgbk.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22%22%2C%22height%22%3A%22%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" /><span class="cke_image_resizer" title="کلیک و کشیدن برای تغییر اندازه"></span></span></p>
<p> </p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه نوزده</p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = Number.MAX_VALUE;</strong></p>
<p>خاصیت های مربوط به اعداد در جاوا اسکریپت متعلق به دبرگیرنده یا wrapper شی number هستند که خود Number نامیده می شوند. دسترسی به خاصیت های نام برده تنها از این طریق ممکن می باشد.</p>
<p style="text-align: left;"><strong>Number.MAX_VALUE</strong></p>
<p>استفاده از myNumber.MAX_VALUE در جایی که myNumber یک متغیر، عبارت یا مقدار است، باعث برگردانده شدن undefined می شود.</p>
<p>مثال:</p>
<h2 style="margin-left: 0px; margin-right: 0px; text-align: start;"> </h2>
<p>نمونه بیست</p>
<p style="text-align: left;"><strong>var x = 6;</strong></p>
<p style="text-align: left;"><strong>document.getElementById("demo").innerHTML = x.MAX_VALUE</strong>;</p>
<p><span style="font-size: 18px;"><a rel="nofollow" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx" target="_blank" rel="noopener noreferrer"><strong>آموزش طراحی سایت</strong></a><strong> ادامه دارد</strong></span></p>
<span data-cke-copybin-end="1"></span>
</div>
<div class="post-tags"> <span class="tag"> </span>
برچسب ها: <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت/">آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحی+سایت/">دوره طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+جاوا+اسکریپت/">آموزش جاوا اسکریپت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/فیلم+آموزش+طراحی+سایت/">فیلم آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+وب/">آموزش طراحی وب</a>, <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+javascript/">آموزش javascript</a>,
</div>
</div>
<div class="post-info">
<ul>
<li>
<div class="postlike"><a href="https://tahlildadeh.farsiblog.com/prate/upJybxhuaVnCiz/" class="uplike"><span class="like-up"></span></a><span class="up-result"><span class="fbrateQuery fbrateUp" id="fbrate_upJybxhuaVnCiz">۰</span></span><a href="https://tahlildadeh.farsiblog.com/prate/downJybxhuaVnCiz/" class="downlike"><span class="like-down"></span> </a><span class="down-result"><span class="fbrateQuery fbrateDown" id="fbrate_downJybxhuaVnCiz">۰</span></span></div>
</li>
<li> <span class="postcmnt"> <a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-اعداد-در-جاوا-اسکریپت/#comments">۱ نظر</a></span> </li>
</ul>
</div>
</div>
<!--- end post --->
<div class="pagination">
</div>
<!--- end pagenavi --->
<!--- Start PAGES --->
<!--- end PAGES --->
<!--- end comment block --->
</div>
<!--- end content --->
<div class="row">
<div class="pc-18">
<div class="menu-block">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> پربحث ترين مطالب</h3>
</div>
<div class="menu-list">
<ul>
<li><a href="https://tahlildadeh.farsiblog.com/post/جاوااسکریپت-در-html/">جاوااسکریپت در html</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-لینک-ایمیل-در-HTML/">آموزش لینک ایمیل در HTML</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-دستورات-شرطي-در-جاوااسکریپت/">آموزش طراحی سایت-دستورات if .. else در جاوا اسکریپت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-ارسال-ایمیل-با-پایتون/">آموزش ارسال ایمیل با پایتون</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-اعداد-در-جاوا-اسکریپت/">آموزش طراحی سایت-اعداد در جاوا اسکریپت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-پایتون-رایگان-/">آموزش پایتون رایگان</a></li>
</ul>
</div>
</div>
<!--- end menubox --->
</div>
<div class="pc-18">
<div class="menu-block lastcmnt">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3>آخرين نظرات</h3>
</div>
<div class="menu-list">
<ul>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-Dropdown-بوت-استرپ-4/">لیست قطعی بهترین فیلم های کره ای (2010 تا 2..</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-طراحی-سایت-بوت-استرپ-4/">توضیحاتی راجب Bootstrap
بوت‌استرپ مجم..</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-Bootstrap-کار-با-List-Group-در-بوت-استرپ-4/">توضیحاتی راجب Bootstrap
بوت‌استرپ مجم..</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-Bootstrap/">توضیحاتی راجب Bootstrap
بوت‌استرپ مجم..</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/post/آموزش-جاوا-آموزش-متغیر-Double-در-JAVA/">کلوژر در جاوا اسکریپت: کاربرد آنها و آموزش ..</a></li>
</ul>
</div>
</div>
<!--- end menubox --->
</div>
</div>
</div>
<!--- end col of posts --->
<div class="pc-8 pc-pull-20">
<div class="sidebar">
<div class="menu-block blogprofile">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> درباره من</h3>
</div>
<div class="menu-cnt">
<center>
<img src="https://tahlildadeh.farsiblog.com/uspace/t/tahlildadeh/1570543404avatar.jpg"/>
</center>
آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است </div>
</div>
<!--- end menubox --->
<div class="menu-block">
<div class="menu-cnt">
<center>
<div class="todaytime"> <span class="tticon"> جمعه ۲۱ اردیبهشت ۰۳ </span> </div>
</center>
</div>
</div>
<!--- end menubox --->
<div class="menu-block catbox">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> موضوعات</h3>
</div>
<div class="menu-cnt">
<ul>
<li ><a href="https://tahlildadeh.farsiblog.com/category/آموزش react native/"> آموزش react native <span>(7)</span> </a>
<ul>
</ul>
</li>
<li ><a href="https://tahlildadeh.farsiblog.com/category/آموزش طراحی سایت/"> آموزش طراحی سایت <span>(61)</span> </a>
<ul>
</ul>
</li>
<li ><a href="https://tahlildadeh.farsiblog.com/category/آموزش سی شارپ/"> آموزش سی شارپ <span>(9)</span> </a>
<ul>
</ul>
</li>
<li ><a href="https://tahlildadeh.farsiblog.com/category/آموزش جاوا/"> آموزش جاوا <span>(9)</span> </a>
<ul>
</ul>
</li>
<li ><a href="https://tahlildadeh.farsiblog.com/category/آموزش پایتون/"> آموزش پایتون <span>(7)</span> </a>
<ul>
</ul>
</li>
<li ><a href="https://tahlildadeh.farsiblog.com/category/آموزش داده کاوی و یادگیری ماشین/"> آموزش داده کاوی و یادگیری ماشین <span>(0)</span> </a>
<ul>
</ul>
</li>
</ul>
</div>
</div>
<!--- end menubox --->
<div class="menu-block authorbox">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3>نويسندگان</h3>
</div>
<div class="menu-list">
<ul>
<li><a href="https://tahlildadeh.farsiblog.com/author/tahlildadeh/"> پيمان كلانتري <span>(۹۴)</span></a></li>
</ul>
</div>
</div>
<!--- end menubox --->
<div class="menu-block archivebox">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> آرشيو</h3>
</div>
<div class="menu-list">
<ul>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1398/07/"> مهر ۱۳۹۸ <span>(۹)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1398/08/"> آبان ۱۳۹۸ <span>(۵)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1398/09/"> آذر ۱۳۹۸ <span>(۱۶)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1398/10/"> دی ۱۳۹۸ <span>(۱۴)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1399/03/"> خرداد ۱۳۹۹ <span>(۸)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1399/04/"> تیر ۱۳۹۹ <span>(۵)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1399/05/"> مرداد ۱۳۹۹ <span>(۱)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1399/06/"> شهریور ۱۳۹۹ <span>(۱)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1399/07/"> مهر ۱۳۹۹ <span>(۵)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1399/08/"> آبان ۱۳۹۹ <span>(۶)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1399/09/"> آذر ۱۳۹۹ <span>(۱)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1400/02/"> اردیبهشت ۱۴۰۰ <span>(۷)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1400/03/"> خرداد ۱۴۰۰ <span>(۱۰)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1400/04/"> تیر ۱۴۰۰ <span>(۵)</span></a></li>
<li><a href="https://tahlildadeh.farsiblog.com/archive/1400/05/"> مرداد ۱۴۰۰ <span>(۱)</span></a></li>
</ul>
</div>
</div>
<!--- end menubox --->
<div class="menu-block tagsbox">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> برچسب ها</h3>
</div>
<div class="menu-cnt">
<ul>
<li><a href="https://tahlildadeh.farsiblog.com/tag/فیلم+آموزش+برنامه+نویسی/">فیلم آموزش برنامه نویسی</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/یادگیری+طراحی+وب/">یادگیری طراحی وب</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/طراحی+سایت+دیجی+کالا/">طراحی سایت دیجی کالا</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+HTML5/">آموزش HTML5</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+سئو+در+طراحی+سایت/">آموزش سئو در طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/فیلم+اموزش+طراحی+سایت/">فیلم اموزش طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/دوره+آمورش+طراحی+سایت/">دوره آمورش طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+جامع+طراحی+سایت/">آموزش جامع طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/طراحی+وب+سایت/">طراحی وب سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+پروژه+محور+طراحی+وب+سایت/">آموزش پروژه محور طراحی وب سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/دوره+جامع+آموزش+طراحی+سایت/">دوره جامع آموزش طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزشگاه+تحلیل+داده/">آموزشگاه تحلیل داده</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+حضوری+طراحی+سایت/">آموزش حضوری طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+برنامه+تحت+وب/">آموزش طراحی برنامه تحت وب</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+آنلاین+و+حضوری+طراحی+سایت/">آموزش آنلاین و حضوری طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/cs/">cs</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/دروه+آموزش+طراحی+سایت/">دروه آموزش طراحی سایت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/آموزش+افزونه+نویسی+برای+پایتون+با+زبان+C/">آموزش افزونه نویسی برای پایتون با زبان C</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/فيلم+آموزش+طراحي+سايت/">فيلم آموزش طراحي سايت</a></li>
<li><a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحي+سايت+تحليل+داده/">دوره طراحي سايت تحليل داده</a></li>
</ul>
</div>
</div>
<!--- end menubox --->
<!--- end menubox --->
</div>
<!--- end sidebar ---> </div>
<!--- end col of right sidebar --->
<div class="pc-8">
<div class="sidebar">
<farsistat>
<div class="menu-block blogstats">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> خلاصه آمار</h3>
</div>
<div class="menu-cnt">
<ul>
<li>مجموع نمایش <span>۲۰,۳۰۴</span> </li><li>مجموع بازدید <span>۱۳,۰۲۴</span> </li><li>بازدید امروز <span>۷</span> </li><li>بازدید دیروز <span>۱۴</span> </li><li>مجموع مطالب <span>۹۴</span> </li><li>مجموع نظرات <span>۲۱</span> </li><li>افراد آنلاین <span>۱</span> </li>
</ul>
</div>
</div></farsistat>
<!--- end menubox --->
<!--- end menubox --->
<div class="menu-block socialbox">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> من در شبكه هاي اجتماعي </h3>
</div>
<div class="menu-cnt">
<ul>
<li><a href="https://tahlildadeh.farsiblog.com/rss/" id="social-rss" target="_blank"></a></li>
</ul>
</div>
</div>
<!--- end menubox --->
<!--- end menubox --->
<div class="menu-block linkbox">
<div class="menu-title"> <span class="menu-title-icon"></span>
<h3> پيوندها</h3>
</div>
<div class="menu-list">
<ul>
<li><a href="https://salemziba.com/women-kids/pain-in-lower-part-of-abdomen-in-women/" target="_blank">14 دليل درد زير شكم زنان و 6 روش درمان خانگي</a></li><li><a href="https://bestkid.ir/آموزش-کودکان/سلامت-کودکان/علل-دیر-حرف-زدن-کودک.html" target="_blank">۷ علت اصلي دير حرف زدن كودكان +نكات مهم و كاربردي</a></li><li><a href="https://honarfardi.com/women-skills/makeup-tutorial/primer-cons-and-pros/" target="_blank">معايب و مزاياي پرايمر و تفاوت آن با كانسيلر</a></li><li><a href="https://charbzaban.com/مهاجرت-توریست/توریستی-ترین-شهرهای-جهان.html" target="_blank">توريستي ترين شهرهاي جهان در همه قاره ها (قبل و بعد از كرونا)</a></li><li><a href="https://www.farsiblog.com/" target="_blank">ساخت وبلاگ</a></li>
</ul>
</div>
</div>
<!--- end menubox --->
<!--- end menubox --->
<!--- end menubox --->
<!--- end menubox --->
</div>
<!--- end sidebar ---> </div>
<!--- end col of left sidebar --->
</div>
<!--- end row of main content --->
<div class="btmbar">
<div class="row">
<div class="pc-36">
<div class="footer">
<div class="row">
<div class="pc-18">
<div class="copyright"> <a href="http://farsiblog.com" target="_blank" title="فارسي بلاگ" class="fblogo"></a> <a href="http://farsiblog.com" target="_blank">فارسي بلاگ</a> : رسـانه وبلاگ نويسان حرفـه اي </div>
</div>
<div class="pc-18">
<div class="dashboard">
<ul>
<li><a href="http://farsiblog.com/User/Template/3995/" target="_blank" title="قالب" id="blogtemp-ico"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- end footer --->
</div>
<!--- end all of container --->
</body>
</html>