آموزش تصویری کار با تصاویر در بوت استرپ

آموزش تصویری کار با تصاویر در بوت استرپ

تصاویر یکی از مهم ترین بخش های هر وب سایت می باشد که امروز در آموزش تصویری کار با تصاویر در بوت استرپ قصد داریم به بررسی مدیریت و قراردادن حرفه ای تصاویر در بوت استرپ بپردازیم

در بوت استرپ ، با استفاده از کلاس img  می توان تصاویر را ریسپانسیو کرد و تمام تصاویر با هر کیفیت و حجمی را واکنش گرا کرد.

برای اینکه بخواهید عکسی را قرار دهید باید از تگ img  استفاده کنید که در کلاس آموزش HTML- CSS به صورت مفصل به آن پرداخته ایم.

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

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

امیدواریم آموزش تصویری کار با تصاویر در بوت استرپ بتواند بخشی از مشکلات شما در کار با تصاویر در بوت استرپ را برطرف کند.

با ما همراه باشید

آموزش تصویری قراردادن تصاویر دربوت استرپ
سلام عزیزان وقتتون بخیر امروزدرادامه مجموعه آموزشی بوت استرپ میخوایم درمورد تصاویر در بوت استرپ صحبت بکنیم
که مبحث بسیار مهمی هستش وخیلی خیلی میتونه کمکمون کنه.
اون جلسه درمورد دکمه ها صحبت کردیم قبلش در مورد قالبای ترکیبی ورنگها باهم صحبت کرده بودیم واشاره کرده بودیم که بصورت پیش فرض بوت استرپ واکنش نشون میدن.
امروزمیخوام درمورد تصاویرصحبت بکنیم من میام پارامترهای خارج contant روپاک میکنم، یک div درست میکنم، یک کلاس بهش میدم، کلاسم رو bg=danger بهش میدم divخودمو میبندم متنی رو که میخوام ازاینجا بردارم روکپی میکنم میخوام درمورد تصاویر باهاتون صحبت کنم ببینم به چه صورت هست اینو رمش میکنم توی فایرفاکس میبینیم که الان اومده اینجا برای بوت استرپش که وقتی کوچیکش میکنم میبینید که به راحتی واکنش گراست.
حالا میخوایم که یه تصویراضافه کنیم به صفحمون .من تصویر میخوام بالای این

” اینا واجبات یه تگ هست.
Src برای آدرس عکس استفاده میشه. میرم وارد عکسام میشم اینجاعکسای مختلفی دارم با کیفیتهای مختلف. یه عکس کوچیک دارم
یه عکس بزرگ دارم یه دونه هم عکس بزرگ لوگوی اینستاگرام دارم باجفت این عکسا میخوام کارموببرم جلو میام عکس اول رووارد صفحه میکنم میگم از پوشه image عکس  face.jpgروبرام بخوان وقتی صفحم رو رفرش  میکنم میبینم که این عکس اومده اینجا قرار گرفته خیلی ساده.حالا ببینیداگرالآن من بیام این روکوچیک بکنم میبینید که متن شما اینجا بوت استرپ شده
واصطلاحا کوچیک میشه ولی عکستون نه تنها بوت استرپ نشده بلکه اسکورول افقی هم داده این یعنی به صورت پیش فرض تصاویردر بوت استرپ ریسپانسیو نیستند و ما میخوایم که اینو ریسپانسیو کنیم.
خب برای اینکه این کار روانجام بدیم اولین کاری که انجام میدیم توی image یه کلاسی وجودداره به اسم img یعنی کلاس img رو میدیم به عکس وقتی کلاس img رودادیم به عکس وقتی رفرش کنیم وقتی جمع کنم میبینید که اتفاقی نیفتاده کلاس بعدی که میدمimg
دوباره کلاس img ریسپانسیو هستش کلاس img ، img ریسپانسیوببینیم چه اتفاقی میفته من این الان تمام صفحه میکنم اینومجددا رفرش میکنم الآن که مجددا رفرش کردم اینو کوچیک بکنم عکس دیگه الآن جمع شد یعنی وقتی ما کلاس  img ، img ریسپانسیو رو میایم دربوت استرپ میایم به عنصرمون میدیم اتفاقی که میفته اینه که میاد این جمع میشه img ، img ریسپانسیودراصل باعث میشه تصاویرها ریسپانسیو بشن ودیگه به کوچیک شدن صفحه احترام بذارن وواکنش گرا بشن اما فعلا اصلا وارد مبحث قالب بندی
نشدیم ولی خب وقتی واردقالب بندی هم بشیم میبینید که بازهمین ترتیب هست وبازهمین الگوقرارداده میشه توی صفحه وشماازش میتونید راحت استفاده کنید.
حالامیایم اینجا وعکس دوم روهم قرارمیدم اینم بگم که مهم نیست من میتونم متنم روزیر div بذارم میام زیرdiv ومن متن روازش چندتا کپی میگیرم ومیام داخل <یه تگimg  قرارمیدم باز یه src میدم یه کلاس بهش میدم یه alt که اینم گفتم مهم هستن src رومیگم ازپوشه img/logo.png رو برام بخوان خب وقتی logo.png  روبرام بخوانه logo.png همون لوگوی اینستاگرام هست که اومده اینجاقرارگرفته ودقت کنیدکه داره این لاین خوانده میشه دقت کنیدکه درموردمفهوم in line  بلاکها تودوره html/css مفصلا صحبت کرده بودیم میایم اینجا به این دوباره همون کلاسارومیدم میگم img img ریسپانسیو روبهش بده اینجا که الآن رفرش بکنم میبینم که اینجا دوتا اتفاق افتاد اولا دیس پلی این بلاک شد یعنی اینکه دیگه کناره این برنگرده ودوما اینکه واکنش گراشد. الان اگه ازکناره اینو ببینم میبینم که هم تصویر این خانم بالای سایت وهم تصویر اینستاگرام پایین واکنش گرا واین واکنش گرایی در مورد تصاویری هستش که شما خیلی ساده میتونید بیاید بدید به سایتتون به اون مجموعه ای که دارید نمایشش میدید پس دیدیدکه من چه تک img داشته باشم اون روبیرون اصلا مهم نیست که شما اینوکجا میذارید من این روچند بار بهتون گفتم کلاسهای بوت استرپ جز چندتاازکلاساش که اواخردوره است اینا خیلی مرتبط به نیستن اینکه حتما باید تگ img روداخل div container بذاریم یا نذاریم وقتی شما css  بوت استرپ رووصل میکنید به قالبتون کل کلاسای بوت استرپ براتون قابل استفاده اندوازشون میتونید راحت استفاده بکنید پس بدونیدعکسا البته عکسا کلاسای دیگه ای هم دارن ولی کلاس اصلی تصاویر این کلاس img ریسپانسیو هست که عکس رو واکنش گرا میکنه وباعث میشه ما به سادگی بتونیم از اصل واکنش گرایی توی وبسایتمون استفاده کنیم. بوت استرپ نیاز به تمرین زیاد داره حتما سورس هاتون رو شبیه سورسای من بنویسید تمریناتتون روانجام بدید اگرم سوالی دارید که حتما میتونید ازمن درآیدی تون بپرسید. امیدوارم مبحث امروز روازش استفاده کرده باشید وبراتون مفید بوده باشه. شما روتاجلسه آینده به خدای بزرگ میسپارم.شاد وموفق وپیروز باشید. امیدوارم این اموزش از آموزشگاه کامپیوتر پرتو ، مورد توجه تون قرار گرفته باشه