saeed410
Member
در قسمت قبل روشهای مختلف لایه بندی در بوت استرپ را مورد بحث و بررسی قرار دادیم . در این قسمت روش استایل دهی به متن های مختلف در بوت استرپ را بررسی میکنیم.با استفاده از این کلاسها فرآیند
[h=1]طراحی سایت[/h] آسانتر خواهد شد. همچنین کلاسهایی وجود دارند که با استفاده از آنها میتوانید تعیین کنید اشیاء شما در کدام یک از دستگاهها قابل نمایش باشد و یا در کدامیک نمایش داده نشود. به این ترتیب میتوانید صفحات خود را [h=1]واکنش گرا کنید.[/h][h=2]تنظیمات پیش فرض :[/h] بوت استرپ به صورت پیش فرض از فونتهای Helvetica Neue, Helvetica, Arial, and sans-serif استفاده میکند. همچنین اندازه فونت همه متن ها font-size=14px است که فاصله بین خطوط یا line-height: 1.428 است. این تنظیمات در تمام تگ body و پاراگراف ها اعمال میشود. همچنین تگ های پاراگراف p از پایین به اندازه نصف فاصله خطوط مارجین دارند که بصورت پیشفرض 10px است.
[h=2]هدینگ ها در بوت استرپ :[/h] کد:
[h=2]تگ small در بوت استرپ :[/h] با استفاده از این تگ میتوانید متن ثانویه ایی با ابعاد کوچکتر از تگ پدر خود ایجاد کنید.
[h=2]تگ mark در بوت استرپ :[/h] با استفاده از این تگ میتوانید یک قسمت از متن را پر رنگ تر کنید.مثال:
[h=2]تگ abbr در بوت استرپ :[/h] از این تگ برای ایجاد کلمات مختصر به صورت tooltip استفاده میشود.
کد :
[h=2]نقل قول با استفاده از blockquote در بوت استرپ :[/h] کد :
[h=2]تگ dl در بوت استرپ :[/h] برای ایجاد لیستی از کلمات و تعریف آنها استفاده میشود.مثال :
[h=2]تگ code در بوت استرپ :[/h]
[h=2]تگ kbd در بوت استرپ :[/h] برای نمایش کلید های کیبورد میتوانید از این تگ استفاده کنید :
[h=2]کلاسهای رنگ بندی متن در بوت استرپ:[/h]
[h=2]رنگ های پس زمینه متن در بوت استرپ :[/h] کلاسهای زیر برای رنگ بندی پس زمینه متن ها مورد استفاده قرار میگیرند : .bg-important, .bg-success, bg-info, bg-warning, ,.bg-danger
مثال :
در این قسمت اکثر کلاسهای مهم برای استایل دهی به متن ها را در بوت استرپ یاد گرفتیم. برای دیدن یک مرجع کامل از این کلاسها میتوانید به این آدرس مراجعه کنید: مرجع کامل استایلهای متن در بوت استرپ
در گروه: بوت استرپ و CSS
منبع : طراحی سایت
[h=1]طراحی سایت[/h] آسانتر خواهد شد. همچنین کلاسهایی وجود دارند که با استفاده از آنها میتوانید تعیین کنید اشیاء شما در کدام یک از دستگاهها قابل نمایش باشد و یا در کدامیک نمایش داده نشود. به این ترتیب میتوانید صفحات خود را [h=1]واکنش گرا کنید.[/h][h=2]تنظیمات پیش فرض :[/h] بوت استرپ به صورت پیش فرض از فونتهای Helvetica Neue, Helvetica, Arial, and sans-serif استفاده میکند. همچنین اندازه فونت همه متن ها font-size=14px است که فاصله بین خطوط یا line-height: 1.428 است. این تنظیمات در تمام تگ body و پاراگراف ها اعمال میشود. همچنین تگ های پاراگراف p از پایین به اندازه نصف فاصله خطوط مارجین دارند که بصورت پیشفرض 10px است.
[h=2]هدینگ ها در بوت استرپ :[/h] کد:
<div class="container">
<h1>هدینگ نو اول (36px)</h1>
<h2>هدینگ نوع دوم (30px)</h2>
<h3>هدینگ نوع سوم (24px)</h3>
<h4>هدینگ نوع چهارم (18px)</h4>
<h5>هدینگ نوع پنجم (14px)</h5>
<h6>هدینگ نوع ششم (12px)</h6>
</div>
<h1>هدینگ نو اول (36px)</h1>
<h2>هدینگ نوع دوم (30px)</h2>
<h3>هدینگ نوع سوم (24px)</h3>
<h4>هدینگ نوع چهارم (18px)</h4>
<h5>هدینگ نوع پنجم (14px)</h5>
<h6>هدینگ نوع ششم (12px)</h6>
</div>
تصویر دمو:
<div class="container">
<h1>هدینگ نو اول (36px) <small>متن ثانویه</small></h1>
<h2>هدینگ نوع دوم (30px) <small>متن ثانویه</small></h2>
<h3>هدینگ نوع سوم (24px) <small>متن ثانویه</small></h3>
<h4>هدینگ نوع چهارم (18px) <small>متن ثانویه</small></h4>
<h5>هدینگ نوع پنجم (14px) <small>متن ثانویه</small></h5>
<h6>هدینگ نوع ششم (12px) <small>متن ثانویه</small></h6>
</div>
<h1>هدینگ نو اول (36px) <small>متن ثانویه</small></h1>
<h2>هدینگ نوع دوم (30px) <small>متن ثانویه</small></h2>
<h3>هدینگ نوع سوم (24px) <small>متن ثانویه</small></h3>
<h4>هدینگ نوع چهارم (18px) <small>متن ثانویه</small></h4>
<h5>هدینگ نوع پنجم (14px) <small>متن ثانویه</small></h5>
<h6>هدینگ نوع ششم (12px) <small>متن ثانویه</small></h6>
</div>
تصویر نمونه :
<div class="container">
<h1>متن هایلایت</h1>
<p>این روزها استفاده از <mark>بوت استرپ و طراحی واکنش گرا </mark> رواج یافته است.</p>
</div>
<h1>متن هایلایت</h1>
<p>این روزها استفاده از <mark>بوت استرپ و طراحی واکنش گرا </mark> رواج یافته است.</p>
</div>
تصویر نمونه :
کد :
<div class="container">
<h1>اختصارو کوتاه سازی </h1>
<p>شرکت <abbr title="سیستم پردازان نوین آساک ">سیپنا</abbr> خدمات سئو ارائه میدهد.</p>
</div>
<h1>اختصارو کوتاه سازی </h1>
<p>شرکت <abbr title="سیستم پردازان نوین آساک ">سیپنا</abbr> خدمات سئو ارائه میدهد.</p>
</div>
تصویر نمونه این کد :
<div class="container">
<h1>نقل قول</h1>
<blockquote>
<p>بوت استرپ در سال 2011 در اختیار همه قرار گرفت</p>
<footer>برگرفته از سایت بوت استرپ </footer>
</blockquote>
</div>
<h1>نقل قول</h1>
<blockquote>
<p>بوت استرپ در سال 2011 در اختیار همه قرار گرفت</p>
<footer>برگرفته از سایت بوت استرپ </footer>
</blockquote>
</div>
تصویر نمونه:
<div class="container">
<h1>لیست کلمات</h1>
<dl>
<dt>قهوه </dt>
<dd>- نوشیدنی سیاه و داغ</dd>
<dt>شیر</dt>
<dd>- نوشیدنی سفید و سرد</dd>
</dl>
</div>
<h1>لیست کلمات</h1>
<dl>
<dt>قهوه </dt>
<dd>- نوشیدنی سیاه و داغ</dd>
<dt>شیر</dt>
<dd>- نوشیدنی سفید و سرد</dd>
</dl>
</div>
تصویر نمونه این کد :
برای جداسازی بعضی از قسمت های متن استفاده میشود .مثال :
<div class="container">
<p>تگ های : <code>span</code>,
<code>section</code>,
و <code>div</code> یک بخش مجزا را در اسناد html تعریف میکنند .</p>
</div>
<p>تگ های : <code>span</code>,
<code>section</code>,
و <code>div</code> یک بخش مجزا را در اسناد html تعریف میکنند .</p>
</div>
تصویر نمونه :
<div class="container">
<p>از کلیدهای ترکیبی<kbd>ctrl + p</kbd>
برای باز شدن پنجره چاپ استفاده کنید.</p>
</div>
<p>از کلیدهای ترکیبی<kbd>ctrl + p</kbd>
برای باز شدن پنجره چاپ استفاده کنید.</p>
</div>
تصویر نمونه :
کلاسهای زیر به صورت پیش فرض در بوت استرپ برای رنگ بندی متن ها مورد استفاده قرار میگیرند: .text-muted, .text-important, .text-success, .text-info, .text-warning, , .text-danger
کد :
<div class="container">
<p class="text-muted">این متن ضعیف شده است.</p>
<p class="text-primary">این متن مهم است.</p>
<p class="text-success">این متن پیام موفق است..</p>
<p class="text-info">این متن اطلاعات را نشان میدهد.</p>
<p class="text-warning">این متن اخطار را نشان میدهد.</p>
<p class="text-danger">این متن خطر را نشان میدهد.</p>
</div>
<p class="text-muted">این متن ضعیف شده است.</p>
<p class="text-primary">این متن مهم است.</p>
<p class="text-success">این متن پیام موفق است..</p>
<p class="text-info">این متن اطلاعات را نشان میدهد.</p>
<p class="text-warning">این متن اخطار را نشان میدهد.</p>
<p class="text-danger">این متن خطر را نشان میدهد.</p>
</div>
تصویر نمونه این کد :
مثال :
<div class="container">
<p class="bg-primary">این متن مهم است.</p>
<p class="bg-success">این متن پیام موفق است.</p>
<p class="bg-info">این متن اطلاعات را نشان میدهد.</p>
<p class="bg-warning">این متن یک اخطار را نشان میدهد.</p>
<p class="bg-danger">این متن خطر را نشان میدهد.</p>
</div>
<p class="bg-primary">این متن مهم است.</p>
<p class="bg-success">این متن پیام موفق است.</p>
<p class="bg-info">این متن اطلاعات را نشان میدهد.</p>
<p class="bg-warning">این متن یک اخطار را نشان میدهد.</p>
<p class="bg-danger">این متن خطر را نشان میدهد.</p>
</div>
تصویر نمونه این کد به صورت زیر است :
در گروه: بوت استرپ و CSS
منبع : طراحی سایت
