CSS پایه

در بالای داربست، عناصر اصلی HTML با کلاس‌های توسعه‌یافته سبک‌دهی شده و تقویت شده‌اند تا ظاهر و احساسی تازه و سازگار ارائه دهند.

سرفصل ها و کپی متن

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

کل شبکه تایپوگرافی بر اساس دو متغیر 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.

h1. سرفصل 1

h2. سرفصل 2

h3. سرفصل 3

h4. سرفصل 4

h5. سرفصل 5
h6. سرفصل 6

تاکید، آدرس و مخفف

عنصر استفاده اختیاری
<strong> برای تاکید بر یک قطعه متن با مهم هیچ یک
<em> برای تاکید بر یک قطعه متن با استرس هیچ یک
<abbr> اختصارات و مخفف‌ها را می‌پیچد تا نسخه توسعه‌یافته را در حالت شناور نشان دهد

شامل ویژگی اختیاری titleبرای متن گسترده شود

از .initialismکلاس برای اختصارات بزرگ استفاده کنید.
<address> برای اطلاعات تماس با نزدیکترین جد خود یا کل مجموعه کار حفظ قالب بندی با پایان دادن به تمام خطوط با<br>

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

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> عنصر سطح بلوک برای نقل قول محتوا از منبع دیگر

citeویژگی برای URL منبع اضافه کنید

استفاده .pull-leftو .pull-rightکلاس‌ها برای گزینه‌های شناور
<small> عنصر اختیاری برای افزودن یک نقل قول کاربر، معمولاً یک نویسنده با عنوان اثر <cite>اطراف عنوان یا نام منبع را قرار دهید

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

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

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante venenatis. </p>
  3. <small> شخص مشهور </small>
  4. </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>.

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

بلوک اصلی

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

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

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

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

Google Prettify

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

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

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

نشانه گذاری جدول

برچسب بزنید شرح
<table> عنصر بسته بندی برای نمایش داده ها در قالب جدول
<thead> عنصر ظرف برای ردیف‌های سرصفحه جدول ( <tr>) برای برچسب‌گذاری ستون‌های جدول
<tbody> عنصر ظرف برای ردیف های جدول ( <tr>) در بدنه جدول
<tr> عنصر ظرف برای مجموعه ای از سلول های جدول ( <td>یا <th>) که در یک ردیف ظاهر می شود
<td> سلول جدول پیش فرض
<th> سلول جدول ویژه برای برچسب های ستون (یا ردیف، بسته به محدوده و مکان)
باید در یک<thead>
<caption> شرح یا خلاصه ای از آنچه در جدول وجود دارد، به ویژه برای صفحه خوان ها مفید است
  1. <جدول>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

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

نام کلاس شرح
پیش فرض هیچ یک بدون سبک، فقط ستون و ردیف
پایه ای .table فقط خطوط افقی بین ردیف ها
مرزدار .table-bordered گوشه ها را گرد می کند و حاشیه بیرونی را اضافه می کند
راه راه گورخر .table-striped رنگ پس زمینه خاکستری روشن را به ردیف های فرد (1، 3، 5، و غیره) اضافه می کند.
متراکم شده .table-condensed لایه های عمودی را از 8 پیکسل به 4 پیکسل در داخل همه tdو thعناصر به نصف برش می دهد

جداول نمونه

1. سبک های جدول پیش فرض

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

  1. <table class = "table" >
  2. </table>
# نام کوچک نام خانوادگی نام کاربری
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر

2. میز راه راه

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

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

  1. <table class = "table-table-striped" >
  2. </table>
# نام کوچک نام خانوادگی نام کاربری
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر

3. میز حاشیه دار

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

  1. <table class = "جدول با حاشیه" >
  2. </table>
# نام کوچک نام خانوادگی نام کاربری
1 علامت گذاری اتو @mdo
علامت گذاری اتو @getbootstrap
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر

4. جدول متراکم

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

  1. <table class = "جدول فشرده" >
  2. </table>
# نام کوچک نام خانوادگی نام کاربری
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر

5. همه آنها را با هم ترکیب کنید!

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

  1. <table class = "table-table-striped table-tab-bordered table-condensed" >
  2. ...
  3. </table>
نام و نام خانوادگی
# نام کوچک نام خانوادگی نام کاربری
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر

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

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

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

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

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

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

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

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

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

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

چهار نوع فرم

بوت استرپ نشانه گذاری و سبک های ساده ای را برای چهار سبک از فرم های رایج وب ارائه می دهد.

نام کلاس شرح
عمودی (پیش‌فرض) .form-vertical (لازم نیست) برچسب‌های انباشته و تراز چپ روی کنترل‌ها
درون خطی .form-inline برچسب تراز چپ و کنترل های بلوک درون خطی برای سبک جمع و جور
جستجو کردن .form-search ورودی متن فوق گرد برای یک جستجوی زیبایی شناسی معمولی
افقی .form-horizontal برچسب‌های تراز چپ و راست را در همان خط با کنترل‌ها شناور کنید

فرم‌های نمونه با استفاده از کنترل‌های فرم، بدون نشانه‌گذاری اضافی

فرم پایه

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

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

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

فرم جستجو

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

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

فرم درون خطی

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

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

فرم های افقی

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

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

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

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

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

  1. <form class = "form-horizontal" >
  2. <فیلد مجموعه>
  3. <legend> متن افسانه </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > ورودی متن </label>
  6. <div class = "کنترل ها" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > پشتیبانی از متن راهنما </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

حالت های کنترل فرم

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


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

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

  1. <فیلد مجموعه
  2. class = "خطای گروه کنترل" >
  3. </fieldset>
مقداری در اینجا ارزش دارند
ممکن است مشکلی پیش آمده باشد
لطفا خطا را تصحیح کنید
وووووو
وووووو

گسترش کنترل های فرم

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

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


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

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

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


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

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


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

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

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

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

@

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

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

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

دکمه کلاس = "" شرح
btn دکمه خاکستری استاندارد با گرادیان
btn btn-primary وزن بصری اضافی را فراهم می کند و عملکرد اولیه را در مجموعه ای از دکمه ها شناسایی می کند
btn btn-info به عنوان جایگزینی برای سبک های پیش فرض استفاده می شود
btn btn-success نشان دهنده یک اقدام موفق یا مثبت است
btn btn-warning نشان می دهد که باید در این اقدام احتیاط کرد
btn btn-danger یک عمل خطرناک یا بالقوه منفی را نشان می دهد
btn btn-inverse دکمه خاکستری تیره جایگزین، به یک کنش یا استفاده معنایی گره نخورده است

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

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

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

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

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

چند سایز

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


حالت غیر فعال

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

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

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

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

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

ارتباط دادن
  1. <a class = "btn" href = "" > پیوند </a>
  2. <button class = "btn" type = "submit" >
  3. دکمه
  4. </button>
  5. <input class = "btn" type = "button"
  6. value = "ورودی" >
  7. <input class = "btn" type = "submit"
  8. 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>تگ برای همه آیکون ها استفاده می کند، اما آنها هیچ کلاس کوچکی ندارند - فقط یک پیشوند مشترک. برای استفاده، کد زیر را تقریباً در هر جایی قرار دهید:

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

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

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

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

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

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

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

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

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

مثال ها

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