Text alignment در بوت استرپ
برای راحتی کار طراحان وب، مجموعه‌ای از چیدمان‌های متن تعریف شده که برای تنظیم نوع چیدمان تنها کافیست کلاس مربوطه را به تگ خود اضافه کنید.
چهار نوع چیدمان متن وجود دارد که در ادامه آموزش bootstrap به توضیح هرکدام می‌پردازیم:
- text-justify: برای مرتب سازی متن به صورت جاستیفای می‌توانید به عنصر خود، کلاس text-justify را اضافه کنید.
- text-center: برای مرتب سازی متن در وسط عنصر کافیست از کلاس text-center استفاده کنید.
- text-right: برای اینکه متن خود را در داخل یک عنصر راست چین کنید، می‌توانید از کلاس text-right استفاده کنید.
- text-left: برای اینکه متن خود را در داخل یک عنصر چپ چین کنید، می‌توانید از کلاس text-left استفاده کنید.
در ادامه به چندمورد تایپوگرافی اشاره کرده و توضیح می‌دهیم:
- text-nowrap: برای اینکه بخواهید از شکسته شدن متن در داخل یک عنصر جلوگیری کنید، می‌توانید از کلاس text-nowrap استفاده کنید.
- text-break: چنانچه متن طولانی باشد، استفاده از این کلاس موجب شکسته شدن متن خواهد شد.
- text-truncate: چنانچه متن داخل یک عنصر طولانی باشد، متن را محدود کرده و متن خارج از محدوده را نمایش نخواهد داد.
- text-capitalize: با اضافه کردن این کلاس به عنصر متنی، حروف اول هر کلمه را به حروف بزرگ تبدیل خواهد کرد در صورتی که متن شما انگلیسی باشد.
- text-lowercase: با اضافه کردن این کلاس به عنصر متنی، حروف متن را به حروف کوچک تبدیل خواهد کرد در صورتی که متن شما انگلیسی باشد.
- text-uppercase: با اضافه کردن این کلاس به عنصر متنی، حروف متن را به حروف بزرگ تبدیل خواهد کرد در صورتی که متن شما انگلیسی باشد.
اضافه کردن Text alignment به صفحه وب
حال مانند کد زیر یک کلاس text-center به تگ div اضافه کنید و نتیجه را مشاهده کنید.
<div class=”container-fluid p-5 bg-primary text-white text-center”>
همه درس ها به ترتیب
دستورات ضروری