دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۲
  • مرداد

جلسه ۰۳ : آشنایی با متن و تایپوگرافی در Bootstrap 3

  • دسته‌بندی‌ها :
جلسه ۰۳ : آشنایی با متن و تایپوگرافی در Bootstrap 3
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل Bootstrap 3 را دنبال می کنند. متن ها از اصلی ترین بخش هایی هستند که محتوای یک صفحه وب را تشکیل می دهند. ایجاد طرح ها و Style های متنی در محتوای وب سایت، نقش بسزایی در جلب توجه کاربران و بازدیدکنندگان وب سایت به محتوای صفحات وب را دارد. سیستم Bootstrap نیز کلاسهای گسترده ای را برای ایجاد فرمت ها و Style های متنوع متنی را ارائه می دهد. در ادامه مباحث فوق به آشنایی با متن و تایپوگرافی در Bootstrap 3 و استفاده از کلاسهای آماده ی متنی در Bootstrap 3 ، می پردازیم.

      متن و تایپوگرافی در Bootstrap 3

      تنطیمات پیش فرض

      بصورت پیش فرض Bootstrap 3 تنظیمات متن را برای font-size برابر با ۱۴px و ارتفاع هر خط را ۱٫۴۲۸ تعریف می کند.

      تنظیمات فوق برای تمام عناصر <body> و تگ <p> اعمال می شود.

      علاوه بر این، تمام عناصر <p> یک حاشیه پایین دارند. که نصف ارتفاع آن، محاسبه می شود (به طور پیش فرض ۱۰px).

      بوت استرپ و پیش فرض های مرورگرها

      در ادامه ی بخش به بعضی از عناصر متنی html که درآن بوت استرپ از تنظیمات پیش فرض مرورگر استفاده می کند، می پردازیم.

      تگ های <h1> – <h6>

      Bootstrap 3 در style سربرگ ها (heading) که شامل تگ های : <h1> تا <h6> می شود. خصوصیت font-weight ، را bold کرده و مقدار font-size را با واحد increas ، تعریف کرده است.

      آشنایی با متن و تایپوگرافی در Bootstrap 3

      نمایش heading

      از Display headings بیشتر از normal headings ، برای برجسته کردن عناوین ، استفاده می شود.

       

      نمایش heading

      نمایش heading

      تگ <small>

       

      در Bootstrap 3 ، از تگ <small> ، برای برجسته کردن یک متن ، استفاده می شود.

      h1 heading secondary text

      h2 heading secondary text

      h3 heading secondary text

      h4 heading secondary text

      h5 heading secondary text
      h6 heading secondary text

      تگ <mark>

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

       

      تگ <abbr>

      از تگ <abbr> نیز برای مخفف کردن عبارات یا کلمه ای که از حروف اول کلمات دیگر ترکیب شده  را نشان می دهد مانند”www”:

      تگ <blockquote>

      از کلاس .blockquote در تگ <blockquote> ، نیز برای نقل قول از شخص یا از جایی دیگر ، استفاده می شود.

       

      تگ blockquote

      تگ blockquote

      تگ <dl>

      از تگ <dl> نیز برای طراحی به شیوه زیر استفاده می شود:

       

      تگ dl

      تگ dl

      تگ <code>

      از تگ <code> ، نیز برای نایش دادن کد ها و دستورات در متحوای سایت ، استفاده می شود.

      مثال:

      The following HTML elements: span, section, and div defines a section in a document.

      تگ <kbd>

      از این تگ نیز برای پر رنگ کردن بخش های مهم و کلیدی متن، مانند کلید های میانبر و … استفاده می شود.

      مثال:

      تگ kbd

      تگ kbd

      تگ <pre>

      این عنصر متن ها را به همان صورتی که تایپ شود، نمایش می دهد.

      کلاسهای بیشتری برای مدیریت متن

      در Bootstrap 3 کلاسهای آماده ی متنوعی برای مدیریت متن وجود دارد:

       

      کلاسهای بیشتری برای مدیریت متن

      کلاسهای بیشتری برای مدیریت متن

       کلام آخر

      در مرور مباحث آموزشی بخش آشنایی با متن و تایپوگرافی در Bootstrap 3 شما را با کلاسهای Style متنی مهم و پر کاربرد سیستم Bootstrap آشنا کردیم، امیدواریم که مباحث فوق، مورد توجه و استفاده ی شما قرار گرفته باشد.

      QR:  جلسه ۰۳ : آشنایی با متن و تایپوگرافی در Bootstrap 3
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر