آموزش کامل margin و padding _ آموزش Border با مثال عملی

فایل های آموزش این بخش را می توانید از اینجا دانلود کنید.

بوت‌استرپ مجموعه‌ای از یوتیلیتی کلاس‌ها در اختیار ما قرار می‌دهد که با استفاده از آن‌ها می‌توانیم به‌سادگی بردرهای عناصر را کنترل کنیم. ابتدا یک عنصر div ایجاد می‌کنیم و با کمک این کلاس‌ها برای آن بردر تعریف می‌کنیم.

border در جهات مختلف

اگر از کلاس ساده‌ی border استفاده کنیم، عنصر ما در هر چهار سمت بردر دریافت می‌کند. اما با استفاده از کلاس‌های جهت‌دار مانند:

o border-top → بردر بالا
o border-bottom → بردر پایین
o border-start → بردر سمت شروع (چپ در نسخه‌های LTR)
o border-end → بردر سمت انتها (راست در نسخه‌های LTR)

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

<body>
    <div class="m-2 p-2 border">border</div>
    <div class="m-2 p-2 border-top">border-top</div>
    <div class="m-2 p-2 border-bottom">border-bottom</div>
    <div class="m-2 p-2 mx-4 border border-end">border-end</div>
    <div class="m-2 p-2 mx-4 border border-start">border-start</div>
</body>

حذف border در جهات مختلف

همان‌طور که می‌توانیم بردر اضافه کنیم، امکان حذف بردرها نیز وجود دارد. اگر به یک عنصر ۴ بردر داده باشیم، با افزودن کلاس border-0 تمام آن‌ها حذف می‌شوند. برای حذف یک سمت خاص، کافی است از کلاس‌های زیر استفاده کنیم:

<body>
    <div class="m-2 p-2 border border-start-0">border</div>
    <div class="m-2 p-2 border-top">border-top</div>
    <div class="m-2 p-2 border-bottom">border-bottom</div>
    <div class="m-2 p-2 me-4 border-end">border-end</div>
    <div class="m-2 p-2 ms-4 border-start">border-start</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-uIkaCzvKkvKxVwKfYwLBLfcLC17aR6tE7NMiVkVzIHgxPqE0fWl466c" crossorigin="anonymous"></script>
</body>

نتیجه می‌شود:

سمت چپ و بردر استارت حذف شد.

کنترل رنگ border ها

بوت‌استرپ امکان تعیین رنگ بردر را نیز فراهم کرده است. با استفاده از کلاس‌های رنگی مانند:

border-primary
border-danger
border-success
border-warning

می‌توانیم رنگ هر کدام از بردرها را تغییر دهیم. در مثال عملی، مشاهده می‌کنیم که هر عنصر رنگ مخصوص به خود را دریافت می‌کند.

<body>
<div class="m-2 p-2 border border-primary">border</div>
<div class="m-2 p-2 border border-warning">border-warning</div>
<div class="m-2 p-2 border border-danger">border-danger</div>
<div class="m-2 p-2 border border-dark">border-dark</div>
<div class="m-2 p-2 border border-info">border-info</div>
<div class="m-2 p-2 border border-light">border-light</div>
</body>

نتیجه می‌شود:

میبینیم هرکدام از المان ها رنگ مرتبط با خودشون را گرفتنه اند.

کنترل ضخامت border

در بوت‌استرپ می‌توانیم ضخامت بردر را از ۰ تا ۵ تعیین کنیم:

border-0 → بدون بردر
border-1 تا border-5 → ضخامت‌های مختلف

با این کلاس‌ها می‌توانیم مقدار دقیق ضخامت بردر را مشخص کنیم.

<body>
<div class="m-2 p-2 border border-primary border-1">border 1</div>
<div class="m-2 p-2 border border-primary border-2">border 2</div>
<div class="m-2 p-2 border border-primary border-3">border 3</div>
<div class="m-2 p-2 border border-primary border-4">border 4</div>
<div class="m-2 p-2 border border-primary border-5">border 5</div>
</body>

کنترل Border Radius

علاوه‌بر ضخامت و رنگ، امکان کنترل گردی لبه‌ها نیز وجود دارد. با استفاده از کلاس‌های:

rounded
rounded-0
rounded-1 تا rounded-5

می‌توانیم میزان خمیدگی لبه‌ها را تعیین کنیم. همچنین می‌توانیم گردی را فقط روی جهت‌های خاص اعمال کنیم. در مثال عملی مشاهده می‌کنیم که لبه‌ها از حالت صاف خارج شده و انحنا پیدا می‌کنند. با کپی‌کردن عناصر و تنظیم مقادیر مختلف، می‌توانیم میزان گردی را دقیق‌تر کنترل کنیم.

<div class="m-2 p-2 border border-primary border-5">border 5</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded">border</div>

از آن چندتا کپی میکنیم و میتوانیم مقدار ردیوس را در جهت مختلف کنترل کنیم:

<body>
<div class="m-2 p-2 border border-primary border-5">border 5</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded">border</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-top">rounded-top</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-bottom">rounded-bottom</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-start">rounded-start</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-end">rounded-end</div>
</body>

حال میایم از المان‌ها کپی میگیرم و میایم از مقادیر 0 تا 5 استفاده کنیم:

<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-0">rounded-0</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-1">rounded-1</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-2">rounded-2</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-3">rounded-3</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-4">rounded-4</div>
<div style="width: 100px;" class="m-2 p-2 border border-primary rounded-5">rounded-5</div>

پس ما به طور کل یاد گرفتیم که میتوانیم به المان ها بردر بدهیم، حذف کنیم، رنگ بدهیم، ضخامت بدهیم و انهای آنها را تنظیم کنیم.

نحوه ایجاد margin و padding

border در جهات مختلف

حذف border در جهات مختلف

کنترل رنگ border ها

کنترل ضخامت border

کنترل Border Radius