میرممد

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

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 18
  • آی پی دیروز : 25
  • بازدید امروز : 101
  • باردید دیروز : 61
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 162
  • بازدید ماه : 1,381
  • بازدید سال : 22,311
  • بازدید کلی : 22,311
  • آموزش كار با تصاوير در Bootstrap 4


    در اين مطلب از سايت ميرممد با كلاس هاي تصاوير در Bootstrap 4 كار ميكنيم و يك سري تكه كد مربوط به تصاوير در بوتسترپ نسخه چهار رو براتون قرار ميدم.

    كلاس Rounded در Bootstrap 4 :

    وقتي كلاس Rounded را به يك عكس ميديم گوشه هاي تصوير گرد ميشه بهتره با يك مثال منظورمو متوجه بشيد.اين نمونه كد كلاس Rounded در بوتسترپ چهار هستش كه به عكس خودم دادم :

    <img src="http://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="rounded" alt="سيد محمد ميرعالي" >

    نتيجه تكه كد بالا :

      سيد محمد ميرعالي

     همونطور كه ميبينيد گوشه هاي عكس من گرد شده فقط با دادن كلاس Rounded به عكس.

    كلاس rounded-circle در Bootstrap 4 :

    كلاس rounded-circle باعث گرد شدن يك عكس ميشه روش استفاده از كلاس rounded-circle هم با يك تكه كد توضيح ميدم :

    <img src="http://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="rounded-circle" alt="سيد محمد ميرعالي">

    نتيجه تكه كد بالا :

    سيد محمد ميرعالي

    كلاس img-thumbnail در Bootstrap 4 :

    با دادن كلاس img-thumbnail به عكس در بوتسترپ چهار عكس يك حاشيه يا همون بوردر ميگيره.نمونه تكه كد كلاس img-thumbnail در بوتسترپ :

    <img src="http://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="img-thumbnail" alt="سيد محمد ميرعالي">

    نتيجه تكه كد بالا :

    سيد محمد ميرعالي

    چيدمان عكس ها در Bootstrap 4 :

    كلاس float-left در Bootstrap 4 باعث ميشه يك المنت در سمت چپ شناور بشه يا همون چپ چين بشه :

     

      <img src="http://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="float-left" alt="سيد محمد ميرعالي">

    كلاس float-right در Bootstrap 4 باعث ميشه يك المنت در سمت راست شناور بشه يا همون راست چين بشه :

     

      <img src="http://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="float-right" alt="سيد محمد ميرعالي">

    وسط چين كردن عكس در Bootstrap 4 با دادن دو كلاس همزمان به عكس.نمونه كد وسط چين كردن عكس :

     

      <img src="http://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="mx-auto d-block" alt="سيد محمد ميرعالي">

    رسپانسيو كردن عكس در Bootstrap 4 :

    شما ميتوانيد با دادن كلاس img-fluid در bootstrap 4 عكس هاي خود را واكنشگرا كنيد . اين كلاس در واقع دو استايل max-width: 100% و height: auto را به يك عكس ميدهد . تكه كد استفاده از كلاس img-fluid در بوتسترپ :

      <img src="http://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="img-fluid" alt="سيد محمد ميرعالي">

    درواقع وقتي كلاس img-fluid رو به يك عكس ميديم وقتي مرورگر رو كوچيك و بزرگ كنيم عكس از يك كادر بيرون نميزنه مثلا روي گوشي اگر سايت باز بشه تصوير متناسب با اندازه كادر كوچيك ميشه.

     

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    بازدید : 351 یکشنبه 15 مهر 1397 : 7:37 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی