در این بخش ابزارهای تراز عمودی در بوت استرپ (Vertical Alignment) را معرفی می‌کنیم.
با استفاده از این کلاس ها، میتوانید عناصر inline، inline-block، inline-table و سلول‌های جدول (table-cell) را به شکل دلخواه به صورت عمودی تراز کنید.
برای این کار، یکی از کلاس های زیر را انتخاب کرده و به عنصر مورد نظر اختصاص دهید:
-
.align-baseline -
.align-top -
.align-middle -
.align-bottom -
.align-text-bottom -
.align-text-top
اگر بخواهید محتوایی را تراز عمودی کنید که حالت غیر خطی (non-inline) دارد، ابزارهای Flexbox در بوت استرپ گزینه مناسبی هستند.
در ادامه با یک مثال، نحوه تراز عمودی عناصر خطی را بررسی می‌کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Vertical align</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"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4 class="display-5">Vertical align</h4> <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br> <button class="btn align-baseline text-bg-success">align baseline</button> <button class="btn align-top text-bg-success">align top</button> <button class="btn align-middle text-bg-success">align middle</button> <button class="btn align-bottom text-bg-success">align bottom</button> <button class="btn align-text-top text-bg-success">align text top</button> <button class="btn align-text-bottom text-bg-success">align text bottom </button> </div> </body> </html> |
در ادامه یک مثال را بررسی می‌کنیم تا نحوه تراز عمودی سلول های جدول (table cell) را بهتر درک کنیم:
|
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 29 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Vertical align</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"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4 class="display-5">Vertical Align - Table cell elements</h4> <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br> <table class="table-bordered bg-light" style="height: 100px;"> <tbody> <tr> <td class="p-2 align-baseline">align baseline</td> <td class="p-2 align-top">align top</td> <td class="p-2 align-middle">align middle</td> <td class="p-2 align-bottom">align bottom</td> <td class="p-2 align-text-top">align-text-top</td> <td class="p-2 align-text-bottom">align-text-bottom</td> </tr> </tbody> </table> </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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
