آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Typography در bootstrap

دوره های مرتبط با این مقاله

کار با تیتر

شما می توانید تمام تیترهای HTMLی (< h1>تا< h6>)را از طریق بوتسترپ تعریف کنید. همچنین اگر می خواهید روش به کار برده شده روی متن مانند تیترها باشد، می توانید از گروه های تیتر .h1 تا .h6 نیز استفاده کنید.

مثال:

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

خروجی مثال بالا مانند تصویر زیر خواهد بود.


آموزش bootstrap

به علاوه می توانید از برچسب یا به همراه گروه .small برای نمایش متن ثانویه ی هر تیتر در یک نمونه ی کوچکتر و روشن تر استفاده کنید.

مثال:

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

خروجی مثال بالا شبیه تصویر زیر خواهد بود .


آموزش bootstrap

ایجاد تیترهای صفحه

می توانید با استفاده از مولفه ی تیتر صفحه، تیترخود را طوری بسازید که با دیگر تیترهای روی صفحه متفاوت به نظر برسد. همچنین می توانید از برچسب برای مارکدار کردن متن مربوط به تیتر استفاده کنید.

مثال:


خروجی مثال بالا مانند تصویر زیر خواهد بود .


آموزش bootstrap

کار با پاراگراف ها

اندازه فونت جهانی بوت استرپ 14px با ارتفاع خط 1.428 می باشد که برای متن و همه ی پاراگراف استفاده می شود. علاوه بر آن دکمه ی حاشیه از نیمه ی ارتفاع خط برای کل پاراگراف ها استفاده می شود. شما می توانید پاراگرافی با اضافه کردن گروه .lead بسازید.


مثال:

This is how a normal paragraph looks like in Twitter Bootstrap.

‎ ‎

This is how a paragraph stands out in Twitter Bootstrap.


کد HTML مثال بالا نتیجه ی زیر را به دنبال دارد.

آموزش bootstrap

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


Left aligned text.

Center aligned text.

Right aligned text.

Justified text

No wrap text.


قالب بندی متن twitter bootstrap

شما در استفاده از برچسب های قالب بندی متن مانند ، و برای بولد کردن، ایتالیک کردن و یا کوچک کردن متن خود آزاد هستید، به همان روشی که در HTML انجام می دادید.

مثال:

This is bold text

This is big text

This is computer code

This is emphasized text

This is italic text

This is highlighted text

This is small text

This is strongly emphasized text

This is subscript and superscript

This text is inserted to the document

This text is deleted from the document


‎خروجی مثال بالا مانند تصویر زیر می باشد.


آموزش bootstrap

گروه های تغییردهی متن

شما می توانید همچنین متن را به حروف کوچک یا بزرگ تغییر دهید .


The quick brown fox jumps over the lazy dog.

‎ ‎

The quick brown fox jumps over the lazy dog.

‎ ‎

The quick brown fox jumps over the lazy dog.


خروجی مثال بالا مانند تصویر زیر می باشد .

Bootstrap

گروه های تاکید در متن

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

مثال:
 
    

Muted: This text is grayed out.

‎ ‎

Important: Please read the instructions carefully before proceed.

‎ ‎

Success: Your message has been sent successfully.

‎ ‎

Note: You must agree with the terms and conditions to complete the sign up ‎process.

‎ ‎

Warning: There was a problem with your network connection.

‎ ‎

Error: An error has been occurred while submitting your data.

خروجی مثال بالا مانند زیر می باشد .


آموزش bootstrap

طراحی نقل قول

شما می توانید به نقل قول خود نیز ظاهری زیبا بدهید – تنها بااستفاده از استاندارد نقل قول ها را تعریف کنید و نسخه ی طراحی بوت استرپ بقیه کارها را انجام خواهد داد


مثال:

The world is a dangerous place to live; not because of the people who are evil, but because of ‎the people who don't do anything about it.

‎ ‎by Albert Einstein

خروجی مثال بالا مانند زیر خواهد بود .


آموزش bootstrap

همچنین می توانید از طریق شناور ساختن آن در سمت راست و با به کار بردن گروه .pull-right در عنصر
نقل قول را در سمت راست تنظیم کنید.

مثال:
‎ ‎

The world is a dangerous place to live; not because of the people who are evil, but because of ‎the people who don't do anything about it.

‎ ‎by Albert Einstein

خروجی مثال بالا مانند زیر خواهد بود.

آموزش bootstrap
  • 1431
  •    1724
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .