امتیاز دهید:
تایپوگرافی در بوت استرپ

 تایپوگرافی چیست؟

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

فونت سایز پیش فرض بوت استرپ 14px و فاصله خطوط در آن 1.428 می باشد، این تنظیمات به کل body و پاراگراف ها اعمال شده، همچنین تمام تگ های p دارای margin-bottom ای برابر با نصف فاصله خطوط و به صورت پیش فرض 10px می باشند.

در این آموزش نگاهی می اندازیم به برخی از المان های html که با کمی تفاوت در بوت استرپ مورد استفاده قرار می گیرند:

تگ های <h1>-<h6> :

به صورت پیش فرض، بوت استرپ این تگ های عنوان را به شکل زیر استفاده می کند:

 

تگ <small>: این تگ در بوت استرپ، برای نمایش متنی کوچکتر از فونت اصلی استفاده می شود.

تگ <mark>: برای هایلایت کردن یک متن یا کلمه استفاده می شود، به این صورت که متن یا کلمه مورد نظر داخل این تگ قرار می گیرد.

تگ <abbr>: برای زیر خط دار کردن متن یا کلمه داخل آن استفاده می شود.

تگ <blockquote>: برای مطالبی استفاده می شود که حالت نقل قول دارند.

تگ ها <dl><dt></dt><dd></dd></dl>: برای ایجاد لیستی از موارد استفاده میشود، مثل کد زیر:

    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>

که خروجی آن به شکل زیر است:

تگ <code></code>: برای نمایش یک متن مهم که میخواهیم رنگ قرمز داشته باشد و هایلایت باشد، استفاده میکنیم.

تگ <pre> : برای زمانیست که میخواهیم یک متن یا کدی را در خطوط جداگانه نمایش دهیم، تقریبا مانند تگ p عمل میکند.

 

رنگ ها و پس زمینه های متنی:

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

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

خروجی:

همچنین بوت استرپ کلاس هایی برای نمایش پیغام های با پس زمینه های مختلف دارد که به شرح ذیل هستند:

bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger

 

خروجی به ترتیب کلاس های بالا:

برخی از کلاس های مفید دیگر به شرح ذیل هستند:

lead : برای برجسته کردن یک مطلب استفاده می شود بویژه برای تگ های head و عناوین

text-left: تراز کردن متن از سمت چپ

text-center : وسط چین کردن متن

text-right: راست چین کردن متن

text-justify : ترازبندی کامل متن برای نمایش متن در حالت تمیز تر و شکیلتر

text-lowercase : تمام حروف انگلیسی داخل خود را با حروف کوچک انگلیسی نمایش می دهد.

text-uppercase : تمام حروف انگلیسی داخل خود را با حروف بزرگ انگلیسی نمایش می دهد.

text-capitalize : حروف اول تمام کلمات داخل خود را به صورت بزرگ به نمایش در می آورد.

list-unstyled : این کلاس list-style:none را به تگ های لیست ul-li اعمال میکند یعنی تگ های لیست رو بدون هیچ استایلی به نمایش می گذارد.

list-inline : کل آیتم های لیست را به جای اینکه در خطوط مختلف نمایش دهد، همه در یک خط به نمایش می گذارد.

pre-scrollable : المان های داخل این کلاس از ارتفاع بالاتر از 350px اسکرول میخورند.


نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )