در این بخش، با مفهوم Vertical Rule در بوت استرپ آشنا می‌شویم. این ویژگی به شما اجازه می‌دهد با استفاده از یک کلاس سفارشی، خطوط جداکننده عمودی را در چیدمان های رایج ایجاد کنید. به بیان ساده‌تر، این قابلیت عملکردی مشابه تگ <hr> دارد، با این تفاوت که به جای جهت افقی، در جهت عمودی عمل می‌کند.
برای استفاده از این قابلیت، کافی است کلاس .vr را به عنصر مورد نظر خود اضافه کنید.
این کلاس ویژگی های زیر را شامل می‌شود:
-
عرض آن ۱ پیکسل است
-
حداقل ارتفاع آن برابر با ۱em در نظر گرفته شده
-
رنگ خط بر اساس مقدار
currentColorتعیین می‌شود و میزان شفافیت آن از طریق ویژگیopacityقابل تنظیم است
علاوه بر این موارد، میتوانید با اعمال استایل‌های دلخواه، ظاهر خط عمودی را به‌طور کامل سفارشی‌سازی کنید و آن را با طراحی کلی پروژه خود هماهنگ سازید.
در ادامه، مثالی را مشاهده می‌کنید که نحوه استفاده از کلاس .vr را به‌خوبی نشان می‌دهد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Helper - Vertical rule</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Vertical rule example</h4> <div class="container"> <div class="row"> <div class="col-md-3 text-bg-light"> <p>Text on the left side of vertical divider.</p> </div> <div class="col-md-1"> <hr class="vr"> </div> <div class="col-md-3 text-bg-light"> <p>Text on the right side of vertical divider.</p> </div> </div> </div> </body> </html> |
در چیدمان‌های فلکس (Flex Layout)، ارتفاع خط عمودی به‌صورت خودکار و متناسب با اندازه Container تنظیم می‌شود. این ویژگی باعث می‌شود عناصر درون رابط کاربری، هماهنگی بهتری با یکدیگر داشته باشند.
برای روشن‌تر شدن موضوع، اجازه دهید مثالی را بررسی کنیم که در آن ارتفاع خط عمودی به ساختار فلکس بستگی دارد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Helper - Vertical rule</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Vertical rule with flex</h4> <div class="d-flex flex-row"> <div class="flex-grow-1"> <p>Content on the left</p> </div> <div class="d-flex flex-grow-1" style="height: 200px;"> <div class="vr"></div> </div> <div class="flex-grow-1"> <p>Content on the right</p> </div> </div> </body> </html> |
استفاده از Vertical Rule در ساختارهای پشته ای (Stacks)
علاوه بر چیدمان‌های معمول، میتوانید از خط عمودی (Vertical Rule) در کلاس stack نیز استفاده کنید. این کار به شما کمک می‌کند تا مقادیر یا عناصر مختلف را به شکلی منظم و واضح از هم جدا کنید. به همین دلیل، استفاده از آن در رابط‌های کاربری تعاملی بسیار رایج است.
برای مثال، فرض کنید مجموعه‌ای از مقادیر کنار یکدیگر قرار دارند. در چنین حالتی، افزودن یک خط عمودی میان آن‌ها باعث افزایش وضوح دیداری و تفکیک بهتر اطلاعات می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Helper - Vertical rule</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Vertical rule with stacks</h4> <div class="hstack gap-1"> <div class="p-3 text-bg-info">First item</div> <div class="vr"></div> <div class="p-3 text-bg-primary">Second item</div> <div class="vr"></div> <div class="p-3 text-bg-warning">Third item</div> </div> </body> </html> |
اگر به دنبال طراحی صفحات حرفه‌ای و ساختارمند هستید، توصیه می‌کنیم در کنار یادگیری این قابلیت، سری هم به صفحه دوره طراحی سایت با بوت استرپ بزنید تا با کاربردهای دیگر این فریم‌ورک قدرتمند آشنا شوید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۴ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
