مقیاس تایپوگرافی

کل شبکه تایپوگرافی بر اساس دو متغیر Less در فایل variables.less ما است: @baseFontSizeو @baseLineHeight. اولی اندازه فونت پایه است که در سرتاسر استفاده می شود و دومی ارتفاع خط پایه است.

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

متن متن نمونه

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula.

کپی بدنه سرب

یک پاراگراف را با اضافه کردن برجسته .leadکنید.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.

با استفاده از تاکید

Fusce dapibus ، telus ac cursus commodo ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero، یک pharetra augue.

توجه: با خیال راحت از HTML5 استفاده کنید، اما استفاده از آنها کمی تغییر کرده است <b>. به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است در حالی که بیشتر برای صدا، اصطلاحات فنی و غیره است.<i><b><i>

آدرس های نمونه

در اینجا دو مثال از نحوه استفاده از <address>تگ آورده شده است:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

نام کامل
[email protected]

اختصارات نمونه

اختصارات دارای یک titleویژگی دارای یک حاشیه پایین نقطه‌دار روشن و یک مکان‌نمای کمکی در شناور هستند. این به کاربران نشان می دهد که چیزی در شناور نشان داده می شود.

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

HTML بهترین چیز از زمان برش نان است.

مخفف کلمه ویژگی attr است .

برای گنجاندن یک نقل قول، <blockquote>هر HTML را به عنوان نقل قول بپیچید. برای نقل قول های مستقیم، ما یک <p>.

یک عنصر اختیاری <small>را برای ذکر منبع خود اضافه کنید و قبل از آن یک خط تیره —برای اهداف طراحی دریافت خواهید کرد.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante venenatis. </p>
  <small> شخص مشهور </small>
</blockquote>

بلوک نقل قول های پیش فرض به این صورت استایل بندی می شوند:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante venenatis.

شخصی معروف در بدنه کار

برای شناور کردن بلوک نقل قول خود به سمت راست، اضافه کنید class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante venenatis.

شخصی معروف در بدنه کار

بدون سفارش

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• عدد صحیح molestie lorem at massa
• تسهیل در پرتیوم نیسل aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • زخم های پوروس سودال
  • Sem porttitor وستیبولوم laoreet
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

بی استایل

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• عدد صحیح molestie lorem at massa
• تسهیل در پرتیوم نیسل aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • زخم های پوروس سودال
  • Sem porttitor وستیبولوم laoreet
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

سفارش داده شده

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. عدد صحیح molestie lorem at massa
4. تسهیل در پرتیوم نیسل aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

شرح

<dl>

لیست های توضیحات

لیست توضیحات برای تعریف اصطلاحات عالی است.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

توضیحات افقی

<dl class="dl-horizontal">

لیست های توضیحات

لیست توضیحات برای تعریف اصطلاحات عالی است.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus.

---

سر بالا! لیست‌های توصیف افقی عباراتی را که برای جا افتادن در ستون سمت چپ بسیار طولانی هستند کوتاه می‌کنند text-overflow. در ویوپورت‌های باریک‌تر، آنها به طرح‌بندی انباشته پیش‌فرض تغییر می‌کنند.

درون خطی

قطعات درون خطی کد را با <code>.

به عنوان مثال , بخش < code> </ code > باید به صورت درون خطی پیچیده شود .  

بلوک اصلی

<pre>برای چندین خط کد استفاده کنید . برای رندر مناسب، مطمئن شوید که از هر براکت زاویه در کد فرار کنید.

<p>متن نمونه در اینجا...</p>

<پیش>
  <p>نمونه متن در اینجا...</p>
</pre>

توجه: حتما کد را در <pre>برچسب ها تا حد امکان نزدیک به سمت چپ نگه دارید. همه برگه ها را ارائه می دهد.

می‌توانید به صورت اختیاری .pre-scrollableکلاسی را اضافه کنید که حداکثر ارتفاع آن 350 پیکسل باشد و یک نوار اسکرول محور y ارائه شود.

Google Prettify

همان <pre>عنصر را بگیرید و دو کلاس اختیاری برای رندر پیشرفته اضافه کنید.

<p> نمونه متن در اینجا... </p>

<pre class = "prettyprint 
     کتانی ها" >
  <p>نمونه متن در اینجا...</p>
</pre>

google-code-prettify را دانلود کنید و readme را برای نحوه استفاده مشاهده کنید.

برچسب بزنید	شرح
<table>	عنصر بسته بندی برای نمایش داده ها در قالب جدول
<thead>	عنصر ظرف برای ردیف‌های سرصفحه جدول ( <tr>) برای برچسب‌گذاری ستون‌های جدول
<tbody>	عنصر ظرف برای ردیف های جدول ( <tr>) در بدنه جدول
<tr>	عنصر ظرف برای مجموعه ای از سلول های جدول ( <td>یا <th>) که در یک ردیف ظاهر می شود
<td>	سلول جدول پیش فرض
<th>	سلول جدول ویژه برای برچسب های ستون (یا ردیف، بسته به محدوده و مکان) باید در یک<thead>
<caption>	شرح یا خلاصه ای از آنچه در جدول وجود دارد، به ویژه برای صفحه خوان ها مفید است

<جدول>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

برای اطمینان از خوانایی و حفظ ساختار، جداول به طور خودکار تنها با چند حاشیه طراحی می شوند. با 2.0، .tableکلاس مورد نیاز است.

<table class = "table" > 
  …
</table>

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری	پرنده	@توییتر

با افزودن راه راه گورخری، میزهای خود را کمی شیک کنید—فقط .table-stripedکلاس را اضافه کنید.

توجه: جداول راه راه از :nth-childانتخابگر CSS استفاده می کنند و در IE7-IE8 موجود نیست.

<table class = "table-table-striped" > 
  …
</table>

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری	پرنده	@توییتر

برای اهداف زیبایی شناسی، حاشیه هایی را در اطراف کل میز و گوشه های گرد اضافه کنید.

<table class = "جدول با حاشیه" > 
  …
</table>

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
	علامت گذاری	اتو	@getbootstrap
2	یعقوب	تورنتون	@چربی
3	لری پرنده		@توییتر

میزهای خود را با اضافه کردن .table-condensedکلاس به نصف (از 8 پیکسل به 4 پیکسل) اضافه کنید.

<table class = "جدول فشرده" > 
  …
</table>

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری پرنده		@توییتر

با استفاده از هر یک از کلاس‌های موجود، می‌توانید هر یک از کلاس‌های جدول را برای دستیابی به ظاهری متفاوت ترکیب کنید.

<table class = "table-table-striped table-tab-bordered table-condensed" > 
  ...
</table>

	نام و نام خانوادگی
#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری پرنده		@توییتر

HTML و CSS انعطاف پذیر

بهترین بخش در مورد فرم ها در بوت استرپ این است که همه ورودی ها و کنترل های شما بدون توجه به اینکه چگونه آنها را در نشانه گذاری خود ایجاد می کنید عالی به نظر می رسند. هیچ HTML اضافی مورد نیاز نیست، اما ما الگوها را برای کسانی که به آن نیاز دارند ارائه می دهیم.

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

چهار طرح بندی گنجانده شده است

بوت استرپ از چهار نوع طرح بندی فرم پشتیبانی می کند:

• عمودی (پیش‌فرض)
• جستجو کردن
• درون خطی
• افقی

انواع مختلف طرح‌بندی فرم نیاز به تغییراتی برای نشانه‌گذاری دارند، اما خود کنترل‌ها باقی می‌مانند و یکسان رفتار می‌کنند.

کنترل ایالت ها و موارد دیگر

فرم‌های بوت استرپ شامل سبک‌هایی برای همه کنترل‌های فرم پایه مانند ورودی، ناحیه متنی و انتخابی است که انتظار دارید. اما همچنین با تعدادی مؤلفه سفارشی مانند ورودی‌های اضافه شده و اضافه شده و پشتیبانی از فهرست چک‌باکس‌ها همراه است.

حالت هایی مانند خطا، هشدار و موفقیت برای هر نوع کنترل فرم گنجانده شده است. همچنین شامل سبک هایی برای کنترل های غیرفعال می شود.

فرم پایه

پیش‌فرض‌های هوشمند و سبک بدون نشانه‌گذاری اضافی.

نام برچسب

نمونه متن راهنما در سطح بلوک در اینجا.

من را بررسی کنید ارسال

<form class = "خوب" > 
  <label> نام برچسب </label>
  <input type = "text" class = "span3" placeholder = "یک چیزی تایپ کنید..." >   
  <span class = "help-block" > نمونه متن راهنما در سطح بلوک در اینجا. </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > من را بررسی کنید 
  </label>
  <button type = "submit" class = "btn" > ارسال </button>  
</form>

فرم جستجو

به فرم .form-searchو .search-queryبه input.

جستجو کردن

<form class = "خوب فرم-جستجو" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > جستجو </button>  
</form>

فرم درون خطی

.form-inlineتراز عمودی و فاصله کنترل‌های فرم را به ظرافت اضافه کنید.

مرا به خاطر بسپار ورود

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "ایمیل" >   
  <input type = "password" class = "input-small" placeholder = "رمز عبور" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > مرا به خاطر بسپار 
  </label>
  <button type = "submit" class = "btn" > ورود به سیستم </button>  
</form>

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

• ورودی های متنی (متن، رمز عبور، ایمیل و غیره)
• چک باکس
• رادیو
• انتخاب کنید
• انتخاب چندگانه
• ورودی فایل
• ناحیه متنی

ورودی متن

علاوه بر متن آزاد، هر ورودی مبتنی بر متن HTML5 مانند آن به نظر می رسد.

چک باکس

گزینه یک این و آن است - مطمئن شوید که چرا عالی است

لیست را انتخاب کنید

چیزی 2 3 4 5

چند علامت انتخاب کنید

1 2 3 4 5

ورودی فایل

Textarea

ذخیره تغییرات لغو کنید

نشانه گذاری نمونه

با توجه به طرح‌بندی فرم مثال بالا، در اینجا نشانه‌گذاری مرتبط با اولین ورودی و گروه کنترل است. کلاس های .control-group, .control-label, و .controlsهمه برای یک ظاهر طراحی شده لازم هستند.

<form class = "form-horizontal" > 
  <فیلد مجموعه>
    <legend> متن افسانه </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > ورودی متن </label>  
      <div class = "کنترل ها" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > پشتیبانی از متن راهنما </p> 
      </div>
    </div>
  </fieldset>
</form>

بوت استرپ دارای سبک هایی برای حالت های متمرکز و disabledحالت های پشتیبانی شده توسط مرورگر است. Webkit پیش‌فرض را حذف می‌کنیم outlineو a box-shadowرا به جای آن برای :focus.

---

اعتبار سنجی فرم

همچنین شامل سبک‌های اعتبارسنجی برای خطاها، هشدارها و موفقیت است. برای استفاده، کلاس خطا را به محیط اطراف اضافه کنید .control-group.

<فیلد مجموعه
  class = "خطای گروه کنترل" >
  …
</fieldset>

ورودی متمرکز

ورودی غیر قابل ویرایش

مقداری در اینجا ارزش دارند

ورودی غیرفعال است

چک باکس غیرفعال شد

این یک چک باکس غیرفعال است

ورودی با هشدار

ممکن است مشکلی پیش آمده باشد

ورودی با خطا

لطفا خطا را تصحیح کنید

ورودی با موفقیت

وووووو

با موفقیت انتخاب کنید

1 2 3 4 5 وووووو

ذخیره تغییرات لغو کنید

اضافه کردن و اضافه کردن ورودی ها

گروه‌های ورودی - با متن اضافه یا اضافه شده - راهی آسان برای ارائه زمینه بیشتر برای ورودی‌های شما فراهم می‌کنند. نمونه‌های عالی عبارتند از علامت @ برای نام‌های کاربری توییتر یا $ برای امور مالی.

---

چک باکس ها و رادیوها

تا نسخه 1.4، Bootstrap به نشانه‌گذاری اضافی در اطراف چک‌باکس‌ها و رادیوها برای چیدن آنها نیاز داشت. در حال حاضر، آن را یک موضوع ساده از تکرار است <label class="checkbox">که پیچیده <input type="checkbox">است.

چک باکس های درون خطی و رادیوها نیز پشتیبانی می شوند. فقط .inlineبه هر کدام اضافه کنید .checkboxیا .radioو کارتان تمام شد.

---

فرم های درون خطی و ضمیمه/پیوند

برای استفاده از ورودی های prepend یا ضمیمه به صورت درون خطی، حتماً .add-onو inputبدون فاصله در یک خط قرار دهید.

---

متن راهنمای فرم

برای افزودن متن راهنما برای ورودی‌های فرم خود، متن راهنما را با <span class="help-inline">یا یک بلوک متن راهنما با <p class="help-block">بعد از عنصر ورودی قرار دهید.

اندازه های شبکه را شکل دهید

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

از همان .span*کلاس‌های سیستم شبکه برای اندازه‌های ورودی استفاده کنید.

اندازه های جایگزین

همچنین می‌توانید از کلاس‌های ثابتی استفاده کنید که به شبکه نگاشت نمی‌شوند، با سبک‌های پاسخ‌گوی CSS سازگار نیستند، یا انواع مختلفی از کنترل‌ها را در نظر می‌گیرند (مثلاً inputدر مقابل select).

متن آماده شده

@

در اینجا چند متن راهنما آمده است

متن ضمیمه شده

.00

در اینجا متن راهنما بیشتر است

الحاق و الحاق

$ .00

با دکمه اضافه کنید

برو!

ضمیمه دو دکمه

جستجو کردن گزینه ها

چک باکس های درون خطی

1 2 3

چک باکس ها

گزینه یک این و آن است - مطمئن شوید که چرا عالی است گزینه دو را نیز می توان بررسی کرد و در نتایج فرم گنجاند گزینه سه را می توان - بله، حدس زدید - نیز بررسی و در نتایج فرم گنجانده شود

توجه: برچسب‌ها همه گزینه‌ها را برای مناطق کلیکی بسیار بزرگ‌تر و یک فرم قابل استفاده‌تر احاطه می‌کنند.

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

گزینه یک این و آن است - مطمئن شوید که چرا عالی است گزینه دو می تواند چیز دیگری باشد و با انتخاب آن گزینه یک لغو انتخاب می شود

ذخیره تغییرات لغو کنید

دکمه هایی برای اعمال

به عنوان یک قرارداد، دکمه‌ها باید فقط برای اعمال استفاده شوند، در حالی که لینک‌ها باید برای اشیا استفاده شوند. به عنوان مثال، "دانلود" باید یک دکمه باشد در حالی که "فعالیت اخیر" باید یک پیوند باشد.

استایل های دکمه را می توان برای هر چیزی با .btnکلاس اعمال کرد اعمال کرد. با این حال، معمولاً می‌خواهید این موارد را فقط برای عناصر <a>و <button>عناصر اعمال کنید.

سازگاری متقابل مرورگر

IE9 شیب پس‌زمینه را در گوشه‌های گرد برش نمی‌دهد، بنابراین آن را حذف می‌کنیم. موارد مرتبط، IE9 عناصر غیرفعال را jankifi buttonمی کند، و متن را با سایه متنی ناخوشایند به رنگ خاکستری تبدیل می کند که ما نمی توانیم آن را برطرف کنیم.

چند سایز

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ .btn-large، .btn-smallیا .btn-miniبرای دو اندازه دیگر اضافه کنید .

اقدام اولیه عمل

اقدام اولیه عمل

اقدام اولیه عمل

حالت غیر فعال

برای دکمه‌های غیرفعال، .disabledکلاس را به پیوندها و disabledویژگی <button>عناصر را اضافه کنید.

پیوند اولیه ارتباط دادن

دکمه اصلی دکمه

سر بالا! ما .disabledدر اینجا به عنوان یک کلاس کاربردی مشابه .activeکلاس معمولی استفاده می کنیم، بنابراین هیچ پیشوندی لازم نیست.

یک کلاس، چندین برچسب

از .btnکلاس در یک <a>، <button>یا <input>عنصر استفاده کنید.

ارتباط دادن دکمه

<a class = "btn" href = "" > پیوند </a>  
<button class = "btn" type = "submit" >  
  دکمه
</button>
<input class = "btn" type = "button"  
         value = "ورودی" >
<input class = "btn" type = "submit"  
         value = "ارسال" >

به عنوان بهترین روش، سعی کنید عنصر را با زمینه خود مطابقت دهید تا از تطبیق رندر بین مرورگر اطمینان حاصل کنید. اگر دارید input، از یک <input type="submit">برای دکمه خود استفاده کنید.

• آیکون شیشه ای
• آیکون-موسیقی
• جستجوی نماد
• پاکت نماد
• نماد قلب
• نماد ستاره
• نماد-ستاره-خالی
• کاربر آیکون
• آیکون-فیلم
• نماد بزرگ
• نماد-ام
• نماد-امین لیست
• نماد-ok
• حذف نماد
• نماد بزرگنمایی
• نماد بزرگنمایی
• نماد خاموش
• نماد-سیگنال
• نماد-دنده
• نماد سطل زباله
• نماد-خانه
• نماد-فایل
• نماد زمان
• نماد جاده
• icon-download-alt
• آیکون-دانلود
• آپلود نماد
• نماد-صندوق ورودی
• نماد-بازی-دایره
• نماد-تکرار
• بازخوانی نماد
• icon-list-alt
• قفل نماد
• نماد-پرچم
• آیکون هدفون

• نماد کاهش صدا
• نماد کاهش حجم
• نماد افزایش حجم
• icon-qrcode
• آیکون-بارکد
• نماد-تگ
• نماد-تگ ها
• کتاب نماد
• نماد-نشانک
• چاپ آیکون
• آیکون دوربین
• نماد-فونت
• نمادهای پررنگ
• نماد-مورب
• نماد-متن-ارتفاع
• نماد-متن-عرض
• icon-align-left
• icon-align-center
• نماد-تراز کردن-راست
• icon-align-justify
• فهرست نمادها
• icon-indent-left
• icon-indent-right
• نماد-facetime-ویدئو
• نماد-تصویر
• آیکون مداد
• نماد-نقشه-نشانگر
• نماد تنظیم
• نماد رنگ
• ویرایش آیکون
• اشتراک گذاری نماد
• بررسی نماد
• نماد حرکت
• icon-step-backward
• icon-fast-backward

• نماد به عقب
• نماد بازی
• نماد مکث
• نماد توقف
• نماد به جلو
• icon-fast-forward
• نماد-گام به جلو
• نماد بیرون انداختن
• نماد-شورون-چپ
• نماد-شورون-راست
• icon-plus-sign
• نماد-منهای-نشانه
• icon-remove-sign
• نماد-ok-sign
• نماد-سوال-نشانه
• نماد - اطلاعات - علامت
• نماد-اسکرین شات
• نماد-حذف-دایره
• نماد-ok-circle
• نماد-بان-دایره
• نماد-پیکان-چپ
• نماد-پیکان-راست
• نماد پیکان به بالا
• نماد-پیکان-پایین
• icon-share-alt
• icon-resize-full
• icon-resize-small
• نماد پلاس
• نماد-منهای
• نماد ستاره
• نماد-تعجب-علامت
• نماد-هدیه
• آیکون برگ
• نماد آتش
• نماد چشم باز

• نماد چشم بسته
• نماد-علامت هشدار
• آیکون هواپیما
• نماد-تقویم
• نماد تصادفی
• نماد-نظر
• نماد آهنربا
• نماد-شورون آپ
• نماد-شورون-پایین
• نماد-ریتوییت
• نماد-سبد خرید
• نماد-پوشه-بستن
• نماد-پوشه-باز کردن
• نماد-تغییر اندازه-عمودی
• نماد-تغییر اندازه-افقی
• icon-hdd
• نماد-bullhorn
• آیکون زنگ
• نماد-گواهینامه
• نماد-شست بالا
• نماد-شست-پایین
• نماد-دست-راست
• نماد-دست-چپ
• نماد دست بالا
• نماد دست پایین
• نماد-دایره-پیکان-راست
• نماد-دایره-پیکان-چپ
• نماد-دایره-پیکان-بالا
• نماد-دایره-پیکان-پایین
• نماد-کره
• آچار آچار
• آیکون وظایف
• نماد-فیلتر
• آیکون کیف
• نماد تمام صفحه

به صورت جن ساخته شده است

به جای اینکه هر نماد را به عنوان یک درخواست اضافی تبدیل کنیم، آنها را در یک sprite کامپایل کرده‌ایم - دسته‌ای از تصاویر در یک فایل که از CSS برای قرار دادن تصاویر با استفاده از background-position. این همان روشی است که ما در Twitter.com استفاده می کنیم و برای ما خوب کار کرده است.

همه کلاس‌های آیکون‌ها .icon-برای فاصله‌گذاری نام و محدوده مناسب، مانند سایر اجزای ما، پیشوند دارند. این به جلوگیری از درگیری با ابزارهای دیگر کمک می کند.

Glyphicons به ما اجازه استفاده از مجموعه Halflings را در جعبه ابزار منبع باز خود داده است تا زمانی که ما پیوند و اعتباری را در اینجا در اسناد ارائه دهیم. لطفاً در پروژه های خود نیز همین کار را انجام دهید.

نحوه استفاده

بوت استرپ از یک <i>تگ برای همه آیکون ها استفاده می کند، اما آنها هیچ کلاس کوچکی ندارند - فقط یک پیشوند مشترک. برای استفاده، کد زیر را تقریباً در هر جایی قرار دهید:

<i class = "icon-search" ></i> 

همچنین سبک هایی برای نمادهای معکوس (سفید) موجود است که با یک کلاس اضافی آماده شده اند:

<i class = "icon-search icon-white" ></i> 

140 کلاس برای آیکون های شما وجود دارد. فقط یک <i>برچسب با کلاس های مناسب اضافه کنید و آماده هستید. شما می توانید لیست کامل را در sprites.less یا در اینجا در این سند پیدا کنید.

سر بالا! هنگام استفاده از کنار رشته‌های متن، مانند دکمه‌ها یا پیوندهای ناوبری، حتماً یک فاصله بعد از <i>برچسب برای فاصله‌گذاری مناسب بگذارید.

موارد استفاده کنید

آیکون ها عالی هستند، اما کجا می توان از آنها استفاده کرد؟ در اینجا چند ایده وجود دارد:

• به عنوان تصاویری برای ناوبری نوار کناری شما
• برای یک ناوبری صرفاً مبتنی بر نماد
• برای دکمه هایی که به انتقال معنای یک عمل کمک می کنند
• با پیوندهایی برای به اشتراک گذاشتن زمینه در مقصد کاربر

در اصل، هر جایی که بتوانید یک <i>برچسب قرار دهید، می توانید یک نماد قرار دهید.

تازه کردن وارسی حذف

اظهار نظر تنظیمات اطلاعات بیشتر

آدرس ایمیل