رفتن به مطلب

استفاده نکردن از استایل های پیش فرض بوت استرپ


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

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

لینک به ارسال

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

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

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

لینک به ارسال

ممنون استاد فرض کنید من میام از پنل های خود بوت استریپ استفاده میکنم خب این پنل های از پیش تعریف شده برای بوت استریپ هستن بارنگ واستایل های خودشون حالا من فرض کنید میخوام رنگ پنل را عوض کنم یا اصلا میخوام حالت پنل را عوض کنم خب من باید استایل خودمو !importanyکنم تا اعمال بشه منظور من این است واین کار خوبی نیست چون بعضی مرورگرها مشکل داره.حالا اینکه شما فرمودید

ضمن اینکه برای اینکه استایلهای شما برتر از استایلهای بوت استراپ اجرا بشند کافیه فایل استایل دهیتون رو بعد از فایل استایل دهی بوت استراپ فراخوانی کنید.یعنی اینکه من بیام فایل style.cssخودم رو بعد از فایل ها وکتابخانه های بوت استریپ فراخوانی کنم؟؟؟؟؟

لینک به ارسال
یعنی اینکه من بیام فایل style.cssخودم رو بعد از فایل ها وکتابخانه های بوت استریپ فراخوانی کنم؟؟؟؟؟

بله

فایلها و کتابخانه هایی در کار نیست فایل style.css را بعد از bootstrap.min.css فراخوانی کنید

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

مثلا


<div class="panel panel-primary">
...
</div>

حالا برای شخصی سازی هم می تونید به کلاس panel-primary رنگ دلخواه رو نسبت بدید و هم می تونید یک کلاس جدید ایجاد کنید مثلا panel-orange و بهش رنگ دلخواهتون رو نسبت بدید و در کدها هم وارد کنید


<div class="panel panel-orange">
..
</div>

لینک به ارسال

ممنون استاد.استاد الان یک لحظه شما به این ادرس برید من چند مدتی هست که دارم از فریم ورک بوت استریپ هست استفاده میکنم الان در زمان کدنویسی بینید به این مشکل بر خورد کردم در اسلایدر که اسلایدر من width:100%;به خود نمیگیره درصورتیکه من از این کد استفاده کردم که باید طبق این کد عرض کامل را به خود بگیره.اگر دقت کنید می بینید که بکگراند اسلایدر ابی هست که عرض کامل را به خود گرفته.برای اولین بار هست این مشکل برخورد کردم الان در صورتی که من اومد سکشن را پاک کردم وسطر هم حذف کردم درست شد.عرض اسلایدها کامل شد.


<section class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/photo12.png" alt="اسلایدر1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/photo13.jpg" alt="اسلایدر2">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/photo14.jpg" alt="اسلایدر3">
<div class="carousel-caption">
...
</div>
</div>

</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>

لینک به ارسال

نه این کدتون عرض صد در صد نیست برای عرض صد در صد


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/photo12.png" alt="اسلایدر1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/photo13.jpg" alt="اسلایدر2">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/photo14.jpg" alt="اسلایدر3">
<div class="carousel-caption">
...
</div>
</div>

</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

رو باید قبل از


<section class="container-fluid">

قرار بدید

در ضمن


<section class="container-fluid">

به اینصورت اشتباهه و درستش


<section class="container container-fluid">

که باید ناوبارتون توش قرار بگیره و مابقی سکشن ها


<section class="container">

کفایت می کنه

لینک به ارسال

استاد کار نکرد منظورتون این هست اینکه من باید rowرا قبل از containerبه کار ببرم .من الان جای rowرا تغییر دادم کار نکرد این کد.


<div class="row">
<section class="container-fluid">
<div class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/photo12.png" alt="اسلایدر1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/photo13.jpg" alt="اسلایدر2">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/photo14.jpg" alt="اسلایدر3">
<div class="carousel-caption">
...
</div>
</div>

</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<!--end slider-->

استاد مگه روش استاندارد در بوت استریپ این نیست که باید برای هر عمل یک rowتعریف کرد.ممنون میشم کدبالا را ویرایش شده اش بذارید برام.من از مدیا کوئری استفاده میکردم منتها خیلی وقت گیر بود با بوت استریپ یک سایت دیگه هم زدم خیلی راحتر وبا کد کمتری قالب سایتم ریسپانسیو کردم.

لینک به ارسال

کد رو که من نمی رسم براتون ویرایش کنم

ولی نه در بوت استراپ الزاما نباید هر دایوی را داخل row ایجاد کرد row فقط مال لایه هاییه که از خاصیت float استفاده می کنند کدی که تو تایپیک قبل گذاشتم رو بجای کل کدتون قرار بدید

من متوجه نوع کدنویسیتون نشدم ولی کدهای carousel باید اولین فرزند تگ body باشند

لینک به ارسال

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

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

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

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

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

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

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

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

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