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

1 دیدگاه

سلام دوستان عزیز، توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه ششم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. همونطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده . شروع دوره در ادامه مطلب…

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه ششم :

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

بوت استرپ به شما این امکان را میدهد تا تعدادی دکمه را با هم گروه بندی (در یک خط) کنید :

برای ساخت دکمه ها در یک خط از عنصر <div> به همراه کلاس btn-group استفاده کنید.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

نکته : به جای اینکه اندازه هر دکمه را در یک گروه به صورت مجزا تعین کنید با استفاده از کلاس btn-group-* همه دکمه را به صورت همزمان اندازه بندی کنید.

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

لینک دمو

دکمه های عمودی در بوت استرپ :

بوت استرپ از گروه دکمه های عمودی نیز پشتیبانی میکند :

برای ساخت این گروه دکمه های عمودی از کلاس btn-group-vertical استفاده می کنید.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

دکمه های تراز شده در بوت استرپ (Justified button groups) :

برای گسترش عرض کل صفحه از کلاس btn-group-justified استفاده می کنیم.

یک مثال با عنصر <a> :

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

<a href="#" class="btn btn-primary">Apple</a>

<a href="#" class="btn btn-primary">Samsung</a>

</div>

نکته : برای عنصر <button> باید هر دکمه را در یک کلاس btn-group قرار دهید.

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

<button type="button" class="btn btn-primary">Apple</button>

</div>

<button type="button" class="btn btn-primary">Samsung</button>

</div>

</div>

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

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

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

Sony <span class="caret"></span></button>

<li><a href="#">Tablet</a></li>

<li><a href="#">Smartphone</a></li>

</ul>

</div>

دمو

و دکمه با منو کشویی جدا :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

</button>

<li><a href="#">Tablet</a></li>

<li><a href="#">Smartphone</a></li>

</ul>

</div>

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش بوت استرپ به زبان فارسی

صابر بوستانی

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

آموزش گام به گام برنامه نویسی اندروید با B4A (پروژه محور)

انتشار: ۱۰ بهمن ۱۳۹۴

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

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه ششم :

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط