دوره مجازی بوت استرپ (جلسه 9): کامپوننت ها و css در بوت استرپ -بخش سوم

دسته بندی: آموزش
زمان مطالعه: 1 دقیقه
۲۹ تیر ۱۳۹۴

در جلسه نهم این دوره آمورشی می پردازیم به مبحث استایل دهی و ایجاد آیکون برای فرم ها توسط Gliphicons ها ,به بررسی نحوه واکنشگرا کردن تصاویر خواهیم پرداخت و همچنین توضیحی در مورد نحوه تزریق کلاس های بوت استرپ مثل کلاس img-responsive رو از طریق جاوااسکریپ به المانها بررسی خواهیم کرد و در مورد نحوه ایجاد جداول هم بحث میکنم

مطالب مطرح شده در این جلسه عبارتند از :

  • بررس کلاس input group
  • بررسی کلاس input-group-addon
  • نحوه ایجاد تصاویر واکنشگرا
  • بررسی کلاس img-responsive
  • بررسی کلاس img-rounded
  • بررسی کلاس img-circle
  • بررسی کلاس img-thumbnail
  • تزریق کلاس img-responsive توسط جاوااسکریپت برای اعمال این کلاس به تصاویر مورد نظر
  • نحوه ایجاد dropdown منو ها
  • بررسی کلاس dropdown
  • نحوه ایجاد زیر منوها
  • بررسی کلاس dropdown-header
  • بررسی کلاس dropup
  • نحوه فراخوانی و اجرای زیر منون توسط جاوااسکریپت و اتریبیوت data-toggle

 

:: توجه

این مطلب یک جلسه از آموزش بوت استرپ 3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش بوت استرپ 3

چه امتیازی به این مقاله می دید؟
نویسنده
علاقمند به طراحی و برنامه نویسی وب هستم و چند سالی میشه که در این زمینه فعالیت می کنم. (ایمیل من: @) وب سایت من:

جلسات دوره

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

Sohrab Gosheh

سلام من با جاوا اسکریپت زیاد آشنایی ندارم به نظرتون میشه با همین آموزش هایی که شما تو دوره بوت استرپ دادین نیاز هارو برطرف کرد با توجه به اینکه دوره جاوا اسکریپت شما نزدیک 60ساعته و به نظرم خیلی زیاد هست
راستی درسته زمان دوره VIP من تموم شده ولی دلیل بر این نمیشه که سوال من رو جواب ندین
(قبلا یه سوال در مورد یکی بوت استرپ کرده بودم خبری نشد)

کیوان علی محمدی

سلام به شکل محدود می تونید برطرف کنید و حتما بهتره خود js رو یاد بگیرید.

محمد صباغی

سلام
ضمن خسته نباشید من یک تصویر را وقتی بصورت مستقیم داخل فایل اچ تی ام ال فراخوانی میکنم ، با دستور جاوا (مثل فایل نمونه) ریسپانسیو میشه ولی همون تصویر را اگه با کلاسهای سی اس اس توی صفحه فراخوانی کنم ریسپانسیو نمیشه ، مشکل از کجاس

وحید صالحی

از چه کلاسی استفاده می کنید؟

محمد صباغی

سلام
از این دستور در فایل سی اس اس

 .top-pic{
 height: 245px;
 background-image:url(../images/head.png);
} 
وحید صالحی

دوست عزیز شما دارید توی فایل css تصویر رو لود می کنید قاعدتا نمیشه از کلاس رسپانسیو بوت استرپ در اینجا استفاده کرد مگه اینکه توسط تگ img در سندتون تصویر رو لود کنید و کلاس img-responsive رو براش قرار بدید برای رسپانسیو سازی تصویر در فایل css در گوگل جستجو کنید لینک زیر هم میتونه کمکتون کنه
https://www.w3schools.com/css/css_rwd_images.asp

موفق باشید

فاطمه صنیعی

سلام
من این کد رو $(document).ready(function() {
$(‘img’).addClass(‘img-responsive img-thumbnail’);

});
در قسمت custom.js وارد کردم ولی عکس ریسپانسیو نمیشه

وحید صالحی

بین این دو باید img-responsive img-thumbnail کاما , بزارید

Somayeh Shams

سلام استاد. وقتتون بخیر
این کلاس dropdown-backdrop رو باید به ul بدیم یا به دکمه ای که شامل زیرمنو میشه؟ من تست کردم در هر دو مورد جواب نداد

وحید صالحی

نیازی به استفده ازش نیست و در نسخه جدید حذف شده فقط خواستیم توضیح داده باشیدم که اگر جایی دیدی تعجب نکنید که چی هست 🙂

سید احسان عظیمی

در مورد کلاس dropdown-backdrop میشه ی توضیح مختصر بدین؟

وحید صالحی

دوست عزیز این کلاس رو شما از کجا آوردین؟

سید احسان عظیمی

از همین نسخه بوت استرپی که در جلسه 9 ازش استفاده کردین،خط 3103

وحید صالحی

خیلی خوبه که به ساختار هسته دقت می کنید دوست عزیز منظور بنده از این که از کجا آوردین این بود که در موردش در این جلسه صحبتی نکردیم در کل این کلاس برای حالتی هست که به ندرت پیش میاد ولی در کل فرض کنید ما در قالب 2 تا دراپ دان داریم که به صورت عمودی زیر هم هستند و اگر بخوایم زمانی که زیر منوی دارپ دان بالایی باز میشه زیر دراپ دان زیرش نباشه و روی اون قرار بگیره ازش استفاده میشه به پراپرتی positon و بخصوص مقدار z-index دقت کنید اما زمانی که از هسته جاوااسکریپت بوت استرپ استفاده می کنیم خودش بصورت خودکار این مورو رو در نظر میگیره…

سید احسان عظیمی

با سلام. چرا در ادیتور PhpStorm کلاسهای table-striped و table-condensed و table-hover به صورت OverLoad نشون داده نشد؟

سید احسان عظیمی

!!!!!!!!! 😎

وحید صالحی

سلام دوست عزیز این مورد بر می گرده به ide که ازش استفاده می کنید و phpstorm بعضی از کلاس هایی که در هسته یکی دو بار بیشتر استفاده و نوشته نشده ور برای جلوگیری از شلوغی overload نمایش نمیده که در سایر ide ها ممکنه این اتفاق نیوفته…

رضا قاسم نژادیان

سلام استاد خسته نباشین
ممنون از آموزش فوق العادتون . فقط کلاس های موجود در بوت استرپ و همچنین کاربردشون رو از کجا میتونیم تهییه کنیم ؟ و به صورت لیست داشته باشیم ؟
تشکر 😛

وحید صالحی

سلامت باشید کاربرد تمامشون رو که در این دوره توضیح می دیم همرا با مثال برای داشتن یکجای اونها هم به لینک زیر مراجعه کنید
https://gist.github.com/geksilla/6543145

وحید صالحی

خدمت شما : لینک

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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