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

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Donec sed odio dui.

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

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>تگ آورده شده است:

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

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

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.

درون خطی

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

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

بلوک اصلی

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

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

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

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

Google Prettify

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

با نسخه 2.0، پیش‌فرض‌های سبک‌تر و هوشمندانه‌تری برای سبک‌های فرم داریم. بدون نشانه گذاری اضافی، فقط کنترل های فرم.

بازتاب سبک های پیش فرض WebKit، فقط .form-searchبرای فیلدهای جستجوی گرد اضافی اضافه کنید.

ورودی ها برای شروع در سطح بلوک هستند. برای .form-inlineو .form-horizontal، ما از inline-block استفاده می کنیم.

چه چیزی گنجانده شده است

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

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

پیش فرض های جدید با نسخه 2.0

تا نسخه 1.4، سبک های فرم پیش فرض بوت استرپ از طرح بندی افقی استفاده می کردند. با Bootstrap 2، این محدودیت را حذف کردیم تا پیش‌فرض‌های هوشمندتر و مقیاس‌پذیرتر برای هر فرمی داشته باشیم.

حالت های مرورگر بازطراحی شده

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

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

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

<فیلد مجموعه
  class = "خطای گروه کنترل" >
  …
</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">بعد از عنصر ورودی قرار دهید.

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

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

برای لنگرها و فرم ها

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

توجه: همه دکمه ها باید شامل .btnکلاس باشند. سبک‌های دکمه‌ها باید روی <button>و <a>عناصر برای ثبات اعمال شوند.

چند سایز

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ آن را داشته باشید!

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

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

حالت غیر فعال

برای دکمه‌های غیرفعال، برای .btn-disabledپیوندها و عناصر استفاده کنید.:disabled<button>

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

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

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

در IE9، شیب را روی همه دکمه‌ها به نفع گوشه‌های گرد رها می‌کنیم، زیرا IE9 شیب پس‌زمینه را به گوشه‌ها برش نمی‌دهد.

موارد مرتبط، IE9 عناصر غیرفعال را jankifi buttonمی کند و متن را با سایه متنی ناخوشایند به خاکستری تبدیل می کند—متاسفانه ما نمی توانیم این مشکل را برطرف کنیم.

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

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

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

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

نحوه استفاده

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

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

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

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

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

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

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

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

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

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

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