%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

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

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

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>

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

دیدگاه‌ها  

+3 # ali bayervand 1394-08-20 17:12
سلام و خسته نباشد
مثال اول خودتان امتحان کنید کلاس pager رو نمایش میده .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-08-21 09:55
سلام ممنون از شما. مثال مورد نظر اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

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

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

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

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