0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1060
تاریخ بروزرسانی 28 جولای 2019

آموزش بوت استرپ استایل دهی به متن در 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 را یاد گرفتید و با استایل دهی به متن در بوت استرپ آشنا شدید. آموزش بوت استرپ همچنان ادامه خواهد داشت پس منتظر مقالات بعدی ما باشید

مطالب مرتبط
9 ویژگی مهم CSS در طراحی وب
مطالعه :

در این مقاله قصد داریم  تا با 9 ویژگی مهم CSS در طراحی وب آشنا شویم. 9 ویژگی مهم CSS در طراحی وب در طی یادگیری css به طور کامل با تمامی ویژگی های Css آشنا شدیم و یادگرفتیم که هر کدام از این ویژگی ها چه کاربردی دارند و چگونه باید از انها استفاده کنیم،در این مقاله نیز میخواهیم به صورت کاملا خلاصه با 9 ویژگی کاربردی css آشنا شویم .     1) font-face     یکی از ویژگی های  CSS3 که درسال های اخیر باعث تحولاتی در بخش طراحی وب شده  font-faceاست. این ویژگی به ما  این امکان را میدهد  که هر فونتی که می خواهیم ، به راحتی با فرمت های مختلف و تنظیمات دلخواه در هر بخش از کدCSS  استفاده کنیم. از این ویژگی برای انتخاب ازبین چندین هزار فونت رایگان ، برای صفحه وب خود استفاده کنید. @font-face { font-family: Blackout; src: url(“assests/blackout.ttf”) format(“truetype”); } 2)  media از کوئری های media برای ساخت صفحات واکنش گرا یا طراحی وبسایت بر اساس شرایط دستگاه مورد استفاده قرار میگیرند. با استفاده از کوئری media  و ویژگی min-width  ما می توانیم عناصر صفحه ی وب را به شکل بهتری و با توجه به شرایط موجود به نمایش کاربر در بیاورید. @media screen and (max-width: 960px) { } 3)   clearfix استفاده از clearfix   برای مواقعی که overflow: hidden کار نمیکند, جایگزین […]

Google analytics
مطالعه :

Google analytics در این مطلب میخواهیم در مورد google analytics با شما صحبت کنیم. ابتدا تاریخچه google analytics سپس در مورد چگونگی ثبت نام در آن و مکانیزم کارکرد آن را بررسی می کنیم.     تاریخچه: در  مارس 2005 گوگل شرکت urchin را تحت مالکیت خود در آورد. کاربران اینترنت برای اولین بار در 11 نوامبر 2005  این سرویس گوگل را شناختند،سرویسی که تا قبل از آن که توسط گوگل خریداری شود به نام urchin  و با قیمت 500 دلار در بازار عرضه می شد. اما گوگل هنگام رو نمایی از این سرویس اعلام کرد که این سرویس به صورت رایگان عرضه خواهد شد که این گفته باعث ایجاد مشکلات بسیاری در سرور های گوگل شد چرا که ارائه ی رایگان این سرویس خدمت بزرگی برای صاحبان وبسایت و کسب و کار ها بود . استقبال از این سرویس گوگل تا حدی زیاد بود که گوگل مجبور شد به مدت 10 ماه ثبت نام های این سرویس را ببندد. در زمان بسته شدن ثبت نام گوگل ماشین جدیدی به این سرویس اضافه کرد تا عملکرد google analytics  بهبود پیدا کند.همان ط.ر که پیشبینی می شد باز شدن این سرویس پس از 10 ماه باعث حجوم کاربران بسیاری شد و این سرویس در عرض چند ماه همه گیر و محبوب شد. ثبت نام در google analytics : عکس زیر تمامی […]

3 لیست مهم در HTML5
مطالعه :

در این مقاله میخواهیم 3 لیست مهم در HTML5 را به شما بگوییم. 3 لیست مهم در HTML5 لیست ها کاربردهای فراوانی در متون مختلف داشته و حتما تا به حال نمونه هایی از آن ها را در کتاب ها ، مجلات ، روزنامه ها و.. دیده اید. اما کاربرد لیست ها محدود به مطالب چاپی نمی شود و امروزه در انواع صفحات وب ، شبکه های اجتماعی و یا پیام رسان ها نیز دیده می شوند. با کمک لیست ها می توانید موضوعات مرتبط به هم را در یک دسته قرار داده و آن ها را گروه بندی کنید. HTML نیز به منظور ایجاد انواع لیست ها در صفحات وب تگ هایی مشخص کرده است. در HTML5  سه نوع لیست با کاربردهای متفاوت وجود دارد که شامل موارد زیر است : Unordered Lists Ordered Lists Description Lists در ادامه به کاربرد و نحوه ی نوشتن هر لیست می پردازیم :     Unordered Lists در این لیست ها ترتیب آیتم ها اهمیت نداشته و تنها عناصر مرتبط به هم در یک لیست قرار می گیرند. به عنوان مثال به لیست زیر توجه کنید : انواع نوشیدنی های گرم قهوه چای نسکافه همان طور که مشاهده می کنید در این لیست ترتیب اهمیت نداشته و فرقی نمی کند چه آیتمی اول و یا اخر باشد. برای نوشتن چنین لیست هایی […]

