Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
67 Cards in this Set
- Front
- Back
|
CdN |
Content delivery network شبکه تحویل محتوا فرض کنید سرور اصلی شما در تهران است و کاربری از استان اصفهان میخواهد سایت شما رو باز کند وقتی درخواست میفرستد درخواست به سرور شما در تهران فرستاده میشود که موقعیت مکانی ور سرعت ارسال اطلاعات تاثیر دارد وقتی شما از cdn استفاده میکنید شبکه توزیع شده در کل کشور دارید که cdn شما یک سرور توی هر شهر دارد سرور تهران میکه فلان فایلها در سرور اصفهان است و از اونجا لود میکنه شرط استفاده از cdnانلاین بودن پروژه شماست |
|
|
سایت responsive |
سایت واکنش گرا یا سایت ریسپانسیو (responsive) سایتی است که با ابعاد و رزولوشن دستگاههای مختلف سازگاری دارد و کاربران بدون توجه به اینکه صفحه نمایش دستگاهشان کوچک باشد (مثل اکثر گوشی های هوشمند موبایل) یا نمایشگری متوسط(مثل لپ تاپ وتبلت) و یا نمایشگرهای بزرگ (کامپیوترهای رومیزی و ال سی دی های بزرگ)داشته باشند، میتوانند به راحتی سایت را بررسی کنند و دیگر نیازی نیست اندازه صفحه را تغییر دهند که سایت به صورت کامل دیده شود.امروزه کاربران از نمایشگرهای مختلف در ابعاد بزرگ و کوچک برای دستیابی به صفحات اینترنت استفاده میکنند. بنابراین سایتی میتواند در فضای وب موفق باشد که بتواند به همه کاربران مراجعه کننده به سایت خدمات مناسب ارائه دهد و نمایش سایت به صورت کامل باشد .و در صفحات غیر responsiveاسکرول بار فعال میشود.بوت استرپ مبنای طراحی اش موبایل first است اول صفحه نمایش موبایل رو درست کنیم |
|
|
بخش ریبوت در bootstrap |
وقتی شما از ریبوت استفاده میکنید یک سری style جایگزین style های پیش فرض میشود که هم جالبترند هم در همه مرورگرها به یک صورت نمایش داده شوند |
|
|
پیکسل |
واحدهای ثابتی که در رسانه های تصویری استفاده میشوند ابعاد یک پیکسل در تمامی دستگاهها یکسان خواهد بود |
|
|
واحد em |
اندازه ابعاد حرف m انگلیسی در فونت جاری اگر فونت ۱۶ پیکسل باشه یک em برابر 16*16 پیکسله که معنیش اینه که اگر حرف انگلیسی رو توی یه مربع بندازیم اون مربع ۱۶ در ۱۶ پیکسله .جالبی em اینه که اندازه این مربع رو براساس فونت المان والد در نظر میگیره مثلا اگر شما یک div داشته باشید که فونتش ۲۰px و داخل اون div یک p بگذارید و سایزش رو بنویسید ۲em فونتش میشه ۴۰ پیکسل |
|
|
واحد Rem |
به معنای root EM می باشد یک واحد برابر سایز فونت root است .یعنی ۱rem همیشه برابر است با fontsizeکه در html تعریف شده همیشه ۱rem برابر 16px مگر سایز فونت html تغییر یابد 2rem=2×root fontsize html is the root of page در همه مرورگرها فونت ریشه بدون دستکاری 16 است |
|
|
واحد درصد |
div{ Width :90% } دارای عرضی برابر نود درصد عنصر پدر خود خواهد بود |
|
|
Css box model |
Css box model is essentially a box that wraps around every html element It consists of margins,borders,padding and actual content |
|
|
تفاوت box در حالت default و bootstap |
در حالت default به content فقط اعمال میشود ولی در حالت bootstrap کل box را دربرمیگیرد |
|
|
اندازه هرem |
برای دانستن اندازه هر em در انتخابگر به ویژگی fontsize رجوع کردیم ولی اگر این ویژگی برای انتخابگر تعیین نشده بود چی؟کافی است به ویژگی،fontsize پدر آن عنصر رجوع کنیم و همینطور به بالا حرکت میکنیم تا در اجدادش عنصری پیدا کنیم که ویژگی fontsize دارد و اگر عنصری پیدا نشد به ریشه html میرسیم |
|
|
عناصر معنایی html |
عناصر ساختاری دسته بندی محتواییheader عناصر متنی مفهوم دادن به محتوا p عناصر خطی متنی a عناصر عمومی وقتی هیچ یک مناسب نبود عنصر بی معنی بلاکی div عنصر بی معنی خطی span |
|
|
چه چیزهایی در html توسط مرورگر نادیده گرفته میشوند |
تگها فضای خالی خط جدید خط خالی فرورفتگی کامنت ها |
|
|
عنصر ریشه یا جد در html |
<html> |
|
|
رفتار گرید بر چه اساس تغییر میکند |
با تغییر resolution رفتار grid تغییر میکند رزولوشن همان breakpoint یا media query در css است |
|
|
Horizantal |
افقی |
|
|
در گریدها col به چه معناست |
عدد بعد از col در هر کلاس میشود تعداد ستون‌هایی که شما در نظر میگیرید برای آن المان |
|
|
تعداد حداکثر col در grid و عرضgutter |
12 هر col دارای margin برابر ۱۵ px میباشد و gutter درنهایت ۳۰px میباشد |
|
|
Col lg 4 یعنی چه |
یعنی میخواهید از یک سوم صفحه بزرگ مانند لپ تاپ استفاده کنید در حالت lg از یک سوم صفحه استفاده شود |
|
|
کلاس *-*-col چه چیزی را نشان میدهد |
کلاس col نشان میدهد که از ۱۲ ستون چه تعداد ستون را میخواهید استفاده کنید مثلا colsm6یعنی میخواهید از نیمی از صفحه کوچک مانند موبایل استفاده کنید First *needs to be replaced by the breakpoint specifier such as xs-sm-md-lg-xl Second * needs to be filled with column span size .sum of the columns has to be equal to 12 |
|
|
مفهوم طراحی responsive واکنش گرا در گریدها |
تا جایی که میتونی گریدها را جوری کوچک کن که ساختارشان بهم نریزه از یک اندازه ای به بعد چینش،المانها را عوض کن |
|
|
اگر بخواهیم با یک row چند سطر ایجاد کنیم چه باید کرد |
بین انها div class=w-100 |
|
|
اگر بخواهیم با یک row چند سطر ایجاد کنیم چه باید کرد |
بین انها div class=w-100 |
|
|
Utility |
مجموعه ای از کلاسها هستند که دسته بندی شدند و هر دسته ای برای منظور خاصی به کار میرود کلاسهای utility تکست برای استایل دادن به متنها به کار میروند |
|
|
برای اینکه شما یک عنصر را به flexbox تبدیل کنید چه باید بکنید |
لازم است یک flex container ایجاد کنید و داخل آن یک سری flex item ایجاد کنید و برای این کار کافی است property display ان را برابر با flex قرار دهید و مثلا اگر داخلی ها div باشند دیگر کل فضا را اشغال نمیکنند و کنار هم قرار میگیرند |
|
|
وقتی به کلاسی یک row میدهیم چه رخ میدهد |
آنرا به یک container flex تبدیل میکنیم و فرزندان آن هم به flex items تبدیل میشوند |
|
|
ایجاد dropdown |
اولین تگ div بعد col را کلاس dropdown میدهیم که position را relative قرار میدهد 2تگ button با کلاس dropdowntoggle برای نمایش مثلثی و صفت datatoggle را dropdown قرار میدهیم 3 تگ div بعدی را برابر dropdown menu میگذاریم که باعث میشود منو از خارج حذف شود ۴و هر کدام از آیتم‌ها را از کلاس dropdown item میگذاریم |
|
|
کلاس container و container fluid |
کلاس container یک کلاس که یک محتوا با عرض ثابت fixed width رو فراهم میکند کلاس container fluid کلاسی است که یک محتوا را با عرض کامل فراهم میکند fullwidthدر واقع خود webbrowser میاد و حداکثر عرضی که تو هر اندازه از صفحه میتونه داشته باشه به شما اختصاص میده . |
|
|
Jumbotron |
یک جعبه بزرگ خاکستری ایجاد میکند که میتواند برای نمایش اطلاعات مهم و جلب توجه کاربر به نوشته از آن استفاده شود jumbotron معمولا عرض کل عنصر دربرگیرنده خود را اشغال میکند پس زمینه ای خاکستری دارد |
|
|
کلاسهای ویژه دکمه را به چه تگهایی میتوان اعمال کرد |
به تگ لینک a دکمه button و کادرهای ورودی input اعمال کرد |
|
|
Flexbox چیست |
Flexbox stands flexible box it s cutting edge css that makes it easy to create layouts for dynamic or unknown screen sizes . زیرمجموعه ای از cssاست کدهای flexbox را در css باید نوشت |
|
|
ویژگی های flexbox |
Direction Order Wrapبسته بندی نمایش در یک خط یا چند خط Alignment Resize |
|
|
تفاوت floats و flexbox |
در floatsتمام آیتم‌ها به صفحه چسبیده و یک ایتم فقط قابل جابجایی است در flexbox تمام آیتم‌ها به صفحه چسبیده اند ولی با این وجود میشود جابجایشان کرد |
|
|
Flex box اجزا |
دوقسمت کلی دارد flex container که تمامی ایتم هایی که قراره به عنوان flexbox از انها استفاده کنیم در این قسمت قرار میگیرند Flexcontainer has the ability to adjust & control the size of child elements to adapts to different view ports و داخل ان flex item داریم |
|
|
برای پیاده سازی flexboxبه چه نیاز داریم |
یک div با کلاس flexcontainer تعریف میکنیم برای اینکه هر ایتم نقش flex item رو پیداکنه باید در css مقدار display انرا flex قرار دهیم |
|
|
خاصیت wrap در css با عکس |
|
|
|
کلاسهای بوت استرپ برای گریدبندی خانه در صفحه نمایشهای مختلف |
کلاس col sm دستگاه با صفحه نمایش کوچک بزرگترمساوی ۵۷۶ کلاس col MD دستگاه با صفحه نمایش متوسط،بزرگتر از ۷۶۸ کلاس col LG دستگاههایی با صفحه نمایش بزرگ که عرض انها مساوی یا بزرگتر از ۹۹۲ یعنی وقتی از lg استفاده میکنید حداقل پهنای صفحه باید 992 px باشد کلاس col-lx دستگاههایی با صفحه نمایش بسیار بزرگ که عرض انها بزرگتر از ۱۲۰۰ پیکسل است |
|
|
کلاس col |
کلاس col بسته به تعداد المانهای دیگر موجود کل عرض را تقسیم بر تعداد کل میکند |
|
|
Carousel |
نوعی اسلایدر در بوت استرپ میباشد و ابتداdivبا دو کلاس slider و carousel تعریف میکنیم و بعد کلاس carouselinner به آن میدهیم که محتوای داخلی اسلایدر را میدهد وکلاس carouselitem هر یک از آیتم‌های اسلایدر را تعریف میکندو عکس نمایشی را اینجا مشخص میکنیم کلاس active را به یکی از ایتمها باید داد |
|
|
کلاس slide در carousel چه میکند |
اجازه میدهد عکسها با یک transition ساده جابهجا شوند |
|
|
تغییر شکل ایکن |
Fontawesome.com |
|
|
قاعده تعریف row |
هر جا ستون خواستیم تعریف کنیم row تعریف میکنیم |
|
|
از چه کلاسی برای ایجاد عنوان میتوان استفاده کرد |
کلاس display |
|
|
نحوه ساخت منوی عمودی |
Flex-columnکلاس Nav به ul |
|
|
نحوه ایجاد nav ساده |
به تگ ul کلاس nav میدهیم و به تگ li کلاس nav item و در درون هر li هم یک تگ link با تگ a ایجاد میکنیم |
|
|
اگر در navبخواهیم dropdown داشته باشیم باید چه کنیم |
ابتدا کلاس dropdown را به یک تگ li میدهیم همانطور که میدانیم به دلیل ایتم nav بودن کلاس navitem را از قبل داردو دومی تگ کانتینر که آیتم‌های dropdown رو در خودش قرار میدهد وکلاس dropdowntoggle و خاصیت datatoggle را به ان میدهد که میگوید وقتی وضعیت یک عنصر را می‌خواهیم تغییر دهیم کدام تغییر میابد و به یک div کلاس dropdown menu را میدهیم و هر کلاس داخلی را dropdown item میگذاریم |
|
|
برای فاصله دادن به یک ایتم باید چه کرد |
برای فاصله دادن باید به ردیف خود padding بالا پایین بدهیم |
|
|
برای اینکه اندازه عکس با تغییر اندازه سایت تغییر کند چه کلاسی به ان میدهیم |
Img-fluid عکس responsive |
|
|
برای جهت دهی عناصر inline چه باید کرد |
نمیشود از margin auto استفاده کرد display نگهدارنده را حالت flex بگذارید و justify رو center کرد یا text center به div نگهدارنده اون بدهيد |
|
|
چه عناصری داری خاصیت های margin padding هستند |
هر عنصری که خاصیت نمایشی block داشته باشد دارای خصیصه های border padding margin میباشد border پوسته یا بدنه اصلی div است padding حریم داخلی میباشد margin حریم خارجی میباشد وقتی حریم داخلی میدهیم یعنی عناصر داخلی حق تجاوز به اون حریم رو ندارند |
|
|
برتری rem بر سایر واحدها |
وقتی از rem استفاده میکنیم فقط کافی است فونت سایز ریشه را تغییر دهیم و نیاز به دستکاری همه نیست |
|
|
سیستم گریدبندی بوت استرپ |
به شما اجازه میدهد تا ۱۲ خانه یا ستون در یک سطر داشته باشید اگر نمیخواهید از ۱۲ خانه به صورت تک تک استفاده کنید میتوانید از ترکیب انها خانه یا ستونهای بزرگتری ایجاد نمایید کل صفحه ما رو به صورت یک شبکه در نظر میگیرد شبکه ای متشکل از سطر و ستون . |
|
|
تفاوت col-و col در چیست |
اگر col- تنها بگذاریم بر هرbreakpoint اعمال میشود و از extrasmallشروع میشود اگر col بگذاریم اندازه هر سطر بر تعداد ستونها تقسیم میشود و ستون‌هایی با اندازه مساوی خواهیم داشت |
|
|
روش ایجاد دو ردیف مجزا با ستون داخل آن |
روش اول تعریف ۲ سطر مجزا و ستونها در آن روش دوم بین دو div یک div با w-100تعریف میکنیم که ستونها را به سطر بعدی منتقل میکند |
|
|
Col-autoچه میکند |
عرض ستونها به اندازه محتوا در gridesystemکوچک و بزرگ میشود |
|
|
Nogutter |
اگر بیایم در grid ستونها رو باقی بزاریم و row را حذف کنیم یعنی از ستونها بدون row استفاده کنیم ستونها از چپ و راست فاصله میگیرند چرا ؟ چون container ما خودش padding دارد padding container و padding ستونها با هم جمع میشود . اما وقتی آنها را در row قرار میدهیم کلا این فاصله حذف میشود .در row ما یک margin left و یک margin rightبه اندازه 15- داریم که padding که container میدهد را خنثی میکند ولی اگر بیایم nogutterبه row بدهیم marginright و margin left حذف میشوند |
|
|
برای وسط قراردادن یک ستون در gride باید چه کرد |
اگر بخواهیم یک ستون وسط قرار گیرد اندازه ستون -12 حاصل راتقسیم بر ۲ میکنیم و چپ و راست offset میدهیم |
|
|
Toggle |
یعنی switch کردن بین دو حالت مثلا active بودن و active نبودن برای فعال کردن مثلا در مورد buttonمی اییم data-toggle=button |
|
|
Button group |
عده ای از button ها را کنار هم قرار میدهد به طوریکه انگار اینbutton ها در هم ادغام شده اند |
|
|
Carouselاجزا |
<div class="carousel"> <div class ="carousel-inner"> <div class="carousel-item"> </div> </div> </div> |
|
|
برای اینکه تصاویر به اندازه carousel شود چه باید کرد |
باید از utility برای image استفاده کرد d-block w-100 |
|
|
فرق بین nav و navbar چیست |
با کامپوننت nav ما منویی را ایجاد میکنیم که لینک هایش لینک های مرتبط به هم هستندو فقط و فقط لینکها داخل این صفحه هستند در صفحه فقط یک navbar داریم ولی چندین nav میتوانیم داشته باشیم |
|
|
Collapse چیست |
دکمه ای داریم که وقتی روی دکمه کلیک میکنیم محتوایی را toggle میکند یا show و hide میکند |
|
|
عمل collapse با چه کلاسهایی انجام میشود |
Collapse hides content Collapsing is applied during transition Collapse.show shows content |
|
|
اگر بخواهیم gutter داشته باشیم در گریدها رنگ را به چه نباید بدهیم |
بهrowها یا col ها یا گریدها نباید داد |
|
|
ایجاد کلاس dropdown ساده |
کلاس container مثل div را انتخاب کرده و کلاس dropdown به ان میدهیم دو بخش اصلی دارد یکی دکمه است با کلاس btn و کلاس dropdown-toggle دیگری ایتمهاست که منووار نمایش داده میشوند |
|
|
خاصیت toggle چیست |
یعنی عنصری که این خاصیت را دارد وقتی رویش کلیک کنیم به حالت برعکس درمی‌آید |
|
|
چگونه دکمه را به dropdown متصل میکنیم |
ما باید دکمه را به حالت dropdown متصل کنیم یعنی بگوییم اگر روی دکمه کلیک کردی dropdown رو برا ما بازو بسته کن Datatoggle =dropdown میگوییم وقتی دکمه خاست toggle کنه dropdown رو باز کن |
