چطور می تونم کمکتون کنم؟

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

بوت استرپ محبوب ترین فریم ورک HTML، CSS، و چارچوب جاوا اسکریپت برای ریسپانسیو کردن سایت ها در تلفن همراه است.
 در ادامه تمامی کلاس های آن عنوان شده است :

 

 

 

تنظیمات پیش فرض در bootstrap

به صورت کلی تمامی فوت ها (font-size) در Bootstrap دارای اندازه 14px و با line-height (ارتفاع خطوط) 1.428 این خاصیت روی تمامی بخش های Body و تمامی پاراگراف ها به صورت پیش فرض وجود دارد.

لیست کلاس های مربوط به کار با متن

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

کلاس توضیحات پیش نمایش
h1 - h6 or .h1 - .h6 تگ های مربوط به هدر که اندازه ی فوت های آن را به ترتیب نام می بریم
H1(36px) H2(30px) H3(24px) H4(18px) H5(14px) H6(12px)
h6 Bootstrap heading
h5 Bootstrap heading
small متن روشن تر شود و معمولاً به عنوان دومین متن در هر هدری به کار می رود

h4 Bootstrap heading (18px)

.small متن کوچک تر می شود(85 درصد نسبت به متن اصلی کوچک تر است)

This paragraph is smaller

.lead متنی ایستاده می سازد(متن حالتی کمی برجسته و بزرگ تر دارد)

This paragraph stands out

mark Or .mark متن هایلایت می شود(پیش فرض به رنگ زرد هایلایت می شود)

Use the mark element to highlight text

del برای نمایش دادن متن حذف شده یا خط خورده استفاده می شود

Use the del element to indicate deleted text

s نشان می دهد که قسمتی از متن ارتباطی با کل متن ندارد(خط خورده)

Use the s element to indicate text that is no longer relevant

ins نشان می دهد که متن جدیدی اضافه شده است و روی صحیح بودن آن تاکیید دارد (معمولاً به همراه تگ del استفاده می شود)

Use the ins element to indicate inserted text

u برای زیر خط دار کردن متن اضافه می شود

Use the u element to indicate underlined text

strong برای تو پر کردن متن اضافه می شود

Use the strong element to indicate bold text

em باعث کج شدن متن می شود و برای تاکیید داشتن روی متن استفاده می شود

Use the em element to indicate italic text

.text-left برای چپ چین کردن متنی استفاده می شود

Left-aligned text

.text-center برای چپ وسط چین کردن متنی استفاده می شود

Center-aligned text

.text-right برای راست چین کردن متنی استفاده می شود

Right-aligned text

.text-justify برای تراز از دو طرف کردن متنی استفاده می شود

Justified text. Justified text. Justified text

.text-nowrap هر متن طولانی داخل این کلاس شکسته نمی شود به خط پایین حتی اگر عرض صفحه زیاد شود

No wrap text. No wrap text. No wrap text. No wrap text

.text-lowercase هر متنی داخل این کلاس قرار بگیرد حروف آن ، تبدیل به حروف کوچک می شود

Lowercased text

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

Uppercased text

.text-capitalize باعث می شود ابتدا هر کلمه با حروف بزرگ نوشته شود

Capitalized text

abbr از این تگ برای نمایش مخفف استفاده می شود و دارای attribute به نام title می باشد و باعث می شود کلمه حالتی زیر خط دار و نقطه چینی به خود بگیرد که پس از قرار گیری ماوس روی آن علامت ماوس به علامت سوال تغییر می کند و مقدار درون title جلوی ماوس نمایش داده می شود.

The WHO was founded in 1948

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

The WHO was founded in 1948-slightly smaller abbr

address برای تعریف آدرس و اطلاعات تماس از این تگ استفاده می شود
Written by Jon Doe.
Example.com
Box 564, Disneyland
USA
blockquote برای تعریف نقل قول از این تگ استفاده می کنیم که دارای تگ دیگری داخل خود می باشد به نام footer که در قسمت footer منبع نقل قول را می نویسیم

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally

From WWF's website
.blockquote-reverse برای راست چین کردن نقل قول ها داخل تگ blockquote از این کلاس استفاده می کنیم

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally

From WWF's website
ul تعریف لیست نامرتب
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
ol تعریف لیست مرتب
  1. Coffee
  2. Tea
  3. Milk
.list-unstyled برای پاک کردن استایل پیش فرض (توپر) از حاشیه سمت چپ همچنین برای کار با لیست تودر تو استفاده می شود
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
.list-inline اگر از این کلاس استفاده کنید تمامی مقادیر لیست در یک خط قرار می گیرد
  • Coffee
  • Tea
  • Milk
dl تعریف لیست معنی و توضیحات
Coffee
- black hot drink
Milk
- white cold drink
.dl-horizontal برای تعریف لیست معنی به صورت خطی استفاده می شود
Coffee
- black hot drink
Milk
- white cold drink
code برای اضافه کردن کدهای برنامه نویسی استفاده می شود

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

kbd برای اضافه کردن دکمه های کیبورد به متن استفاده می شود

Use ctrl + p to open the Print dialog box

pre برای در نظر گرفتن فضا های خالی در کد html و نوشتن متن چند خطی استفاده می شود(بک گراند خاکستری می شود)
Text in a pre element
      is displayed in a fixed-width
      font, and it preserves
      both      spaces and
      line breaks.
pre class="pre-scrollable" اگر متن داخل این تگ و کلاس max-height آن بیشتر از 350px شود برای مشاهده ادامه متن باید اسکرول کنید
Text in a pre element
      is displayed in a fixed-width
      font, and it preserves
      both      spaces and
      line breaks.
samp برای نمایش یک نمونه کد خروجی کامپیوتر از این تگ استفاده می کنیم

This text is output from a computer program....

var برای نمایش متغییر ها استفاده می شود x=ab + y

x = ab + y

طراحی سایت,طراحی سایت وب رند,وبرند,وب رند,بوت استرپ,bootstrap,فریم ورک,جاوا اسکریپت,ریسپانسیو,ریسپانسیو بودن تلفن همراه,html,css