Header
A	B	C	D	E	F

Top
A	B	C	D	E	F

Showcase
A	B	C	D	E	F

Feature
A	B	C	D	E	F

Utility
A	B	C	D	E	F

ExpandedTop
A	B	C	D	E	F

MainTop
A	B	C	D	E	F

Content Top
A	B	C

Content Bottom
A	B	C

Sidebar
A	B	C

MainBottom
A	B	C	D	E	F

ExpandedBottom
A	B	C	D	E	F

Extension
A	B	C	D	E	F

Bottom
A	B	C	D	E	F

Footer
A	B	C	D	E	F

Copyright
A	B	C	D	E	F

سرتیترها

همه تگ های سرتیتر در HTML5 از <h1> تا <h6> قابل دسترسند.

h1. تیتر ۱

h2. تیتر ۲

h3. تیتر ۳

h4. تیتر ۴

h5. تیتر ۵

h6. تیتر ۶

ساخته شده با less

چیدمان این قالب بر اساس دو متغیر LESS در فایل variables.less با کد های @baseFontSize و @baseLineHeight تعریف شده است. اولی بر پایه اندازه قلم و دومی بر اساس ارتفاع خط بنا شده است. ما از این متغییر ها و بعضی از تغییرات ساده دیگر مانند ایجاد مارجین و پدینگ و ارتفاع خطوط استفاده می کنیم تا مطالب خود را شخصی سازی کنیم.

نسخه بدنه

اندازه فونت عمومی font-size بوتسترپ ۱۴px و ارتفاع خط line-height آن ۱.۷em است. این مشخصات در قسمت <body> و همه پاراگراف ها اعمال شده است.به علاوه در تگ <p> یک مارجین پائین به اندازه نیمی از ارتفاع خط دریافت می کند(در حالت اولیه ۹px).

متن نمونه جهت نمایش پاراگراف قرار بگیرد.

<p>...</p>

پاراگراف برجسته

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

متن نمونه جهت نمایش پاراگراف قرار بگیرد.

<p class="lead">...</p>

تاکید

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

`<em>`

برای تاکید و کج نمودنقطعه ای از متن می توانید از این کد استفاده کنید.

در این قسمت می توانید قسمتی از متن که تاکید شده استرا مشاهده کنید.

<em>متن تاکید شده با Italic </em>

استرانگ`<strong>`

برای تاکید و برجسته نمودن قطعه ای از متن می توانید از این کد استفاده کنید.

در این قسمت می توانید قسمتی از متن که تاکید شده استرا مشاهده کنید.

<strong>متن تاکید شده با ‌Bold</strong>

کوچک `<small>`

شما می توانید برای کم اهمیت جلوه دادن یک بخش یا متن از این تگ استفاده کنید

این خط از متن در هنگام چاپ به این صورت نمایش داده خواهد شد.

<p>
  <small>این خط از متن در هنگام چاپ به این صورت نمایش داده خواهد شد.</small>
</p>

توجه کنید:شما در هنگام استفاده از HTML5‌به راحتی می توانید از تگ های <b> و <i> استفاده کنید.تگ<b>معمولا برای برجسته کردن کلمات و یا عبارات بدون رساندن هیچ اهمیت اضافه ای می باشد درحالی که تگ <i>برای نمایش صداها و واژه های تخصصی و غیره کابرد دارد.

Notice Styles

درون تگ پاراگراف <p>می توانید از کلاس های .successو .warningو .info یا .error استفاده کنید.

متن نمونه جهت نمایش پاراگراف قرار بگیرد.

<p class="success">...</p>

متن نمونه جهت نمایش پاراگراف قرار بگیرد.

<p class="info">...</p>

متن نمونه جهت نمایش پاراگراف قرار بگیرد.

<p class="warning">...</p>

متن نمونه جهت نمایش پاراگراف قرار بگیرد.

<p class="error">...</p>

اختصارات

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

`<abbr>`

برای نمایش متن های گسترش یافته هنگامی که موس روی کلمات اختصاری قرار می گیرد می توانید از تگ title استفاده کنید.

مختصر کلمه attribute عبارت attr می باشد.

<abbr title="attribute">attr</abbr>

`<abbr class="initialism">`

افزودن کلاسه به عبارات اختصاری برای نمایش متون ریزتر با قرار دادن کد .initialism درون تگ اختصار

HTML یک زبان بسیار کامل برای نمایش مطالب به شیوه دلخواه در اینترنت می باشد.

<abbr title="attribute" class="initialism">attr</abbr>

آدرس ها

اجرای سبک از پیش طراحی شده برای تمام المان ها و اطلاعات موجود در قسمت آدرس ها

`<address>`

در این قسمت در انتهای همه خطوط کد <br> قرار می گیرد.

کرج
شاهین ویلا
گروه فناوری اطلاعات جومی
ت: ۰۲۶-

نام و نام خانوادگی
این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

<address>
  <strong>کرج</strong><br>
  شاهین ویلا<br>
  گروه فناوری اطلاعات جومی<br>
  <abbr title="تلفن">ت:</abbr> ۰۲۶-
</address>
<address>
  <strong>نام و نام خانوادگی</strong><br>
  <a href="mailto:#">این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید</a>
</address>

نقل قول ها

برای نقل قول بخشی از متن که در جایی دیگر درج شده است از نقل قول استفاده می کنند.

نقل قول پیشفرض

شما می توانید تگ <blockquote> را برای همه قسمت ها در HTML استفاده کنید .برای مثال ما در این بخش از تگ <p> پاراگراف استفاده می کنیم.

متن نمونه جهت نمایش پاراگراف قرار بگیرد.

<blockquote>
  <p>متن نمونه جهت نمایش پاراگراف قرار بگیرد.</p>
</blockquote>

گزینه های نقل قول

سبک ها و متن ها برای متغییر های نمونه در نقل قول های استاندارد تغییر می کند.

نامگذاری یک منبع

برای شناسایی یک منبع باید تگ <small> را اضافه کنید.نام منبع را درون تگ <cite> قرار دهید.

متن نمونه جهت نمایش پاراگراف قرار بگیرد.
یک نویسنده بزرگ در کتاب معروف

<blockquote>
  <p>متن نمونه جهت نمایش پاراگراف قرار بگیرد.</p>
  <small>یک نویسنده بزرگ در <cite title="نام کامل کتاب معروف نویسنده">کتاب معروفe</cite></small>
</blockquote>

نمایش های جایگزین

برای نمایش یک نقل قول شناور یا راست چین از کلاس .pull-right استفاده کنید.

متن نمونه جهت نمایش پاراگراف قرار بگیرد.
یک نویسنده بزرگ در کتاب معروف

<blockquote class="pull-right">
  ...
</blockquote>

لیست ها

بدون اولویت

این بخش یک سری از آیتم ها را بدون اولویت بندی نمایش می دهد.

آیتم بدون اولیت
آیتم بدون اولیت
- بخش اول
- بخش دوم
- بخش سوم
- بخش چهارم
آیتم بدون اولیت بعدی
آیتم بدون اولیت

<ul>
  <li>...</li>
</ul>

اولیت دار

این بخش یک سری از آیتم های اولویت بندی شده را نمایش می دهد.(شماره بندی شده)

اولیت اول
اولویت دوم
اولویت سوم
اولویت چهارم
اولویت پنجم

<ol>
  <li>...</li>
</ol>

بدون سبک

این بخش یک سری از آیتم ها را بدون سبک بندی list-style و یا پدینگ چپ اضافی نمایش می دهد.

آیتم بدون سبک
آیتم بدون سبک
- آیتم بدون اولویت
- آیتم بدون اولویت
- آیتم بدون اولیت
- آیتم بدون اولویت
آیتم بدون سبک
آیتم بدون سبک

<ul class="unstyled">
  <li>...</li>
</ul>

توضیحات

لیستی از موضوعات همراه با توضیح هر موضوع

موضوع اول: توضیحات مربوط به موضوع اول
موضوع دوم: توضیحات مربوط به موضوع دوم; توضیحات بعدی مربوط به موضوع دوم
موضوع سوم: توضیحات مربوط به موضوع سوم

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

توجه: لیست توضیحات افقی موضوعات خیلی بلند را کوتاه می کند تا در سمت چپ نمایش داده شوند. این کار با استفاده از کد text-overflow انجام می شود. در ستون های باریکتر این چیدمان به حالت پیشفرض تغییر خواهد کرد.

توضیحات افقی

لیستی از موضوعات همراه با توضیحات مربوط به آنها که با کد <dl> در کنار هم نمایش داده می شوند.

موضوع اول: توضیحات مربوط به موضوع اول
موضوع دوم: توضیحات مربوط به موضوع دوم; توضیحات بعدی مربوط به موضوع دوم
موضوع سوم: توضیحات مربوط به موضوع سوم

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

درون خطی

برای قرار دادن قطعه ای کد درون خطی از کد <code> استفاده می شود.

برای مثال کد <section> باید به عنوان کدی درون خطی نمایش داده شود.

برای مثال کد <code><section></code> باید به عنوان کدی درون خطی نمایش داده شود.

For example, <code><section></code> should be wrapped as inline.

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

شما همچنین می توانید از کلاس .pre-scrollable به عنوان یک اسکرولبار با بیشینه ارتفاع ۳۵۰px استفاده کنید.

بلوک های پایه

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

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

<pre>
  &lt;p&gt;متن نمونه اینجا قرار بگیرد.&lt;/p&gt;
</pre>

زیباسازی

برای زیبا سازی و کدنویسی و استفاده از رنگهای مختلف درون تگ <pre> از کلاس های .prettyprint و .prettyprint linenums استفاده کنید.

<?php /** Begin Debug **/ if ($gantry->countModules('debug')) : ?>
    <div id="rt-debug">
    <div class="rt-container">
      <?php echo $gantry->displayModules('debug','standard','standard'); ?>
      <div class="clear"></div>
    </div>
  </div>
  <?php /** End Debug **/ endif; ?>

<pre class="prettyprint linenums"><?php /** Begin Debug **/ if ($gantry->countModules('debug')) : ?>
  <div id="rt-debug">
    <div class="rt-container">
      <?php echo $gantry->displayModules('debug','standard','standard'); ?>
      <div class="clear"></div>
    </div>
  </div>
  <?php /** End Debug **/ endif; ?></pre>

سبک های پیشفرض

برای سبک دهی اولیه-پدینگ کم و جداکننه های افقی-کلاس .table را به تگ <table> اضافه کنید.

ردیف	نام	نام خانوادگی	نام کاربری
۱	حمیدرضا	ذوالفقار	manager
۲	مریم	سلیمی	m.salimi
۳	طاها	علیپور	t.alipour

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

کلاس های اختیاری

هر یک از کلاس های زیر را به دلخواه به کلاس پایه .table اضافه کنید.

`.table-striped`

اضافه کردن ردیف های راه راه به جدول <tbody> با استفاده از کلاس :nth-child و انتخابگر CSS . توجه داشته باشید در مرورگرهای IE7 و IE8 غیرفعال می باشد.

ردیف	نام	نام خانوادگی	نام کاربری
۱	حمیدرضا	ذوالفقار	manager
۲	مریم	سلیمی	m.salimi
۳	طاها	علیپور	t.alipour

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

`.table-hover`

فعال کردن قابلیت hover با استفاده از کلاس .table-hover در سطر های جدول<tbody>

ردیف	نام	نام خانوادگی	نام کاربری
۱	حمیدرضا	ذوالفقار	manager
۲	مریم	سلیمی	m.salimi
۳	طاها علیپور		t.alipour

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

`.table-bordered`

با استفاده از کلاس .table-bordered حاشیه و گوشه های گرد به جدولتان بیافزایید.

ردیف	نام	نام خانوادگی	نام کاربری
۱	حمیدرضا	ذوالفقار	manager
۱	حمیدرضا	ذوالفقار	manager
۲	مریم	سلیمی	m.salimi
۳	طاها علیپور		t.alipour

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

`.table-condensed`

با استفاده از کلاس .table-condensed جدول خود را کوچک کنید این کلاس پدینگ ها را به نصف کاهش می دهد

ردیف	نام	نام خانوادگی	نام کاربری
۱	حمیدرضا	ذوالفقار	manager
۲	مریم	سلیمی	m.salimi
۳	طاها علیپور		t.alipour

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

کلاس های اختیاری ردیف ها

با استفاده از کلاس های متنی می توانید سطرهای جدول را به صورت رنگی نمایش دهید.

کلاس	شرح
`.success`	یک سطر با حالت موفق یا یک واکنش مثبت نمایش می دهد.
`.error`	یک سطر با حالت خطر یا یک واکنش منفی نمایش می دهد.
`.warning`	یک سطر با حالت اخطار نمایش می دهد که احتیاج به توجه دارد.
`.info`	این سطر به عنوان یک جایگزین برای سبک های پیش فرض مورد استفاده قرار می گیرد.

ردیف	محصول	زمان پرداخت	وضعیت
۱	قالب آکادو	۱۳۹۳/۶/۱۸	تائید شده
۲	قالب صدر	۱۳۹۳/۶/۲۱	کنسل شده
۳	قالب اخبار ۳	۱۳۹۳/۶/۲۳	تولید لایسنس
۴	قالب طلوع	۱۳۹۳/۶/۱۸	قالب رایگان

...
  <tr class="success">
    <td>۱</td>
    <td>قالب آکادو</td>
    <td>۱۳۹۳/۶/۱۸</td>
    <td>تائید شده</td>
  </tr>
...

المان های پشتیبانی شده جدول

لیستی از المان های پشتیبانی شده جداول در HTML و نحوه کاربرد آنها

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

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

سبک های پیشفرض

فرم های انفرادی سبک های دریافت را بدون هیچگونه کلاسی درون تگ <form> و یا تغییری در نشانه گذاری کنترل می کنند. نتایج دریافت شده در بالای فرم ها از سمت چپ چیده می شوند.

<form>
  <legend>شرح</legend>
  <label>نام برچسب</label>
  <input type="text" 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="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">جستجو</button>
</form>

فرم های درون خطی

کلاس .form-inline را جهت نمایش برچسب های چپ چین و بلاک های درون خطی در طرح کم حجم استفاده می کنند.

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> مرا به خاطر بسپار.
  </label>
  <button type="submit" class="btn">ورود</button>
</form>

فرم های افقی

برچسب های راست چین و همچنین شناور که با اطلاعات ورود در یک خط نوشته می شوند.نیازمند تغییرات زیاد در فرم های پیشفرض هستند:

کد .form-horizontal را به فرم اضافه کنید.
برچسب ها و اطلاعات را با کد .control-group مشخص کنید
کد .control-label را به برچسب ها اضافه کنید.
قرار دادن هرگونه کنترل مرتبط درون کلاس .controls برای چیدمان مناسب

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">ایمیل</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="ایمیل">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="رمز ورود">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> مرا به خاطر بسپار.
      </label>
      <button type="submit" class="btn">ورود</button>
    </div>
  </div>
</form>

کنترل های پشتیبانی شده در فرم

مثال های استاندارد کنترل های فرم پشتیبانی شده در یک طرح مثال

ورودی ها

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

این فیلدها باید در هر زمانی از یک type خاص استفاده کنند.

<input type="text" placeholder="محل وارد کردن متن">

محدوده متن-textarea

کنترل های فرم که از متون چند خطی پشتیبانی می کنند. در صورت لزوم کلاس row آنها را به تغییر دهید.

<textarea rows="3"></textarea>

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

چک باکس برای انتخاب یک یا چند گزینه از بین گزینه های موجود است در حالیکه رادیو تنها امکان انتخاب یک گزینه را به کاربر می دهد.

<label class="checkbox">
  <input type="checkbox" value="">
گزینه اول که می توانید آنرا انتخاب کنید یا انتخاب نکنید.
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  گزینه دوم - نمی توانید همزمان گزینه دوم و گزینه سوم را انتخاب کنید.
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  گزینه سوم- هنگامی که این گزینه را انخاب کنید گزینه دوم غیر فعال خواهد شد.
</label>

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

برای داشتن چک باکس ها و یا رادیوها در یک خط کافیست کلاس .inline را به سری چک باکس ها اضافه کنید.

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> ۱
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> ۲
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> ۳
</label>

انتخابها

می توانید از یک انتخابگر بازشو استفاده کنید یا با اضافه کردن کلاس multiple="multiple" امکان انتخاب چند گزینه را در یک انتخابگر بدهید.

<select>
  <option>۱</option>
  <option>۲</option>
  <option>۳</option>
  <option>۴</option>
  <option>۵</option>
</select>
<select multiple="multiple">
  <option>۱</option>
  <option>۲</option>
  <option>۳</option>
  <option>۴</option>
  <option>۵</option>
</select>

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

اضافه و پیوست کردن ورودی ها

کاربر می تواند قبل و یا بعد از ورودی های متنی دکمه اضافه کند. توجه داشته باشید المان های select در اینجا پشتیبانی نمی شوند.

گزینه های پیشفرض

شما می توانید کلاس های .add-on و input را همراه با یکی از دو کلاس prepend/append text در ورودی قرار دهید.

<div class="input-prepend">
  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
</div>

فرم جستجو

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">جستجو</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">جستجو</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

ترکیبی

استفاده از دو کلاس و دو نمونه .add-on در ورودی های prepend و append

<div class="input-prepend input-append">
  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
</div>

دکمه ها به جای متن ها

شما می توانید به جای استفاده از <span> از .btn یک دکمه و یا دو دکمه جهت اضافه کردن به ورودی استفاده کنید.

<div class="input-append">
  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">برو!</button>
</div>
<div class="input-append">
  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">جستجو</button><button class="btn" type="button">گزینه ها</button>
</div>

عملیات فرم

هر فرم با یک یا گروهی از دکمه ها پایان می گیرد.وقتی که یک کد .form-horizontal در فرم قرار می گیرد، دکمه ها به صورت خودکار اطلاعات فرم را دسته بندی می کند.

<div class="form-actions">
  <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
  <button type="button" class="btn">لغو</button>
</div>

متن راهنما

پشتیبانی از متن راهنمای درون خطی و یا بلوک ها که در اطراف کنترل های فرم نمایش داده می شوند.

راهنمای درون خطی

<input type="text"><span class="help-inline">راهنمای درون خطی</span>

بلوک راهنما

<input type="text"><span class="help-block">یک بلوک بلند از متن راهنما که اگر به انتهای بلوک برسد در خط جدید نمایش داده خواهد شد.</span>

اندازه کنترل های فرم

کاربران می توانند از کلاس های اندازه مثل .input-large و یا تطابق ورودی ها اندازه ستون ها با استفاده از کلاس کد های .span* استفاده کنند.

اندازه های نسبی

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

توجه کنید: در ورژن های آینده ما این کلاس های دکمه ها و ورودی ها را تغییر خواهیم داد. به عنوان مثال پدینگ و اندازه قلم کلاس .input-large افزایش خواهد یافت.

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

یک ورودی غیر قابل ویرایش را نمایش می دهد که برای برای ویرایش آن فقط باید از طریق کدهای اصلی اقدام کرد.

<span class="input-xlarge uneditable-input">گروه فناوری اطلاعات جومی</span>

وضعیت کنترل های فرم

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

Input focus

در بعضی از کنترل های فرم ما سبک outline را حذف می کنیم و به جای آن سبک box-shadow را جایگزین می کنیم تا بر روی آن فوکوس :focus کنیم.

<input class="input-xlarge" id="focusedInput" type="text" value="این متن فوکوس شده است...">

ورودی های غیرفعال

ویژگی disabled را به کد ورودی اضافه کنید تا ورودی غیر فعال باشد و نمایی کمی متفاوت داشته باشد.

<input class="input-xlarge" id="disabledInput" type="text" placeholder="این ورودی از نوع غیر فعال است..." disabled>

وضعیت های ارزشیابی

بوتسترپ شامل سبک هایی برای ارزشیابی پیام های خطا و اخطار و موفقیت آمیز می باشد. برای استفاده از این کلاس ها کد را به فیلد ورودی اضافه کنید.!!!!

<div class="control-group warning">
  <label class="control-label" for="inputWarning">ورودی با اخطار</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">همه چیز را چک کنید، اشتباهی وجود دارد.</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">ورودی همراه با خطا</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">لطفا خطاها را تصحیح کنید.</span>
  </div>
</div>
<div class="control-group info">
  <label class="control-label" for="inputError">ورودی همراه با اطلاعیه</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">این نام کاربری قبلا استفاده شده است.</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">ورودی با موفقیت</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">همه چیز به درستی وارد شده است.</span>
  </div>
</div>

دکمه های پیشفرض

سبک های دکمه ها می توانند با استفاده از .btn در هر جایی به کار روند. هرچند برای کارکرد مناسب بهتر است درون تگ های <a> و <button> به کاربرده شود.

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

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

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

اندازه دکمه ها

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

<p>
  <button class="btn btn-large btn-primary" type="button">دکمه بزرگ</button>
  <button class="btn btn-large" type="button">دکمه بزرگ</button>
</p>
<p>
  <button class="btn btn-primary" type="button">دکمه پیشفرض</button>
  <button class="btn" type="button">دکمه پیشفرض</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">دکمه کوچک</button>
  <button class="btn btn-small" type="button">دکمه کوچک</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">دکمه ریز</button>
  <button class="btn btn-mini" type="button">دکمه ریز</button>
</p>

شما می توانید یک بلوک دکمه بسازید . کافی است کلاس .btn-block را به بخش والد آن اضافه کنید.

<button class="btn btn-large btn-block btn-primary" type="button">بلاک دکمه با کلاس اصلی</button>
<button class="btn btn-large btn-block" type="button">بلاک دکمه با کلاس پیشفرض</button>

حالت غیر فعال

یک دکمه غیر قابل کلیک با ۵۰درصد محو شدن می سازد.

عناصر لنگر

کلاس .disabled را به دکمه هایی با تگ <a> بیافزائید.

لینک اصلی لینک

<a href="#" class="btn btn-large btn-primary disabled">لینک اصلی</a>
<a href="#" class="btn btn-large disabled">لینک</a>

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

عناصر دکمه ها

ویژگی disabled را به دکمه <button> اضافه کنید.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">دکمه اصلی</button>
<button type="button" class="btn btn-large" disabled>دکمه</button>

یک کلاس، چند تگ

کلاس .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="ثبت">

آیکن

قلم Awesome

فونت Awesome یک فونت تصویرنگاری مربوط به وب است که بیش از 300 آیکن را برای ما تدارک دیده است. قلم Awesome و فایل های webfont و CSS و LESS تحت لایسنس CC BY 3.0 هستند و شما میتوانید تمام استفاده های آن را در Font Awesome - http://fortawesome.github.com/Font-Awesome ببینید.

کلاس .icon-CLASS_NAME را به هر عنصری در تگ <span> اضافه کنید

آیکن برنامه ها در وب

icon-adjust
icon-anchor
icon-archive
icon-asterisk
icon-ban-circle
icon-bar-chart
icon-barcode
icon-beaker
icon-beer
icon-bell
icon-bell-alt
icon-bolt
icon-book
icon-bookmark
icon-bookmark-empty
icon-briefcase
icon-bug
icon-building
icon-bullhorn
icon-bullseye
icon-calendar
icon-calendar-empty
icon-camera
icon-camera-retro
icon-certificate
icon-check
icon-check-empty
icon-check-minus
icon-check-sign
icon-circle
icon-circle-blank
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-code
icon-code-fork
icon-coffee
icon-cog
icon-cogs
icon-collapse
icon-collapse-alt
icon-collapse-top
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-compass
icon-credit-card
icon-crop
icon-dashboard
icon-desktop
icon-download
icon-download-alt
icon-edit
icon-edit-sign
icon-ellipsis-horizontal
icon-ellipsis-vertical

icon-envelope
icon-envelope-alt
icon-eraser
icon-exchange
icon-exclamation
icon-exclamation-sign
icon-expand
icon-expand-alt
icon-external-link
icon-external-link-sign
icon-eye-close
icon-eye-open
icon-facetime-video
icon-female
icon-fighter-jet
icon-film
icon-filter
icon-fire
icon-fire-extinguisher
icon-flag
icon-flag-alt
icon-flag-checkered
icon-folder-close
icon-folder-close-alt
icon-folder-open
icon-folder-open-alt
icon-food
icon-frown
icon-gamepad
icon-gear
icon-gears
icon-gift
icon-glass
icon-globe
icon-group
icon-hdd
icon-headphones
icon-heart
icon-heart-empty
icon-home
icon-inbox
icon-info
icon-info-sign
icon-key
icon-keyboard
icon-laptop
icon-leaf
icon-legal
icon-lemon
icon-level-down
icon-level-up
icon-lightbulb
icon-location-arrow
icon-lock
icon-magic
icon-magnet
icon-mail-forward

icon-mail-reply-all
icon-male
icon-map-marker
icon-meh
icon-microphone
icon-microphone-off
icon-minus
icon-minus-sign
icon-minus-sign-alt
icon-mobile-phone
icon-money
icon-moon
icon-move
icon-music
icon-off
icon-ok
icon-ok-circle
icon-ok-sign
icon-pencil
icon-phone
icon-phone-sign
icon-picture
icon-plane
icon-plus
icon-plus-sign
icon-plus-sign-alt
icon-power-off
icon-print
icon-pushpin
icon-puzzle-piece
icon-qrcode
icon-question
icon-question-sign
icon-quote-left
icon-quote-right
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-reply
icon-reply-all
icon-resize-horizontal
icon-resize-vertical
icon-retweet
icon-road
icon-rocket
icon-rss
icon-rss-sign
icon-screenshot
icon-search
icon-share
icon-share-alt
icon-share-sign
icon-shield
icon-mail-reply

icon-shopping-cart
icon-sign-blank
icon-signal
icon-signin
icon-signout
icon-sitemap
icon-smile
icon-sort
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-sort-down
icon-sort-up
icon-spinner
icon-star
icon-star-empty
icon-star-half
icon-star-half-empty
icon-star-half-full
icon-subscript
icon-suitcase
icon-sun
icon-superscript
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-terminal
icon-thumbs-down
icon-thumbs-down-alt
icon-thumbs-up
icon-thumbs-up-alt
icon-ticket
icon-time
icon-tint
icon-trash
icon-trophy
icon-truck
icon-umbrella
icon-unchecked
icon-unlock
icon-unlock-alt
icon-upload
icon-upload-alt
icon-user
icon-volume-down
icon-volume-off
icon-volume-up
icon-warning-sign
icon-wrench
icon-zoom-in
icon-zoom-out

آیکن های ارز

icon-bitcoin
icon-btc
icon-cny
icon-dollar

icon-eur
icon-euro
icon-gbp
icon-inr

icon-jpy
icon-krw
icon-renminbi
icon-rupee

icon-usd
icon-won
icon-yen

آیکن های ویرایشگر

icon-align-center
icon-align-justify
icon-align-left
icon-align-right
icon-bold
icon-columns
icon-copy
icon-cut
icon-eraser
icon-file

icon-file-alt
icon-file-text
icon-file-text-alt
icon-font
icon-indent-left
icon-indent-right
icon-italic
icon-link
icon-list
icon-list-alt

icon-list-ol
icon-list-ul
icon-paper-clip
icon-paperclip
icon-paste
icon-repeat
icon-rotate-left
icon-rotate-right
icon-save
icon-strikethrough

icon-table
icon-text-height
icon-text-width
icon-th
icon-th-large
icon-th-list
icon-underline
icon-undo
icon-unlink

آیکن های جهت دار

icon-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-caret-down

icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-sign-down
icon-chevron-sign-left
icon-chevron-sign-right

icon-chevron-sign-up
icon-chevron-up
icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-angle-down
icon-double-angle-left
icon-double-angle-right

icon-double-angle-up
icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-long-arrow-down
icon-long-arrow-left
icon-long-arrow-right
icon-long-arrow-up

آیکون های نمایش ویدئو

icon-backward
icon-eject
icon-fast-backward
icon-fast-forward

icon-forward
icon-fullscreen
icon-pause
icon-play

icon-play-circle
icon-play-sign
icon-resize-full
icon-resize-small

icon-step-backward
icon-step-forward
icon-stop
icon-youtube-play

آیکن های برند های معروف

icon-adn
icon-android
icon-apple
icon-bitbucket
icon-bitbucket-sign
icon-bitcoin
icon-btc
icon-css3
icon-dribbble
icon-dropbox
icon-facebook

icon-facebook-sign
icon-flickr
icon-foursquare
icon-github
icon-github-alt
icon-github-sign
icon-gittip
icon-google-plus
icon-google-plus-sign
icon-html5
icon-instagram

icon-linkedin
icon-linkedin-sign
icon-linux
icon-maxcdn
icon-pinterest
icon-pinterest-sign
icon-renren
icon-skype
icon-stackexchange
icon-trello
icon-tumblr

icon-tumblr-sign
icon-twitter
icon-twitter-sign
icon-vk
icon-weibo
icon-windows
icon-xing
icon-xing-sign
icon-youtube
icon-youtube-play
icon-youtube-sign

آیکن های پزشکی

icon-ambulance
icon-h-sign

icon-hospital
icon-medkit

icon-plus-sign-alt
icon-stethoscope

icon-user-md

<span class="icon-CLASS_NAME">
  ...
</span>
<span class="icon-download">
  ...
</span>

	امروز	41
	دیروز	35
	این هفته	108
	این ماه	979
	همه روزها	18320

آنچه باید توجه کرد

آزمون میان نوبت دوم

نمودار

فعالیت های آموزشی،فرهنگی و تربیتی

فعالیت های آموزشی و تربیتی به روایت تصویر .

Header

Slideshow

TopFullWidth

Drawer

Top

Showcase

Breadcrumb

Feature

Utility

ExpandedTop

MainTop

Content Top

Mainbody

Content Bottom

Sidebar

MainBottom

ExpandedBottom

FullWidth

Extension

Bottom

Footer

Copyright

Debug

Analytics

سرتیترها

h1. تیتر ۱

h2. تیتر ۲

h3. تیتر ۳

h4. تیتر ۴

h5. تیتر ۵

h6. تیتر ۶

ساخته شده با less

نسخه بدنه

پاراگراف برجسته

تاکید

<em>

استرانگ<strong>

کوچک <small>

Notice Styles

اختصارات

<abbr>

<abbr class="initialism">

آدرس ها

<address>

نقل قول ها

نقل قول پیشفرض

گزینه های نقل قول

نامگذاری یک منبع

نمایش های جایگزین

لیست ها

بدون اولویت

اولیت دار

بدون سبک

توضیحات

توضیحات افقی

کد

درون خطی

بلوک های پایه

زیباسازی

جداول

سبک های پیشفرض

کلاس های اختیاری

.table-striped

.table-hover

.table-bordered

.table-condensed

کلاس های اختیاری ردیف ها

المان های پشتیبانی شده جدول

Forms

سبک های پیشفرض

طرح های اختیاری

فرم جستجو

فرم های درون خطی

فرم های افقی

کنترل های پشتیبانی شده در فرم

`<em>`

استرانگ`<strong>`

کوچک `<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-hover`

`.table-bordered`

`.table-condensed`