رفتن به مطلب

بهم ریختگی قالب هنگام استفاده از بوت استرپ


پست های پیشنهاد شده

سلام دوستان

وقتی که کدهای زیر رو به قالب اضافه میکنم ، قالب یکم بهم میخوره . بهم خوردگی به طوری که متن ها از کادر ها فاصله میگیرن و ...

کدها :


<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="js/bootstrap.min.js"</script>
<script src="js/jquery-2.1.4.min"</script>

عکس :

706614365604766000_boooot.png

برای رفع این مشکل باید چیکار کنم ؟

من از reset.css فشرده هم استفاده می کنم.

از بوت استرپ rbootstrap.ir استفاده می کنم

لینک به ارسال

فایل فوق رو باز کنید و ببینید کدوم قسمتش روی قالب شما تاثیر میذاره

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

لینک به ارسال

سلام داداش

طبیعیه! چون استایل جدید داری اضاقه میکنی!

باید دستی از طریق css درستش کنی

سلام و ممنون

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

اما به یکباره بهم ریخت.

آخه به نظرم با اضافه شدن بوت استرپ چیزی نباید عوض بشه چون در طراحی قالب من ، اسم کلاس های css من 100 درصد با اسم کلاس های بوت استرپ فرق میکنه

فایل فوق رو باز کنید و ببینید کدوم قسمتش روی قالب شما تاثیر میذاره

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

سلام

منظورتون رو کامل متوجه نشدم

ویرایش شده توسط site
لینک به ارسال

نسبت دادن خاصیت ها فقط به کلاس ها محدود نمیشوند ، ممکنه به بعضی از تگ ها هم خاصیت داده باشد مثلا به همه div ها یا h1 ها....

شما باید فایل css فریم ورک و فایل css پوسته را بررسی کنید و در صورت نیاز ویرایش کنید. ، هر چند به عقیده بنده حالا که تا اینجا کار جلو رفته شاید نیازی به استفاده از فریم ورک نباشد.....

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

لینک به ارسال

نسبت دادن خاصیت ها فقط به کلاس ها محدود نمیشوند ، ممکنه به بعضی از تگ ها هم خاصیت داده باشد مثلا به همه div ها یا h1 ها....

شما باید فایل css فریم ورک و فایل css پوسته را بررسی کنید و در صورت نیاز ویرایش کنید. ، هر چند به عقیده بنده حالا که تا اینجا کار جلو رفته شاید نیازی به استفاده از فریم ورک نباشد.....

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

سلام و ممنون

میخوام قالب رو رسپانسیو کنم

خب با استفاده از reset.css مشکل حل نمیشه ؟

اگه اینجوری باشه که باید با همه قالب ها تداخل داشته باشه !

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

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

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

margin-top در نظر گرفته باشه و بعد شما بیاید و مثلا line-height را برابر 50px قرار بدید طبیعیه که بیش از اندازه از بالا فاصله میگیره. این یه مثال بود کلیت هم همینه.

--------------------------------

برای ریسپانسیو کردن اگر مهارتتون در زمینه css بالاست میتونید با مدیا کوئری ریسپانسیو کنید.

در مورد ریست سی اس اس ، این فایل برای ریست مقادیر پیش فرضیست که مروگرها در نظر میگیرند مثل padding & margin or ........... و ربطی به موضوع بحث ما نداره.

منظور من اینه که اون قسمت از قالب شما که به هم میریزه ممکنه از بوت استرپ هم استایل بگیره! خب اگر بوت استرپ روی اون تاثیر نمیذاشت پس چرا پس از متصل کردن بوت استرپ به هم میریزه؟ پس خروجی را روی مرورگرتون با فایرباگ یا هر ابزاری چک کنید و ببینید قسمت به هم ریختگی چه استایل هایی میگیره ، تنها راه هم همینه ، در ضمن با مقایسه خروجی روی مرورگر در دو حالت میتونید علت را بیابید.

اگر علت همینی بود که گفتم داخل فایل css هر بخشی را اصلاح کردید بعدش یه important! قرار بدید که مرورگر این استایل را به بیقیه ترجیح بده.

موفق باشید

ویرایش شده توسط وردپرس-و-دیگر هیچ
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...