site

تغییر استایل ها در بوت استرپ

8 پست در این موضوع قرار دارد

سلام

مثلا در col-lg و col-md و col-sm ، رنگ نوشته ما آبی هست

چطوری میتونم در col-xs ، رنگ اون نوشته رو تغییر بدم ؟

در کل میخوام بعضی از استایل ها رو در col-xs تغییر بدم. امکان این هست ؟

0

به اشتراک گذاری این پست


لینک به پست

سلام. ببینید فرم ورک اینطوری نیست که حتما باید فقط از همون برای طراحی سایتتون استفاده کنید. یکسری استایل های آماده هست که کارتون جلو بیوفته. نتیجه این که فریم ورک رو جای استایل اصلی قالب قارا ندید بذاریدش توی یه پوشه و ایمپورت یا لینکش کنید. بعدش اون قسمت هایی که نیازه رو بنا به طرح قالبتون تغییر بدید.

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

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

البته اگر به همه ی استایل های بوت نیازی ندارید می تونید نسخه ی مینیمال اونو دانلود کنید :

http://getbootstrap.com/customize/

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

http://bootstrap-live-customizer.com/

موفق باشید.

3

به اشتراک گذاری این پست


لینک به پست

سلام. ببینید فرم ورک اینطوری نیست که حتما باید فقط از همون برای طراحی سایتتون استفاده کنید. یکسری استایل های آماده هست که کارتون جلو بیوفته. نتیجه این که فریم ورک رو جای استایل اصلی قالب قارا ندید بذاریدش توی یه پوشه و ایمپورت یا لینکش کنید. بعدش اون قسمت هایی که نیازه رو بنا به طرح قالبتون تغییر بدید.

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

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

البته اگر به همه ی استایل های بوت نیازی ندارید می تونید نسخه ی مینیمال اونو دانلود کنید :

http://getbootstrap.com/customize/

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

http://bootstrap-live-customizer.com/

موفق باشید.

سلام

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

اما مثلا عکس زیر رو نگاه کنید که منوی من هست :

3544014397948114610_Untitled.png

حالا در حالت xs نگاه کنید وقتی روی علامت "بار" کلیک میکنم، جه بلایی سر منوی من میاد :

22765143979495177_Untitled.png

این بک گراند سفید ، طرح سایت من رو بهم ریخته

کلا امکان این هست که در حالت های مختلف بوت استرپ (xs-sm-md-lg) استایل ها متفاوتی به هر حالت نمایش بدهم ؟

0

به اشتراک گذاری این پست


لینک به پست

فکر کنم بتونید بسته به نیاز خودتون کاستوم کنید من اکثرا این کارو میکنم

3

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

سلام

استایل ها درست اتچ شدن .

ولی من باز هم به جوابم نرسیدم.

مثلا منوی من توی col-lg,sm,md مشکی هست ولی مثلا میخواستم توی col-xs رنگش آبی بشه

فکر کنم بتونید بسته به نیاز خودتون کاستوم کنید من اکثرا این کارو میکنم

سلام

یعنی اینکه فایل های بوت استرپ رو دستکاری و ویرایش کنم ؟

0

به اشتراک گذاری این پست


لینک به پست

هم اره هم نه

نه به خاطر این که اگر میخواهید فایل هاتون دست نخوره میتونید یک سی اس اس جدا هم اد کنید برخی تغییرات را در داخل اونجا قرار دهید و !important کنید دستورات رو

2

به اشتراک گذاری این پست


لینک به پست

سلام

استایل ها درست اتچ شدن .

ولی من باز هم به جوابم نرسیدم.

مثلا منوی من توی col-lg,sm,md مشکی هست ولی مثلا میخواستم توی col-xs رنگش آبی بشه

سلام

یعنی اینکه فایل های بوت استرپ رو دستکاری و ویرایش کنم ؟

با عرض سلام

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


<div class="menu-item col-lg-9 col-md-8">
<div class="responsive-menu col-xs-12 visible-xs">
<nav class="menu-visible">
<button data-target="#navbarcollapse" data-toggle="collapse" class="togg navbar-toggle pull-left btn-lg">
<span class="sr-only"></span>
<span class="fa fa-bars fa-2x" style="color:#000;"></span>
</button>
<div id="navbarcollapse" class="collapse navbar-collapse">
<ul class="menuxs nav navbar-nav navbar-right">
کدهای منو
</ul>
</div>
</nav>

</div>
</div>

این مربوط به حالت XS هست البته اینم بگم شما باید دوتا منو تعریف کنید یک برای حالت معمولی یکی هم برای حالت XS من حالت XS و براتون قرار دادم برای حالت معمولی + حالت XS هم میتونید از کد زیر استفاده کنید :


<div class="menu-item col-lg-9 col-md-8">
<ul class="menu-list hidden-xs">
منوهایی که در حالت معمولی نمایش داده می شوند
</ul>

<div class="responsive-menu col-xs-12 visible-xs">
<nav class="menu-visible">
<button data-target="#navbarcollapse" data-toggle="collapse" class="togg navbar-toggle pull-left btn-lg">
<span class="sr-only"></span>
<span class="fa fa-bars fa-2x" style="color:#000;"></span>
</button>
<div id="navbarcollapse" class="collapse navbar-collapse">
<ul class="menuxs nav navbar-nav navbar-right">
منوهایی که در حالت XS نمایش داده می شوند.
</ul>
</div>
</nav>

</div>
</div>

موفق و موید باشید

3

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری