مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
جلسه چهارم از دوره Bootstrap : مروری بر CSS
مروری بر CSS
Bootstrap با CSS
این فصل یک مرور کلی بر بخش های کلیدی زیرساخت Bootstrap را شامل می شود ، از جمله رویکرد Bootstrap برای توسعه بهتر ، سریع تر و قوی تر وب سایت.
Doctype در HTML5
Bootstrap از عناصر HTML خاص و خصیصه های CSS استفاده می نماید ؛ که این عناصر و خصیصه ها نیاز به استفاده از doctype HTML5 دارند. از این رو ، کد زیر برای doctype در HTML5 ، باید در ابتدای تمام پروژه های استفاده کننده Bootstrap ، شامل شود.
<!DOCTYPE html>
<html>
....
</html>
رویکرد Mobile First
از زمانی که بوت استرپ 3 راه اندازی شده است ، به اولین رویکرد مورد استفاده در تلفن همراه تبدیل شده است. این بدان معنی است که سبک های 'first mobile' می توانند در کل کتابخانه یافت شوند ( به جای این که آنها را در فایل های جداگانه پیدا کنیم ) . برای این کار ، نیاز داریم viewport meta tag را به عنصر <head> اضافه نماییم ، تا از رندر کردن مناسب و بزرگنمایی در زمان لمس (touch zooming) در دستگاه های تلفن همراه اطمینان حاصل کنیم.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
- خصیصه width ، عرض دستگاه را کنترل می کند. تنظیم مقدار این خصیصه به عرض دستگاه ، اطمینان می دهد که در دستگاه های مختلف (موبایل ، دسکتاپ ، تبلت ...) به درستی رندر شده است.
- 1.0 = initial-scale (مقیاس اولیه) تضمین می کند که هنگام بارگذاری ، صفحه وب ما در مقیاس 1: 1 رندر می شود ، و هیچ بزرگنمایی خارج از کادر اعمال نمی شود.
مقدار user-scalable = no را به صفت content ، برای غیر فعال کردن قابلیت های بزرگنمایی در دستگاه های تلفن همراه ، همان طور که در زیر نشان داده شده است ، اضافه می کنیم. با این تغییر ، کاربران تنها قادر به حرکت در صفحه وب بوده و امکان بزرگنمایی ندارند ، و این تغییر باعث می شود که سایت ما کمی بیشتر شبیه به یک اپلیکیشن بومی باشد.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
به طور معمول ، maximum-scale =1.0 (حداکثر مقیاس) ، همراه با user-scalable = no (مقیاس کاربر) استفاده می شود. همان طور که در بالا ذکر شد ، user-scalable = no ممکن است به کاربران تجربه ای شبیه به یک اپ بومی را بدهد. بوت استرپ استفاده از این صفت را توصیه نمی کند.
تصاویر واکنش گرا
بوت استرپ 3 به ما امکان می دهد که تصاویر واکنش گرا را با اضافه کردن یک کلاس img-responsive. به تگ <img> بسازیم. این کلاس ، ویژگی های
; max-width: 100% و ;height: auto را به تصویر اعمال می کند. با این کار تصویر ، به خوبی با عنصر والد میزان می شود.
<img src = "..." class = "img-responsive" alt = "Responsive image">
تایپوگرافی و لینک ها
Bootstrap ، نمایش سراسری پایه (پس زمینه) ، تایپوگرافی (typography) و سبک های لینک را تنظیم می کند :
- نمایش سراسری پایه : این قابلیت ، رنگ پس زمینه background-color : #fff; را در عنصر <body> تنظیم می کند.
- تایپوگرافی : از صفت های font-family-base ، @ font-size-base@ و line-height-base @ به عنوان پایه تایپوگرافی استفاده می کند.
- سبک های لینک : رنگ لینک سراسری را از طریق صفت link-color @ تنظیم می کند. خط زیر لینک فقط در صفت hover: اعمال می شود.
نرمال سازی
بوت استرپ از نرمال سازی (Normalize) برای ایجاد سازگاری متقابل مرورگر استفاده می کند.
Normalize.css یک جایگزین مدرن HTML5-ready ، برای بازنشستگی CSS است. این یک فایل CSS کوچک است که یکپارچگی متقابل مرورگر را در سبک بندی پیش فرض از عناصر HTML فراهم می کند.
Container ها
از کلاس container. ، برای بسته بندی کردن محتوای صفحه و تمرکز راحت محتوا ، همان طور که در زیر نشان داده شده است ، استفاده می کنیم.
<div class = "container">
...
</div>
نگاهی به کلاس container. در فایل bootstrap.css بیندازیم :
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
توجه داشته باشیم که با توجه به padding (فاصله گذاری) و عرض ثابت ، container ها ، به طور پیش فرض قابل تودرتو شدن نیستند.
نگاهی به فایل bootstrap.css بیاندازیم :
@media (min-width: 768px) {
.container {
width: 750px;
}
}
در اینجا ، می توانیم ببینیم که CSS دارای پرس و جوهای رسانه ای برای container ها با width است. این کار کمک می کند تا واکنش گرایی را اعمال کرد و در نتیجه آن ، درون آنها ، کلاس container را برای رندر کردن درست سیستم grid ، اصلاح نمود.
فصلِ:
5
,
تعداد قسمت ها:
176
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…
توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…
فصلِ:
5
,
تعداد قسمت ها:
135
,
سطح:
صفر تا صد
این فصل در یک نگاه:
…
توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ:
2
,
تعداد قسمت ها:
13
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …
توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
فصلِ:
6
,
تعداد قسمت ها:
23
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…
سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
فصلِ:
4
,
تعداد قسمت ها:
78
,
سطح:
متوسط
موضوعات:
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش JQUERY
آموزش HTML5
آموزش Ajax
آموزش Bootstrap
آموزش JAVASCRIPT
این فصل در یک نگاه:
…
در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
5
,
تعداد قسمت ها:
201
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش Bootstrap
آموزش برنامه نویسی آندروید
این فصل در یک نگاه:
ایجاد پروژه آژانس مسافرتی.....…
فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ:
1
,
تعداد قسمت ها:
2
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش Ajax
آموزش Bootstrap
آموزش Laravel
آموزش PHP MVC
آموزش ایمیل مارکتینگ
آموزش وردپرس
این فصل در یک نگاه:
بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…
وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