پشتیبانی سایت و بروزرسانی سایت
مطالعه :

پس چنانچه وقت کافی‌ برای بروز رسانی سایت خود را ندارید. یا اطلاعاتتان‌ در مورد سئو و ترفند‌های بروز رسانی سایت کافی نیست. می توانید بروز رسانی مطلب و پشتیبانی سایت خود را به تیم طراحی سایت و سئو سایت وب یار بسپارید .
تیم طراحی سایت وب یار با نیروهای آموزش دیده و حرفه ای در زمینه ی سئو و ترفند‌های بروز رسانی سایت، با صبر و حوصله ی فراوان پاسخگوی مشکلات شما خواهند بود و خدمات پشتیبانی سایت و بروزرسانی سایت را با بالاترین کیفیت ارائه می نماید.

مطالعه : 7 دقیقه

طراحی آرم یا لوگو و ست اداری آیا تا حالا به چگونه مجسم شدن برند خودتون تو ذهن مشتریانتون فکر کرده اید؟ فکر می کنید وقتی که نام شرکت یا حوزه ی صنعتی شما در مکانی برده میشه دیگران چه تصویری از برند شما از ذهنشون به سرعت رد میشه؟ به نظر خودتون آرم یا لوگو شما به شکلی هست که بتونه ملکه ذهن دیگران بشه؟ اگر تو پاسخ به همه ی این سوالات شک داری بهتره با تیم طراحی آرم لوگو ست اداری اصفهان وب یار همراه بشی تا اطمینان خاطر پیدا کنی طراحی لوگو و آرم شما به نحوی هست که بتونه بیانگر تخصص شما و برجسته شدن شما در میان رقباتون بشه.     طراحی آرم یا لوگو و ست اداری برای هر شرکت یا مؤسسه یا سازمان یک امر ضروری محسوب می شود. با داشتن یک آرم یا لوگوی منحصر به فرد به راحتی می توانید در میان رقبای خود بیشتر و بهتر بدرخشید. همچنین در میان مشتریان به وسیله آرم یا لوگوی خاص خود شناخته شده و برند می شوید و مشتریان ثابت بسیاری را بدست می آورید. وجود یک نشان زیبا و چشمگیر که در ست اداری شما نیز مشاهده شود احساس خوب همراه با نمایش قدرت شما را در ضمیر مشتریانتان بر می انگیزد. با توجه به اینکه هنوز برخی از مشتریان تفاوت […]

امنیت ورد پرس
مطالعه :

آموزش امنیت وردپرس امنیت در وردپرس از اهمیت بسیار بالایی برخوردار است  و بطور جدی به آن پرداخته می‌شود اما درست مانند هر سیستم دیگری، در صورت عدم رعایت برخی نکات ایمنی ساده ممکن است با مشکلات امنیتی احتمالی برخورد کنیم. در این مطلب آموزش امنیت وردپرس به بررسی برخی از معمول‌ترین آسیب پذیری‌ها و راهکارهای بالا بردن امنیت سایت وردپرس می‌پردازیم. مقاله ی امنیت سایت راه حل نهایی برای تمامی دغدغه‌های امنیتی شما نیست. اگر نگرانی بخصوصی دارید، بهتر است با کسانی که به دانش آنها در زمینه‌ی امنیت کامپیوتر و وردپرس اطمینان دارید، نگرانی‌ها و سوالات خود را در میان بگذارید. تیم وب یار با خدمات و پشتیبانی سایت به صورت 24 ساعته ، امنیت خاطر را برای تمامی مشتریان خود به ارمغان می آورد.     امنیت سایت چیست؟ اساساً وقتی صحبت از امنیت می‌شود، منظورمان سیستم‌های کاملاً امن نیستند. یافتن چنین چیزی عملاً غیر ممکن بنظر می‌رسد. یک سرور امن از حریم خصوصی، یکپارچگی و در دسترس بودن منابع تحت کنترل سرور محافظت و اطمینان حاصل می‌کند. ویژگی‌های یک هاست قابل اطمینان عبارتند از: مشتاقانه درمورد انتظارات و نگرانی‌های امنیتی شما وهمچنین ویژگی‌ها و پروسه‌های امنیتی که هاستینگ در اختیار شما خواهند گذاشت، با شما صحبت می‌کند. آخرین و با ثبات‌ترین نسخه‌های نرم‌افزار سرور را در اختیارتان می‌گذارد. روش‌های قابل اعتماد بازیابی اطلاعات و پشتیبان‌گیری (بک […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *