سبد (0)

تبلیغات

عکس ها در بوت استرپ

انواع عکس ها در بوت استرپ

Wiki

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

دایره:

بند انگشتی:


عکس با گوشه های گرد شده در بوت استرپ

Wiki

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

مثال (عکس های بوت استرپ)

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">

خودتان امتحان کنید »

عکس های دایره ای در بوت استرپ

Wiki

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

مثال (عکس های بوت استرپ)

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">

خودتان امتحان کنید »

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

Wiki

کلاس img-thumbnail عکس موردنظر را بصورت یک عکس بند انگشتی در می آورد.

مثال (عکس های بوت استرپ)

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

خودتان امتحان کنید »

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

Wiki

 عکس ها در هر اندازه ای وجود دارند. عکس های واکنش گرا به طور اتوماتیک برای جا شدن در صفحه نمایش، تنظیم می شوند.

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

کلاس img-responsive. در واقع کد max-width: 100% و height: auto را به عکس اضافه می کند:

مثال (عکس های بوت استرپ)

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

خودتان امتحان کنید »

گالری عکس در بوت استرپ

Wiki

شما همچنین می توانید از سیستم شبکه بندی بوتسترپ برای اتصال با کلاس thumbnail. برای ایجاد یک گالری عکس استفاده کنید:

مثال (عکس های بوت استرپ)

 <div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

خودتان امتحان کنید »

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

Wiki

کلاس embed به ویدئو ها و اسلایدشو ها اجازه ی مقیاس بندی درست، در هر وسیله ای را می دهد.

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

مثال زیر، یک ویدئوی واکنش گرا را با اضافه کردن یک کلاس embed-responsive-item. به یک تگ <iframe> ایجاد می کند(سپس ویدئو ی مورد نظر به خوبی نسبت به عنصر والد خود مقیاس بندی می شود).

محتوای عنصر <div> زیر نسبت ابعاد ویدئو را تعریف می کند:

مثال (عکس های بوت استرپ)

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

خودتان امتحان کنید »
Note

نسبت ابعاد چیست؟

نسبت ابعاد یک عکس، ارتباط مناسب بین عرض و ارتفاع را توصیف می کند.
دو نسبت ابعاد متداول عبارتند از 4:3(فرمت جهانی ویدئو در قرن بیستم) و 16:9(فرمت جهانی برای تلوزیون های HD و تلوزیون های دیجیتال اروپایی).

شما می توانید هر یک از دو نسبت ابعاد را به دلخواه انتخاب کنید:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

مرجع کامل عکس های بوت استرپ

Wiki

برای دیدن یک مرجع کامل از تمام کلاس های عکس می توانید مقاله ی مرجع عکس های بوت استرپ را مطالعه نمایید.

دیدگاه‌ها  

+2 # nasrin hamzelou 1395-10-05 20:39
سلام و خسته نباشید . تفاوت class="thumbnai l" رو با class="img-thum bnail بهم میگید من نم یفهمم فرقشون رو
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-10-07 10:25
سلام ممنون. از کلاس thumbnail برای ایجاد یک گالری عکس استفاده میشه(به خودتان امتحان کنید ها دقت کنید). اما از کلاس img-thumbnail برای تبدیل یک عکس به عکس بندانگشتی استفاده میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # آزی 1395-08-18 11:17
سلام عکسی رو میخام درون صفحه مرورگرم قراربدم که کل عرض صفحه رو پوشونده باشه. ممنون میشم راهنماییم کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-08-18 11:28
سلام. لطفا ابتدا این مقاله رو مطالعه نمایید و سپس اگر سوالی باقی موند، مطرح کنید:
www.beyamooz.com/css/595-css-responsive/4932-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-css-%D8%B9%DA%A9%D8%B3-%D9%87%D8%A7
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # آزی 1395-08-18 14:22
سپاس از لطفتون. توضیحات کامل. مشکل برطرف شد. ممنونم بابت پاسخگویی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی