|||

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

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

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

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

شماره همراه خود را وارد کنید

ورود و ادامه

ابزار در Bootstrap ورژن 4

در بوت استرپ 4 بسیاری از کلاسهای ابزار / کمکی بدون استفاده از کد CSS. به سرعت میتوانید طراحی خود را انجام دهید.

حاشیه ها

از کلاس های border برای اضافه کردن یا حذف حاشیه از یک عنصر استفاده کنید:

حاشیه در Bootstrap
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
مشاهده مثال

رنگ حاشیه ها

یک رنگ را به حاشیه اضافه کنید

رنگ حاشیه
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
مشاهده مثال

حاشیه دورگرد

برای گرد کردن حاشیه ها از کلاس rounded استفاده می شود.

دورگرد
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
مشاهده مثال

حالت شناور

شناور عنصر به سمت راست با کلاس float-right یا سمت چپ با float-left و بدون شناور با کلاس clearfix  انجام میپذیرد

شناور
<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>
مشاهده مثال

شناور Responsive

یک عنصر به سمت چپ یا راست بسته به عرض صفحه نمایش، با کلاس های شناور Responsiv قابل طراحی است.

(.float-*-left|right - where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px))

responsive در Bootstrap
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>
مشاهده مثال

وسط چین

یک عنصر با کلاس mx-auto در وسط قرار می گیرد.

وسط چین در Bootstrap
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
مشاهده مثال

عرض

عرض یک عنصر را با کلاس w- * تنظیم کنید

(.w-25, .w-50, .w-75, .w-100, .mw-100):

عرض در Bootstrap
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
مشاهده مثال

ارتفاع

ارتفاع یک عنصر را با کلاس h-*  تنظیم کنید

(.h-25, .h-50, .h-75, .h-100, .mh-100):

ارتفاع
<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Height 25%</div>
  <div class="h-50 bg-warning">Height 50%</div>
  <div class="h-75 bg-warning">Height 75%</div>
  <div class="h-100 bg-warning">Height 100%</div>
  <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>
مشاهده مثال

تراز عمودی

از کلاس align- برای تغییر تراز عناصر استفاده کنید (فقط در خطوط خطی، درون خطی، درون جدول و سلول های جدول کار می کند)

عمودی
<span class="align-baseline"<baseline</span<
<span class="align-top"<top</span<
<span class="align-middle"<middle</span<
<span class="align-bottom"<bottom</span<
<span class="align-text-top"<text-top</span<
<span class="align-text-bottom"<text-bottom</span<
مشاهده مثال

موقعیت مکانی

استفاده از کلاس fixed-top برای ایجاد هر عنصر در بالای صفحه ثابت باقی می ماند:

موقعیت در Bootstrap
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav> 
مشاهده مثال

استفاده از کلاس fixed-bottom برای ایجاد هر عنصر در پایین صفحه ثابت باقی می ماند:

موقعیت ثابت در bootstrap
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav> 
مشاهده مثال

 

نظر شما

>

مقالات و دروس

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

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

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

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

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد