تلگرام
051-38846027
09367988112

نحوه تاثیر گزاری کلاس ها در بوت استرپ

نحوه اثرگذاری کلاس پایین دست روی کلاس های بالادست در بوت استرپ :
اگر در بوت استرپ از کلاسی استفاده کنیم و کلاس بالادست را برای تگ مورد نظر تعریف نکنیم، کلاس پایینی، بر مدیاهای بالاتر هم اعمال میشود.
نکته : دقت کنید که فقط تعداد ستون های کلاس پایینی به کلاس بالادست منتقل میشود ولی عرض ستون ها در مدیای بالادست همان مقدار پیش فرض است.
به عنوان نمونه برای عنصری کلاس col-sm تعریف میکنیم ولی کلاس های lg-md را مشخص نمی کنیم، فریم ورک بوت استرپ به اندازه تعداد ستون کلاس sm برای سایزهای lg و md هم در نظر میگیرد. فقط عرض ستون را مطابق کلاسهای lg-md میگیرد نه تعداد ستون را، تعداد ستون براساس کلاس col-sm میباشد یعنی sm جایگزین lg وmd میشود.
نکته: کلاس های بالادست روی کلاس های پایین دست اثر ندارند.
معرفی ستونهای برابر و نابرابر در بوت استرپ  equal columns-  unequal columns
در حالت ستون های برابر (equal) تعداد ستونها در هر کلاس به یک اندازه می باشد، مثلا ۱۲ تا بلاک (ستون) با واحد یک داریم یا ۳ تا ستون با واحد ۴
در حال Unequal  تعداد ستون هر کلاس یکسان نیست.
در مثال زیر در حالت xs تعداد ستونها برابر است.

<div class="row">
<div class="col-xs-12 col-md-4"><div class="well"><p class="title-red">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-5" ><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-3"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
</div>

columns wrapping
با یک مثال مبحث columns wrapping را شرح میدهیم :

<div class="row">
<div class="col-xs-12 col-md-4"><div class="well"><p class="title-red">بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-5" ><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-3"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>

<div class="col-xs-12 col-md-6"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
</div>

با اجرای کد بالا، مشاهده میکنید که مشکل در نمایش المان ها ایجاد میشود چون ارتفاع بلاک زیاد شده است، ارتفاع ردیف هم زیاد میشود و عنصری که درون آن ردیف هست push داده میشود، در نتیجه ما از حالت wrapping استفاده میکنیم و کلاس clearfix را بکار میبریم. این کلاس خاصیت clear:boath را به عنصر میدهد.

<div class="row">
<div class="col-xs-12 col-md-4"><div class="well"><p class="title-red">بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-5" ><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
<div class="col-xs-12 col-md-3"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
<div class="clearfix"></div>
<div class="col-xs-12 col-md-6"><div class="well"><p class="title-yellow">بوت استرپ</p></div></div>
</div>

معرفی کلاس های offsetting
column offsetting

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

<div class="container">
<div class="row">
<div class="col-md-6"><div class="well"><p class="title-red"بوت استرپ</p></div></div>
<div class="col-md-4"><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
</div>

</div>

در مثال بالا دو تا ستون اضافه داریم که بدون استفاده از آفست، این ستون های اضافی به انتهای row اضافه میشود.
پس برای ایجاد فاصله از کلاس های offset بین بلاک ها استفاده میکنیم :
•    col-lg-offset
•    col-md-offset
•    col-sm-offset
•    col-xs-offset
دقت کنید که باید تعیین کنیم که آفست روی چه مدیا کوئری باید اعمال شود :

col-md-offset-1

به اندازه یک ستون با gutterها به انتهای بلاک مورد نظر در مدیا md اضافه میکند.
در مثال زیر آفست برای کلاسهای lg هم در نظر گرفته میشود، در واقع آفست ها در مورد کلاسهای پایین دست و بالادست مثل کلاسهای col عمل میکنند.

<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-2"><div class="well"><p class="title-red">بوت استرپ</p></div></div>
<div class="col-md-4"><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
</div>

</div>

پس اگر برای کلاس های بالایی آفست در نظر نگیریم، آفست کلاسهای پایینی را به آنها اختصاص میدهد :

<div class="row">
<div class="col-sm-5 col-sm-offset-2 col-md-6">
<div class="well"><p class="title-red">بوت استرپ</p></div>
</div>
<div class="col-sm-5 col-md-6">
<div class="well"><p class="title-blue">بوت استرپ</p></div>
</div>


</div>
</div>

در مثلا بالا آفست sm را به md اختصاص میدهد و چون کلاسهای md کل ۱۲ ستون را دربرگرفته اند و آفست دو است، درنتیجه بهم میریزد، پس در نتیجه در مثال بالا باید به md هم offset بدهیم :

<div class="row">
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
<div class="well"><p class="title-red">بوت استرپ</p></div>
</div>
<div class="col-sm-5 col-md-6">
<div class="well"><p class="title-blue"بوت استرپ</p></div>
</div>


</div>
</div>

نکته : اگر برای کلاس پایین دست offset گذاشتیم، باید به تعداد ستونهای کلاس بالایی توجه کنیم اگر نیاز داشت که برای کلاس بالادست هم آفست تعیین میکنیم.
همانند کلاسهای col میتوانید بصورت ترکیبی از آفست ها استفاده کنید :

<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-2 col-md-6 col-md-offset-2"><div class="well"><p class="title-red">بوت استرپ</p></div></div>
<div class="col-xs-5 col-md-4"><div class="well"><p class="title-blue">بوت استرپ</p></div></div>
</div>

 

سوالات متداول

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

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

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

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

بلی ، قالب ها به صورت متن باز(open sorce) می باشد و در صورتی که مشتری دانش فنی کافی داشته باشد ، می تواند در قالب تغیرات دلخواه را اعمال کند ، اما توس وب هیچ ضمانتی برای ایجاد مشکل پس از ویرایش به عهده نمی گیرد.

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

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

تیم توس وب تلاش کرده تا تمامی موارد امنیتی که مربوط به کدنویسی قالب ها بوده را رعایت کند.

بله، قالب هایی که توسط توس وب طراحی می شوند منطبق با آخرین استانداردهای جهانی وب ( استاندارد کنسرسیوم جهانی وب = html css
استاندارد ECMA = استاندارد کدهای جاوا اسکریپت ) می باشد.

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

به محض پرداخت وجه ، شما می توانید فایل قالب را دانلود و استفاده نمائید .

چرا به توس وب اعتماد کنیم ؟

توس وب یک سایت رسمی می باشد و همچنین دارای گواهی نامه های معتبر ( نماد اعتماد الکترونیک از مرکز توسعه و تجارت الکترونیک , نماد ساماندهی از وزارت ارشاد و درگاه پرداخت ایمن بانک ملت ) می باشد

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