آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه چهارمReviewed by صابر on Dec 18Rating: 1.0
آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه چهارم

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه چهارم

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

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

 

 

 

 

شکل تصاویر بوت استرپ :

1

 

تصویر با گوشه های گرد در بوت استرپ: Rounded corners

کلاس .img-rounded گوشه های عکس را گرد میکند : ( مرورگر IE8 تصاویر با گوشه گرد را ساپورت نمی کند)

لینک دمو (کلیک نمایید)

گرد و دایره ای : Circle

کلاس .img-circle تصویر را گر میکند .( مرورگر IE8 تصاویر با گوشه گرد را ساپورت نمیکند)

لینک دمو (کلیک نمایید)

تصاویر بندانگشتی ثامبنیل : Thumbnail

کلاس .img-thumbnail تصاویر را به صورت ثامبنیل و بندانگشتی در می اورد .

لینک دمو (کلیک نمایید)

تصاویر ریسپانسیو یا واکنش گرا در بوت استرپ :

تصاویر سایز ها و اندازه های مختلفی دارند، همینطور صفحه نمایش ها . تصاویر واکنش گر به صورت اتوماتیک متناسب با اندازه صفحه تنظیم میشوند. با اضافه کردن کلاس .img-responsive به تگ <img> میتوانید تصاویر واکنش گرا بسازید . ازین پس عکس به خوبی در عنصر والد خود مقیاس بندی میشود.

کلاس .img-responsive خصوصیات max-width: 100%; و height: auto; را به عم اعمال می کند.

لینک دمو (کلیک نمایید)

گالری تصاویر در بوت استرپ :

میتوانید سیستم بوت استرپ گرید را در ترکیب با کلاس .thumbnail به کار برده و یک گالری تصویر بسازید.

لینک دمو (کلیک نمایید)

Embed های ریسپانسیو یا واکنش گرا در بوت استرپ :

همینطور میتوان کاری کرد تا ویدیو ها و اسلایدشو ها هم در هر دستگاهی به طور مناسب تغییر مقیاس دهند. کلاس ها میتوانند به طور مستقیم بر روی عناصر <iframe>, <embed>, <video>, و <object>اعمال شوند .

مثال زیر با اضافه کردن کلاس .embed-responsive-item به تگ <iframe> یک ویدیو ی واکنش گرا میسازد . در این صورت ویدیو به خوبی در عنصور مادر مقیاس بندی می شود. محتوای عنصر <div> نبست ابعاد ویدیو را تعیین میکند :

لینک دمو (کلیک نمایید)

نسبت ابعاد یک عکس تعیین کننده ی رابطه متناسب بین عرض و ارتفاع عکس میباشد. دو “نسبت ابعاد” معمول ویدیو ۴:۳ (فرمت جهانی ویدیو در قرن ۲۰) و ۱۶:۹ ( فرمت جهانی برای تلویزیون های HD و تلویزیون های دیجیتال اروپایی ) میباشند.

میتوانید از بین دو کلاس “نسبت ابعاد” مختلف یکی را انتخاب کنید:

 

خودتان را تست کنید!

تمرین ۱   تمرین ۲      تمرین۳     تمرین ۴

 

ساخت یک Jumbotron و page header در بوت استرپ :

 

ایجاد یک Jumbotron در بوت استرپ :

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

نکته : شما میتوانید درون یک Jumbotron هرگونه متن HTML معتبری را شامل عناصر و کلاس های دیگر بوت استرپ ها قرار دهید. برای ساختن یک Jumbotron از عنصر <div> باکلاس .jumbotron استفاده کنید.

Jumbotron درون یک ظرف (Container)

در صورتی که میخواهید که Jumbotron تا گوشه های صفحه امتداد پیدا نکند ، Jumbotron را درون <div class=”container”> قرار دهید:

لینک دمو (کلیک نمایید)

 

(Container) خارج از ظرف Jumbotron در بوت استرپ :

تا گوشه های صفحه امتداد بیابد ان را Jumbotron بالعکس اگر میخواهید که خارج از <div class=”container”> قرار دهید.

لینک دمو (کلیک نمایید)

 

ساختن یک هدر برای صفحه در بوت استرپ :

هدر صفحه مانند یک جدا کننده بخش section devider عمل می کند. کلاس page-header یک خط افقی زیر هدینگ (سر فصل) اضافه میکند.

 

مثال :

برای ساخت هدر صفحه از عنصر<Div> و کلاس page-header استفاده کنید.

لینک دمو (کلیک نمایید)