mk-73

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

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

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

0

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


لینک به پست

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

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

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

0

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


لینک به پست

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

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

0

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


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

بله

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

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

مثلا


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

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


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

0

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


لینک به پست

ممنون استاد.استاد الان یک لحظه شما به این ادرس برید من چند مدتی هست که دارم از فریم ورک بوت استریپ هست استفاده میکنم الان در زمان کدنویسی بینید به این مشکل بر خورد کردم در اسلایدر که اسلایدر من 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>

0

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


لینک به پست

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


<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">

کفایت می کنه

1

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


لینک به پست

استاد کار نکرد منظورتون این هست اینکه من باید 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تعریف کرد.ممنون میشم کدبالا را ویرایش شده اش بذارید برام.من از مدیا کوئری استفاده میکردم منتها خیلی وقت گیر بود با بوت استریپ یک سایت دیگه هم زدم خیلی راحتر وبا کد کمتری قالب سایتم ریسپانسیو کردم.

0

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


لینک به پست

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

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

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

1

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


لینک به پست

درست شد استاد ممنون بزرگواید.

0

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


لینک به پست

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

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

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

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


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

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

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


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