بخش 22 – طراحی وب واکنش گرا ، Thumbnails در bootstrap

خانه \\ Responsive Web Design \\ بخش 22 – طراحی وب واکنش گرا ، Thumbnails در bootstrap

بخش 22 – طراحی وب واکنش گرا ، Thumbnails در bootstrap

1395/02/13 - 22:53:46 // Responsive Web Design // 0 نظر // 2718 بازدید

نمایش تصاویر و ویدئوهای بندانگشتی thumbnails در بوت استرپ bootstrap توسط کامپوننت Thumbnails در یک چشم بهم زدن و بسادگی امکان پذیر است . این کامپوننت برای نمایش تصاویر و ویدئوها با قابلیت کلیک در یک جعبه که دور آن دارای حاشیه هست است استفاده می شود .

بخش 22 – طراحی وب واکنش گرا ، Thumbnails در bootstrap

در زیر کدی را می بینید که در آن یک thumbnails ایجاد کرده ایم :

بگذارید تا در ادامه یک طرح چهار ستونه برای تصاویر thumbnail ایجاد کنیم و در هر ستون یک تصویر برای نمایش قرار بدهیم .

همانطوری که در قسمت های قبلی دیدیم برای ساختن یک طرح 4 ستونه از کلاس col-xs-3 استفاده نمودیم .

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

سعی کنید تا ماوس خود رو روی تصاویر ببرید ، باید یک افکت زیبای highlight را مشاهده کنید و همچنین دور تصویر شما باید یک Border آبی تیره ی زیبا نمایش داده شود . در مثال بالا ملاحظه نمودید که ما از یک تگ <a></a> استفاده کرده و تصویر خود را درون آن قرار دادیم ؛ شما همچنین می توانید به جای آن از یک تگ <div> استفاده نمایید .

حال می خواهیم برای هر تصویر thumbnail یک عنوان یا caption ایجاد کنیم . تنها کاری که باید برای آن انجام دهیم این است که یک تگ <div> دیگر با کلاس caption در زیر تگ <img> ایجاد کنیم . کد ما برای آن باید بصورت زیر در آمده باشد :

اگر برای هر تصویر خود یک عنوان یا caption ایجاد کنیم ، تصویر نهایی ما بعد از اجرا کد بصورت زیر خواهد بود

شما همچنین می توانید برای تصاویر thumbnail خود خلاصه ای نوشته و سپس گزینه ی بیشتر بخوانید read more را به آن اضافه کرده و به صفحه ی دیگری در وب سایت خود لینک دهید . برای دیدن این مسئله به تصاویر قبلی خود که ساختیم در قسمت caption یک تگ <p> اضافه کرده و توضیحات مورد نظر را داخل آن می نویسیم و در نهایت یک لینک با متن read more ساخته و کلاس های btn و btn-primary را به آن نسبت می دهیم . بعد از این تغییرات ، کدهای ما باید بصورت زیر در آمده باشد :

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

دانلود سورس تمرین این قسمت

شاد و سلامت باشید

محمد جعفری فوتمی

معرفی نویسنده : محمد جعفری فوتمی

از سال 1382 بطور تخصصی در زمینه ی طراحی وب سایت کار کرده ام و در طی 12 سال گذشته تجربیاتی را کسب کرده ام که در هیچ کتاب و منبع آنلاینی یافت نمی شود ، تصمیم گرفته ام تا این تجربیات را در قالب مقالاتی به اشتراک بگذارم . امیدوارم مفید واقع شود .

امتیاز به مطلب

1 2 3 4 5

برچسب ها

بررسی منطق Repository Pattern و شکل پیاده سازی آن در یک پروژه ASP.NET MVC قسمت اول repository pattern respository patten mvc asp.net mvc thumbnail

مطالب مرتبط

نظرات کاربران

ارسال نظر

فیلدهای ستاره دار را پر کنید .

نام

ایمیل شما

متن پیام*

اخبار کوتاه

ماکروسافت نسخه ای از SQL Server 2016 را برای نصب در Linux به بازار ارائه کرد!.

ماکروسافت نسخه ای از SQL Server 2016 را برای نصب در Linux به بازار ارائه کرد!. عده ای این عمل را تسلیم شدن ماکروسافت در برابر Linux و عده ای آنرا یک هوشمندی و سیاست گزاری بلند مدت تلقی نموده اند. باید دید در آینده چه اتفاقی خواهد افتاد. همین چند روز گذشته بود که Visual Studio هم بر روی Mac قابلیت نصب و اجرا پیدا کرده بود.

فیس بوک به زودی امکان چت در Mobile Appخود را از بین می برد

فیس بوک به زودی امکان چت در Mobile Appخود را از بین برده و کاربران به کار با محیط Messenger تشویق مینماید . جمع زیادی از کاربران در هنگام شروع چت با پیام “Your conversations are moving to Messenger,” روبرو گشته و به محیط Messenger منتقل شده اند.

بالاخره نسخه اصلی SQL 2016 در اختیار عموم قرار گرفت

بالاخره نسخه اصلی SQL 2016 در اختیار عموم قرار گرفت و. دیتابیس که به گفته ماکروسافت ،سریعترین و قوی ترین سیستم مدیریت دیتابیس رابطه ای فعلی جهان به حساب خواهد آمد .

گوگل و Lives موفق به اختراع کاپشنی شدند که امکان پاسخگویی به تماسهای تلفنی و استفاده از GPS را فراهم میکند.

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

تحریمهای غیر منطقی و بی اساس سرویسهای ، Google Analytics ، Android WebSite و .Developers.google برداشته شده

بر اساس اخبار رسیده و بررسی تیم ایلیا سافت ، تحریمهای غیر منطقی و بی اساس سرویسهای ، Google Analytics ، Android WebSite و .Developers.google برداشته شده و از این لحظه میتوانید از سرویسهای آن به خوبی استفاده نمایید . به زودی مقالات کاربردی در زمینه چگونگی استفاده از این سرویسها در اختیار شما قرار خواهد گرفت .

پایان دوران فلش flash

بر اساس نظر کارشناسان ، وقتی Chrome ، FireFox و فیس بوک و به همراه آنهای Youtube ، استفاده از Flash را متوقف نموده اند ، پایان این تکنولوژی نمایش و پخش ویدئو را باید اعلام نمود .

گوگل کروم برای اولین بار از Internet Explorer هم جلو زده

گوگل کروم برای اولین بار از Internet Explorer هم جلو زده و میزان استفاده از آن در جهان در رده اول قرار گرفت . در حال حاضر 41.7 درصد از کاربران در سطح جهان از Chrome و 41.3 دیگر از IE استفاده میکنند و این یعنی پیروزی Chrome در رقابت تعداد استفاده کننده در سطح جهان.

استفاده کنندگان Windows 10 در نسخ مختلف بر روی لپ تاپ ، دسکتاپ و ... به 300 میلیون نفر در جهان رسیده اند.

بر اساس اعلام دیروز ماکروسافت ، استفاده کنندگان Windows 10 در نسخ مختلف بر روی لپ تاپ ، دسکتاپ و ... به 300 میلیون نفر در جهان رسیده اند. بر اساس اعلام ماکروسافت ، 2018 سالی است که ماکروسافت قصد دارد استفاده کنندگان این سیستم عامل را به یک میلیارد نفر در جهان برساند .

نسخه بعدی SQL Server در تاریخ 1 جون 2016 به بازار عرضه خواهد شد

نسخه بعدی SQL Server در تاریخ 1 جون 2016 به بازار عرضه خواهد شد .این خبر امروز توسط ماکروسافت اعلام گردید. این نسخه هماهنگی بیشتری با Azure داشته و ضمنن دیگر نیازی Decrypt کردن داده ها در Queryها ندارد و این یعنی سرعت خیلی بیشتر . بر اساس قول ماکروسافت ، سرعت Query ها 25 درصد بیشتر بوده و در نسخه های Enterprise, Standard, Express and Developer به بازار ارائه خواهد شد .

دانشگاه MIT موفق به ساخت کامپیوتری کوانتومی گردید

دانشگاه MIT موفق به ساخت کامپیوتری کوانتومی گردید که با کمک لیزر و 5 هسته اتمی ، هر گونه Encryption را در عمل خواهد شکست !.

Iphone 6 SE و قیمتهای عجیب آن در ایران

آیفون SE که در واقع تلفیقی از امکانات آیفون 6S در بدنه آیفون 5S است و به تازگی وارد بازار ایران شده هم اکنون به قیمت گزاف سه میلیون تومان در بازار قیمت گذاری شده است.

مجانی شدن نسخه SQL Server Developer توسط ماکروسافت

از امروز SQL Server 2014 Developer Edition را به صورت مجانی دانلود و استفاده کنید . از امروز به راحتی این نسخه را از سایت ماکروسافت دانلود و استفاده کنید. این نسخه هیچ تفاوتی با ورژن Enterprise نداشته و برای شروع تا پایان مراحل طراحی یک نرم افزار کافی میباشد .

ژاپن تا 2018 قطار نامرئی تولید خواهد کرد

نوع استیل به کار رفته در بدنه این قطار سبب خواهد شد انعکاس نور به حداقل رسیده و تغریبا نامرعی به نظر آید

آپدیت کردن گوشی خود به IOS 9.3 سبب بروز مشکل در گوشی شما خواهد شد .

اگر گوشی خود را ، مخصوصا گوشیهای پایینتر از Iphone 6 به IOS 9.3 آپدیت کنید ، احتمال Crush کردن و ایجاد دردسر برای شما وجود دارد . Apple ، لینکهای IOS 9.3 را موقتا Disable کرده و آپدیت کردن را متوقف نموده است .

تغییرات سخت افزاری و نرم افزاری سرورهای Apple جهت جلوگیری از دخالتهای دولت آمریکا

بر اساس اخبار رسیده شرکت Apple جهت جلوگیری از دخالتهای متداوم و حفظ حقوق مشتریان ، سرورهای خود را از لحاظ نرم افزاری و سخت افزاری ، تغییر خواهد داد. ظاهرا هر دو تفکر سیاسی دمکرات و جمهوری خواه ، هر دو با دخالت و دستکاری در داده ها ، توافق دارند ، لذا شرکت Apple سعی دارد برنده این دعوای فنی و حقوقی باشد . یکی از راههای مبارزه که در اختیار Apple میباشد ، تغییر روندهای Encryption و پیچیده کردن همه چیز در جهت ایجاد مانع بیشتر برای دولتها میباشد .

آرشیو اخبار