مرز ها
از ابزارهای مرزی برای استایل سریع حاشیه و شعاع حاشیه یک عنصر استفاده کنید. برای تصاویر، دکمه ها یا هر عنصر دیگری عالی است.
مرزها در بوت استرپمرز
کلاس ها با استفاده از فرمت border-{side}برای xsو border-{breakpoint}-{side}برای sm،،،،، mdو lgنامگذاری می xlشوند xxl.
جایی که طرف یکی از موارد زیر است:
top- برای کلاس هایی که سبک را برایborder-topbottom- برای کلاس هایی که سبک را برایborder-bottomleft- برای کلاس هایی که سبک را برایborder-startright- برای کلاس هایی که سبک را برایborder-rightx- برای کلاس هایی که هر دو*-leftو*-righty- برای کلاس هایی که هر دو*-topو*-bottom- خالی - برای کلاس هایی که
borderاستایل را در هر 4 طرف عنصر تنظیم می کنند.
از ابزارهای حاشیه برای استایل دادن سریع به borderیک عنصر استفاده کنید. برای تصاویر، دکمه ها یا هر عنصر دیگری عالی است.
افزودنی
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>کاهشی
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>شعاع قرصی
کلاس های کمکی را به یک عنصر اضافه کنید تا گوشه های آن به راحتی گرد شود. برای حاشیه گرد، کلاس با استفاده از فرمت نامگذاری می شود rounded-*
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:150px; height:75px;"></span>اندازه های حاشیه
با استفاده از کلاس های کمکی می توانید شعاع حاشیه بالا، راست، پایین، چپ با اندازه های مختلف را کنترل کنید. کلاس ها همچنین از رفتارهای پاسخگو مانند rounded-{xxl | xl | lg | md | sm}-*. نمونه هایی در زیر آورده شده است
<span class="rounded-top"></span>
<span class="rounded-top-lg"></span>
<span class="rounded-end"></span>
<span class="rounded-end-lg"></span>
<span class="rounded-bottom"></span>
<span class="rounded-bottom-lg"></span>
<span class="rounded-start"></span>
<span class="rounded-start-lg"></span>سبک مرزی
برای مرز چین دار، کلاس ها با استفاده از فرمت، برای border-dashed-{side}و xsبرای border-{breakpoint}-dashed-{side}،،، smو md.Where نامگذاری می شوند .lgxl xxl
<span class="border-dashed"></span>
<span class="border-dashed-top"></span>
<span class="border-dashed-right"></span>
<span class="border-dashed-bottom"></span>
<span class="border-dashed-left"></span>عرض مرز
شما می توانید عرض حاشیه را با استفاده از کلاس های کمکی کنترل کنید border-{1|2|3|4|5}. In addition, you can also use border-top-2, border-end-2, border-bottom-2, border-start-2.
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
<hr />
<span class="border border-top-2"></span>
<span class="border border-end-2"></span>
<span class="border border-bottom-2"></span>
<span class="border border-start-2"></span>رنگ لبه
رنگ حاشیه به عنوان جایی که رنگ یکی از موارد زیر است تنظیم می شود: currentColor and border width 1px . Modifier can be used to change border color and width. The modifier classes for color are named using the format border-{color}.primary, secondary, success, info, warning, danger, light, dark, black, 1100, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, white,
<span class="border border-info"></span>
<span class="border border-success"></span>
<span class="border border-warning"></span>
<span class="border border-danger"></span>
<span class="border border-cake"></span>
<span class="border border-facebook"></span>
<span class="border border-twitter"></span>
<span class="border border-google-plus"></span>
<span class="border border-github"></span>
<div class="w-100"></div>
<span class="border border-black"></span>
<span class="border border-dark"></span>
<span class="border border-1100"></span>
<span class="border border-1000"></span>
<span class="border border-900"></span>
<span class="border border-800"></span>
<span class="border border-700"></span>
<span class="border border-600"></span>
<span class="border border-500"></span>
<span class="border border-400"></span>
<span class="border border-300"></span>
<span class="border border-200"></span>
<span class="border border-100"></span>
<span class="border border-light"></span>
<span class="border border-white"></span>
<span class="border border-2"></span>
<span class="border-top border-top-2"></span>
<span class="border-end border-end-2"></span>
<span class="border-bottom border-bottom-2"></span>
<span class="border-start border-start-2"></span>
