سبد (0)

تبلیغات

تایپوگرافی در بوت استرپ

تایپوگرافی در بوت استرپ-Bootstrap Typography

Wiki

اندازه ی فونت پیش فرض عمومی در بوت استرپ 14px میباشد و اندازه ی line-height آن نیز 1.428 می باشد. این موضوع همچنین به تگ <body>  و تمام  پاراگراف ها نیز اعمال شده است. 

علاوه بر آن، تمام عناصر <p> به طور پیش فرض،  دارای یک margin-bottom به اندازه ی 10 پیکسل هستند. 


بوت استرپ و تنظیمات پیش فرض مرورگر

Wiki

بوت استرپ به طور پیش فرض، عنوان های HTML را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

h1 Bootstrap heading 36px

h2 Bootstrap heading 30px

(h3 Bootstrap heading (24px

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
خودتان امتحان کنید »

کاربرد عنصر <small> در بوت استرپ

Wiki

در بوت استرپ از عنصر <small> برای ایجاد یک متن ثانویه و شفاف تر در هر عنوان استفاده می شود(منظور متن secondary text است):

مثال (تایپوگرافی در بوت استرپ)

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text
خودتان امتحان کنید »

کاربرد عنصر<mark> در بوت استرپ

Wiki

بوت استرپ، عنصر اچ تی ام ال <mark> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Use the mark element to highlight text.
خودتان امتحان کنید »

کاربرد عنصر <abbr> در بوت استرپ

Wiki

بوت استرپ، عنصر اچ تی ام ال <abbr> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

The WHO was founded in 1948.
خودتان امتحان کنید »

کاربرد عنصر <blockquote> در بوت استرپ

Wiki

بوت استرپ، عنصر اچ تی ام ال <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
خودتان امتحان کنید »

برای نشان دادن نقل قول در سمت راست، از کلاس blockquote-reverse استفاده کنید:

مثال (تایپوگرافی در بوت استرپ)

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
خودتان امتحان کنید »

کاربرد عنصر <dl> در بوت استرپ

Wiki

بوت استرپ عنصر اچ تی ام ال <dl> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Coffee
- black hot drink
Milk
- white cold drink
خودتان امتحان کنید »

کاربرد عنصر <code> در بوت استرپ

Wiki

بوت استرپ عنصر اچ تی ام ال <code>  را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

The following HTML elements: spansection, and div defines a section in a document.
خودتان امتحان کنید »

 کاربرد عنصر<kbd> در بوت استرپ

Wiki

بوت استرپ عنصر اچ تی ام ال <kbd> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Use ctrl + p to open the Print dialog box.
خودتان امتحان کنید »

کاربرد عنصر <pre> در بوت استرپ

Wiki

بوتسترپ عنصر اچ تی ام ال <pre> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
خودتان امتحان کنید »

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

Wiki

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

  1. text-muted
  2. text-primary
  3. text-success
  4. text-info
  5. text-warning
  6. text-danger

مثال (کلاس های رنگی در بوت استرپ)

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

خودتان امتحان کنید »

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

  1. bg-primary
  2. bg-success
  3. bg-info
  4. bg-warning
  5. bg-danger

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

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

خودتان امتحان کنید »

انواع کلاس های تایپوگرافی در بوت استرپ

Wiki

کلاس های بوت استرپ زیر، می توانند برای استایل  دهی عناصر HTML مورد استفاده قرار بگیرند: 

کلاس توضیحات مثال
 lead.  برجسته کردن یک پاراگراف امتحان کنید
smal. یک متن کوچکتر را مشخص می کند(ست کردن به اندازه ی 85% عنصر والد) امتحان کنید
text-left. تراز بندی کردن یک متن به سمت چپ امنحان کنید
text-center. تراز بندی کردن یک متن به موقعیت وسط امتحان کنید
text-right. تراز بندی کردن یک متن به سمت راست امتحان کنید
text-justify. تراز بندی کردن یک متن به صورت نشکستن کلمات(justified) امتحان کنید
text-nowrap. تراز بندی کردن یک متن به صورت بدون شکست(nowrap) امتحان کنید
text-lowercase. متن با حروف کوچک را مشخص می کند امتحان کنید
text-uppercase. متن با حروف بزرگ را مشخص می کند امتحان کنید
text-capitalize.

متن با حروف بزرگ (capitalize) را مشخص می کند

امتحان کنید
initialism.

نمایش متن درون یک عنصر <abbr> در یک اندازه ی فونت کمی کوچکتر

امتحان کنید
list-unstyled.   امتحان کنید

 

دیدگاه‌ها  

+1 # ملیکا یزدانی 1394-07-18 11:26
سلام
من با استفاده از بوت استرپ یک منوی کشویی ایجاد کردم اما سایز منو خیلی بزرگه(هم باکسی که منو توش قرار داره و هم سایز فونت های منو) ! چطور می تونم سایزشو کوچیک کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-07-18 11:54
با سلام.
اگه کدهاشو بذارید دقیقا میشه گفت کجا باید تغییر کنه.
ولی اگه کلا بخواین دکمه ها یا منوهای کوچکتری داشته باشید باید به جای استفاده از کلاس btn از کلاس btn-sm باید استفاده کنید.
همینطور با استفاده از کلاس btn-group-sm هم میتونید به صورت گروهی دکمه ها رو کوچک کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ملیکا یزدانی 1394-07-18 20:24
سلام می بخشین من بع از ظهر امروز در پاسخ به این پست مشکلم رو شرح دادم و کد رو هم فرستادم!
می خواستم بدونم که پیام های من ارسال شده؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-07-18 20:41
کدی اینجا نیومده!!!
کدهایی که می‌فرستید از تگ‌ها خالی میشه و به صورت خام فرستاده میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ملیکا یزدانی 1394-07-18 13:05
Toggle navigation










محصولات
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-19 09:26
اینجا کدی نیومده!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Farshad sh 1394-06-03 12:59
سلام. چه طور عناصري که شما قرار ميدهيد در سمت راست قرار ميگيرند.
ممنون ميشم اگه راهنمايي کنيد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-07-18 13:28
با سلام.
زمانی که از بوت استرپ استفاده کنید، تا زمانی که صریحا نگید که المان ها کدام جهت قرار بگیرن، المان به طور پیش فرض جهتی قرار خواهند گرفت که در فایل بوت استرپ برای آنها تعریف شده است.
مثلا اگه از col-xs-1 تا col-xs-11 به تنهایی در یک ردیف استفاده کنید، این المان ها در سمت چپ قرار خواهند گرفت.


برای اینکه به المانی صریحاً بگویید که سمت راست یا چپ قرار بگیره، باید به ترتیب از کلاس pull-right برای راست و pull-left برای چپ استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # webnoos.com 1394-02-17 14:52
سلام
مگه این نیست که بوت استرپ داخل خوده جوملا 3 وجود داره این یعنی اینکه نیازی به لینک دادن به فایلهایی که شما attach کردین نیست؟؟؟
پس چرا من کدهارو داخل مطلب قرار میدم کار نمی کنه مثل کد کلاس ها برای رنگ پس زمینه اگر نیاز هست خب به جای لینک دادن به اون فایلهایی که شما attach کردین استایل مربوط به خودمون رو هم بدیم که فرقی نمی کنه...
اگر هم بخوام از این کدهای بوت استرپ استفاده کنم راهنمایی بفرمائید که کدهای attach کردن فایلهای اضافی رو در کدوم فایل باید قرار بدم من از فریم وورک T3 برای قالبم استفاده می کنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-02-17 17:28
سلام
نسخه ی 2.3.2 بوتسترپ در جوملا 3 وجود داره! این یعنی که اگه بخواهید در جوملا3 از بوتسترپ استفاده کنید، باید از کلاس های ورژن 2.3.2 بوتسترپ استفاده کنید.
یک نکته ی دیگه اینکه سایت بیاموز از جوملا 2.5 استفاده می کنه که از بوتسترپ(به طور کلی) پشتیبانی نمیکنه! برای همین است که ما در آموزش بوتسترپ 3، اون فایل ها رو اضافه کردیم.
در ضمن به این نکته دقت داشته باشید که اگر بخواهید از بوتسترپ در قالب سازی استفاده کنید، باید فایل فارسی ساز بوتسترپ(راست چین کننده ) رو اضافه کنید. در سایت بیاموز این فایل در آدرس زیر قرار داره، البته ما از اون برای فارسی سازی مثال های بوتسترپ 3 استفاده کرده ایم . برای بوتسترپ 2.3.2 هم شاید بتونید اونو در وب پیدا کنید:
http://beyamooz.com/try_it_yourself/bootstrap/bootstrap-rtl.min_.css

اما اخیرا در سایت گیتهاب(github) یک پروژه ای رو دیده ام که نشون میدهد که چطوری از بوتسترپ 3.2 در جوملا 3 استفاده کنیم، که ان شا الله در آینده این آموزش هم در سایت بیاموز قرار خواهد گرفت. می تونید این پروژه رو در آدرس زیر ببینید:
github.com/gsuez/master-bootstrap-3
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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