اسایش و راحتی امروز حاصل رنج و زحمت دیروز است.(کوروش کبیر)
خوش آمدید - امروز : چهارشنبه ۱ آذر ۱۳۹۶

آموزش کار با فریمورک رایگان بوت استرپ / قسمت پنجم

آموزش کار با فریمورک رایگان بوت استرپ / قسمت پنجم

http://ivahid.com/wp-content/uploads/2014/11/cover8.png

در قسمت پنجم از آموزش بوت استرپ در سایت آموزش برنامه نویسی به تصاویر در بوت استرپ نگاهی می اندازیم.

تصاویر در بوت استرپ

گرد کردن گوشه های تصویر

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

برای مثال کد زیر را ببینید:

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

تصاویر به صورت دایره

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

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

کوچک کردن یا بند انگشتی کردن تصویر

کلاس img-thumbnail تصویر را کوچک یا بندانگشتی می­کند:

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

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

چون صفحه نمایش ها در هر اندازه ای هستند بنابراین تصاویر هم باید اندازه های مختلف باشند. تصاویر واکنشگرا به طور خودکار به تناسب اندازه صفحه نمایش تنظیم می­شوند.

تصاویر واکنشگرا را می توان با اضافه کردن کلاس .img-responsive به تگ img ایجاد کرد. تصویر پس از آن به خوبی در مقیاس عنصر والد خود تنظیم خواهد شد. کلاس img-responsive خصوصیات “display: block” و “max-width: 100%” و “height: auto” را بر تصویر اعمال می کند.
مثال:

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

برای استفاده کاربردی تر از این ویژگی بوت استرپ یک مثال براتون می زنم که با استفاده از تصاویر ریسپانسیو و سیستم گرید بوت استرپ می تونید یک گالری از تصاویر رو ایجاد کنید، کد زیر این کار رو برای شما انجام میده:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
<divclass="col-md-4">
    <ahref="pulpitrock.jpg"class="thumbnail">
Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.
 
      <imgsrc="pulpitrock.jpg"alt="Pulpit Rock"style="width:150px;height:150px">
    </a>
  </div>
<divclass="col-md-4">
    <ahref="moustiers-sainte-marie.jpg"class="thumbnail">
Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".
      <imgsrc="moustiers-sainte-marie.jpg"alt="Moustiers Sainte Marie"style="width:150px;height:150px">
    </a>
  </div>
<divclass="col-md-4">
    <ahref="cinqueterre.jpg"class="thumbnail">
The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.
 
      <imgsrc="cinqueterre.jpg"alt="Cinque Terre"style="width:150px;height:150px">
    </a>
  </div>
</div>

خاصیت بعدی که می تونه در زمینه ریسپانسیو کردن ویدئو یا اسلاید ها خیلی کاربرد داشته باشه خاصیت جاسازی واکنشگرا (Responsive Embeds) است. مثال زیر برای ایجاد یک ویدئو ریسپانسیو به شما کمک زیادی می کنه:

۱
۲
۳
<divclass="embed-responsive embed-responsive-16by9">
  <iframeclass="embed-responsive-item"src="..."></iframe>
</div>

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

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
<!-- 16:9 aspect ratio -->
<divclass="embed-responsive embed-responsive-16by9">
  <iframeclass="embed-responsive-item"src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<divclass="embed-responsive embed-responsive-4by3">
  <iframeclass="embed-responsive-item"src="..."></iframe>
</div>

امیدوارم این قسمت از آموزش بوت استرپ براتون مفید بوده باشه.

آموزش کار با فریمورک رایگان بوت استرپ / قسمت پنجم