031- 344 500 60

طراحی سایت اصفهان | سئو سایت اصفهان
طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی شرکت, طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی اینترنتی اصفهان , تبلیغات اینترنتی , 09133886881

صفحه نخست » بلاگ » bootstrap » آموزش بوت استرپ استایل دهی به متن در bootstrap

آموزش بوت استرپ استایل دهی به متن در bootstrap

تاریخ:۸ام مرداد ۱۳۹۶
پشتیبانی وب یار
55

آموزش بوت استرپ استایل دهی به متن در bootstrap

با ادامه آموزش بوت استرپ bootstrap و این بار آموزش استایل دهی به متن در bootstrap توسط تیم وب یار در خدمت شما هستیم. در مقالهآموزش بوت استرپ استایل دهی به متن در bootstrap ،با معرفی تگ های mark,small,hgroup  در خدمت شما هستیم.

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

تگ blockquote در بوت استرپ

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

آموزش تگ blockquote

بوت استرپ این تگ را به صورتی که در خروجی زیر می بینید استایل دهی می کند. برای نشان دادن نقل قول در سمت راست از کلاس blockquote-reverse استفاده می کنیم.

آموزش تگ های بوت استرپ

تگ های dl و code در بوت استرپ

تگ  dlبرای ایجاد لیست توضیحات است که عناصر لیست در تگ  dtقرار می گیرند و توضیحات این عناصر در تگ dd قرار داده می شوند.
تگ code برای نمایش یک متن مهم استفاده می شود. زمانی که از این تگ استفاده می کنید متن، هم هایلایت می شود و هم رنگ آن قرمز می شود. به کد زیر دقت کنید.

آموزش bootstrap

همان طور که در قسمت خروجی می بینید، استایل دهی به متن در بوت استرپ با استفاده از تگ dl و code به صورت زیر است.

خروجی کد بالا به صورت زیر است.

آموزش برنامه نویسی با بوت استرپ

تگ های kbd و  pre

تگ kbd برای نمایش ورودی های صفحه کلید استفاده می شود. برای مثال در کد زیر برای نمایش ctrl + p از این تگ استفاده شده است که می توانید در تصویر مربوط به خروجی کد، ظاهر استایل دهی به متن در بوت استرپ را با استفاده از تگ kbd مشاهده کنید.
تگ pre متن را به صورت preformatted نمایش می دهد. در واقع یعنی خطوط و فاصله هایی را که در متن وجود دارد، حفظ می کند. با دقت به کد زیر می توانید نحوه ی استفاده از تگ های kbd و pre را ببینید.

آموزشbootstrap

خروجی کد بالا به صورت زیر است.

آموزش تگ های bootstrap

کاربرد متن های رنگی در بوت استرپ

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

Text-muted

Text-primary

Text-success

Text-info

Text-warning

Text-danger

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

کاربرد متن های رنگی در بوت استرپ

خروجی کد بالا در این تصویر نمایش داده شده است.

آموزش bootstrap

کلاس های رنگ پس زمینه متن در بوت استرپ

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

  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger

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

آموزش برنامه نویسی با بوت استرپ

خروجی کد بالا

کدهای bootstrap

 

خب دوستان تا این جای کار تگ های blockquote، dl، code،  kbd  و pre را یاد گرفتید و با استایل دهی به متن در بوت استرپ آشنا شدید. آموزش بوت استرپ همچنان ادامه خواهد داشت پس منتظر مقالات بعدی ما باشید

 

درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

modal ها در بوت استرپ

modal ها در بوت استرپ

مدال در بوت استرپ مدال یک پنجره  محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود.  برای ساخت modal نیاز به کدهای html  ، css وjava script  دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را […]

دکمه های گروهی در bootstrap

دکمه ها در بوت استرپ – قسمت دوم

دکمه های گروهی در بوت استرپ – آموزش بوت استرپ تیم طراحی سایت وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی […]

آموزش دکمه ها در بوت استرپ

دکمه ها در بوت استرپ – قسمت اول

دکمه ها در بوت استرپ – آموزش بوت استرپ در این مقاله تیم طراحی سایت وب یار آموزش دکمه ها در بوت استرپ را برای شما عزیزان در نظر گرفته است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با […]

آموزش هشدارها در بوت استرپ

هشدارها در بوت استرپ – آموزش bootstrap

هشدارها در بوت استرپ در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد. هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید