%45 تخفیف، با کد Ghadir روی تمام آموزش ها، بمناسبت عید قربان تا غدیر
زمان باقی مانده (آخرین فرصت)

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

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

Wiki

کلاس های دکمه، می توانند در یک عنصر <a> یا <button> یا <input> مورد استفاده قرار گیرند. 

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

برای انجام این کار می توانید از کلاس های btn-lg. و btn-info. استفاده کنید.

مثال 

 <div class="jumbotron">
  <h1>اولین صفحه ی بوت استرپ من</h1> 
  <p>This page will grow as we add more and more components from Bootstrap...</p>
  <a href="#" class="btn btn-info btn-lg">Search</a>
</div>

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

چرا  از یک علامت  # درون خصوصیت href  استفاده کردیم؟

هنگامی که هیچ صفحه ای برای لینک کردن نداریم، و نمی خواهیم پیغام خطای 404 را مشاهده کنیم، از یک علامت # بعنوان لینک استفاده می کنیم.


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

Wiki

بوتسترپ همچنین 200 آیکن نمادین را به ما  ارائه می دهد.

برای نمایش دادن یک آیکن نمادین از کد ساده ی زیر استفاده کنید:

<span class="glyphicon glyphicon-print"></span>

کد بالا یک آیکن پرینتر را نمایش خواهد داد:

مثال زیر یک آیکن جستجو(Search) را به یک دکمه ی جستجو اضافه می کند:

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

 <div class="jumbotron">
  <h1>اولین صفحه ی بوت استرپ من</h1> 
  <p>This page will grow as we add more and more components from Bootstrap...</p>
  <a href="#" class="btn btn-info btn-lg">
    <span class="glyphicon glyphicon-search"></span> Search
  </a>
</div>

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

آموزش صوتی Bootstrap

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

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

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

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