0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

انواع دکمه ها در بوت استرپ با آموزش کامل

نویسنده پشتیبانی وب یار
امتیاز مطلب
5/5 - (2 امتیاز)
تعداد بازدید 5859
تاریخ بروزرسانی ۲۹ فروردین ۱۴۰۱

سایز دکمه ها در بوت استرپ – آموزش بوت استرپ

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

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

معرفی دکمه ها در bootstrap

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

  • btn-default  : برای ایجاد یک دکمه ی پیش فرض به رنگ خاکستری است.
  • btn-primary  : برای مشخص کردن دکمه ی اصلی از این کلاس استفاده می شود.
  • btn-success  : این کلاس مشخص کننده ی یک عملیات موفقیت آمیز است.
  • btn-info  : از این کلاس می توان به عنوان یک گزینه برای دکمه ی پیش فرض استفاده کرد.
  • btn-warning  : این کلاس نشان می دهد که در این فعالیت باید احتیاط شود.
  • btn-danger  : استفاده از این کلاس نشان دهنده ی یک عملیات خطرناک یا منفی است.
  • btn-link : از این کلاس به این منظور استفاده می شود که شکل ظاهری دکمه به صورت لینک نمایش داده شود. اما همچنان ویژگی های دکمه را دارد.

قبل از همه ی این کلاس ها باید از کلاس btn استفاده شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.

خروجی این کد به صورت زیر است.

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

روش های مختلف ایجاد دکمه

برای ایجاد دکمه علاوه بر تگ button، می توان از تگ های input و a هم استفاده کرد. به کدهای زیر توجه کنید.

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

خروجی این کد در تصویر زیر نمایش داده شده است.

روش های مختلف ایجاد دکمه

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

بوت استرپ به شما اجازه می دهد تا با استفاده از کلاس های btn-md ، btn-sm ، btn-xs و btn-lg  سایز دکمه ها را تغییر دهید. این کلاس ها به ترتیب برای ایجاد دکمه ی خیلی کوچک، دکمه ی کوچک، متوسط و دکمه ی بزرگ استفاده می شوند. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است.

 

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

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

 

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

خروجی کد بالا

کلاس btn-block

دکمه های فعال و غیر فعال در بوت استرپ

حتماً تا کنون با دکمه های غیرفعال در سایت ها مواجه شده اید. برای مثال تا زمانی که اطلاعات یک مرحله را وارد نکرده اید، دکمه ی رفتن به مرحله ی بعد غیر فعال است. اگر علاقمند هستید که بدانید چطور این دکمه ها غیر فعال شده اند، پاسخ آن خیلی ساده است. کافی است از کلاس disabled برای غیر فعال کردن دکمه استفاده کنید. از کلاس active هم برای فعال کردن دکمه استفاده می شود.
در کد زیر از این کلاس ها استفاده شده است.

خروجی کد بالا

کلاس disabled و active

 

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

شما می توانید در بوت استرپ دکمه ها را به صورت خطی گروه بندی کنید. برای این منظور کافی است از کلاس btn-group  در تگ div استفاده کنید و دکمه ها را در این div قرار دهید. به کد زیر دقت کنید.

<div class="btn-group">
<button type="button" class="btn btn-primary">ok</button>
<button type="button" class="btn btn-primary">cancel</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>

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

دکمه های گروهی در bootstrap

 

جالب است بدانید که شما می توانید برای این دکمه های گروهی در بوت استرپ سایز هم مشخص کنید. در واقع با اضافه کردن کلاس *-btn-group به تگ div می توانیم برای دکمه های گروهی یک سایز یکسان تعریف کنید. به جای * از عبارات xs ، sm ، md و lg استفاده می شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس آشنا می شوید.

<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-primary">ok</button>
<button type="button" class="btn btn-primary">cancel</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
<br><br>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">ok</button>
<button type="button" class="btn btn-primary">cancel</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
<br><br>
<div class="btn-group btn-group-md">
<button type="button" class="btn btn-primary">ok</button>
<button type="button" class="btn btn-primary">cancel</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
<br><br>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">ok</button>
<button type="button" class="btn btn-primary">cancel</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>

خروجی به صورت زیر است.

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

 

ایجاد دکمه های گروهی عمودی

بوت استرپ به شما این امکان را می دهد که دکمه های گروهی را به صورت عمودی ایجاد کنید. برای این منظور کافی است از کلاس btn-group-vertical استفاده کنید. این کلاس را در یک تگ div نوشته و دکمه ها را در این تگ قرار دهید. با دقت به کد زیر می توانید دکمه های گروهی عمودی را ایجاد کنید.

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">ok</button>
<button type="button" class="btn btn-primary">cancel</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>

در این تصویر می توانید نتیجه ی کد بالا را ببینید.

دکمه های گروهی عمودی

 

کلاس btn-group-justified

برای اینکه دکمه های گروهی، تمام عرض صفحه را اشغال کنند باید از کلاس btn-group-justified  در تگ div استفاده کنید. اگر برای ایجاد دکمه ها از تگ a استفاده کنید که نیاز به کد دیگری نیست. اما اگر برای ایجاد دکمه از button  استفاده کنید، باید هر کدام از این دکمه ها را در یک تگ div با کلاس btn-group قرار دهید. به کد زیر دقت کنید.

<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">ok</a>
<a href="#" class="btn btn-primary">cancel</a>
<a href="#" class="btn btn-primary">Apply</a>
</div>
<br>
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-success">ok</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">cancel</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Apply</button>
</div>
</div>

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

 

دکمه های گروهی تمام عرض

 

ایجاد منوی کشویی

برای ایجاد منوی کشویی برای دکمه های گروهی باید دکمه ای را که می خواهید برای آن منوی کشویی بگذارید در یک تگ div جدا با کلاس btn-group بگذارید. سپس به دکمه ی مورد نظر کلاس dropdown-toggle  و خصوصیت  data-toggle=”dropdown” را اضافه کنید تا منو قابلیت باز شدن داشته باشد.
برای اضافه کردن آیتم های منو از تگ های ul و li استفاده کنید و به تگ ul کلاس dropdown-menu  را بدهید. به کد زیر دقت کنید.

<div class="btn-group">
<button type="button" class="btn btn-primary">Html</button>
<button type="button" class="btn btn-primary">Css&lt;/button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Bootstrap <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">BS Button</a></li>
<li><a href="#">BS Button Groups</a></li>
</ul>
</div>
</div>

خروجی کد بالا در این تصویر نشان داده شده است.

ایجاد منوی کشویی برای دکمه های گروهی

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

<div class="btn-group">
<button type="button" class="btn btn-primary">Bootstrap</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="#">BS Button</a></li>
<li><a href="#">BS Button Groups</a></li>
</ul>
</div>

خروجی به صورت زیر است.

Split Button Dropdowns

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

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

جدول در بوت استرپ

تصاویر در بوت استرپ

کلاس های well و jumbotron در بوت استرپ

هشدارها در بوت استرپ

برای آگاهی از جدیدترین آموزش های طراحی سایت به صفحه ی اینستاگرام وب یار مراجعه فرمایید.

 

 

5/5 - (2 امتیاز)
مطالب مرتبط
z1 1
مطالعه :

“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار ها ، ارائه می دهند.هر کسب و کاری که شروع به آنلاین کردن خدمات خود می نماید ، حتما یک وب سایت دارد ، اما سوال اینجاست که اگر شما به عنوان یک کاربر ، در محلی شلوغ مانند خیابان یا فروشگاه ، در لحظه نیاز به خدمات آن کسب و کار داشته باشید ، آیا برای شما راحت و مقدور است که از اپلیکیشن استفاده کنید یا از وب سایت؟جواب کاملا روشن است که استفاده از اپلیکیشن در بسیاری از مواقع راحت تر از وب سایت است و این مسئله نیاز اکثر کسب و کار ها به شرکت های طراحی اپلیکیشن برای طراحی اپلیکیشن را نشان می دهد.در ادامه به این موضوع خواهیم پرداخت که اپلیکیشن چیست و از لحاظ درآمد زایی و بازاریابی کسب و کار ، چه ارزشی می تواند داشته باشد. اپلیکیشن چیست؟ اپلیکیشن یا همان اپ ، نوعی نرم افزار است که بر بستر های گوناگون مانند تلفن همراه ، […]

بهترین زبان های برنامه نویسی
مطالعه :

برنامه نویسی ، همواره جز مشاغل و حرفه هایی طبقه بندی می شود که بسیار پرتقاضا بوده و می تواند ، آینده شغلی بسیار خوبی را برای برنامه نویس فرآهم کند.اما مسئله اصلی ، انتخاب بهترین زبان برنامه نویسی است ؛ چراکه بسیاری از کسانی که قصد یادگیری و شروع برنامه نویسی را دارند ، در انتخاب مسیر و بهترین زبان برنامه نویسی ، مردد هستند. اینجاست که باید به شما بگوییم ، هیچ جای نگرانی نیست و می توانید با کمی مطالعه و انتخاب بهترین مسیر که برای هر فردی متفاوت است ، بهترین زبان برنامه نویسی مناسب مسیر خود را انتخاب کرده و با قدرت پیش بروید.در واقع منظورم از پاراگراف قبل ، این است که در جواب سوال بهترین زبان برنامه نویسی چیست ، باید بپرسیم ، بهترین زبان برنامه نویسی در کدام زمینه یا شاخه؟ انتخاب بهترین زبان برنامه نویسی ، چه تاثیری بر کار و عملکرد من دارد؟ انتخاب بهترین مسیر و بهترین زبان برنامه نویسی ، این امکان را برای شما فراهم می کند تا در زمینه ای که به آن علاقه دارید و برای شما مناسب است ، یا به هر دلیلی آن را مسیر درست خود دانسته اید ، بدون هدر رفتن منابع و زمان ، بهترین عملکرد ممکن را داشته باشید و خود را به بهترین جایگاه ممکن در آن شاخه […]

مطالعه :

دقیفا مفهوم تبلیغات چیست و چه جایگاهی دارد؟کسب و کار ها تا چه اندازه وابسته به تبلیغات هستند؟تبلیغ در کدام پلتفرم ها برای من سود بیشتری دارد؟ “بسیاری از چیز های کوچک ، به واسطه تبلیغات صحیح بزرگ شده اند.“ مارک تواین تبلیغات چیست و چرا تبلیغات انجام می دهیم؟ از زمان های خیلی دور و حتی قبل از شکل گیری صنعت تبلیغات به صورت گسترده امروزی ، از تبلیغات به عنوان وسیله یا روشی برای ارتقا جایگاه یک محصول یا خدمت در اذهان جامعه و یا یک جامعه هدف خاص استفاده می شد. اما به مرور زمان با افزایش رقابت در بین کسب و کار ها و برند ها ، رویکرد ترفیع جایگاه برند در جامعه ، دچار اختلال شد. در آن زمان افراد زیادی در معرض تبلیغات و پیام های تبلیغاتی قرار می گرفتند که البته بیشتر این افراد ، از مخاطبان و جز جامعه هدف این دسته از تبلیغات نبودند ، از این رو ، تبلیغات روز به روز تاثیر خود را بر فکر و عملکرد مردم ، از دست می دادند که نتیجه این امر ، کاهش استفاده مفید و کارآمد از بودجه بندی تبلیغاتی بود. امروزه با وجود رقابت های سنگین تبلیغاتی ، عرصه تبلیغات برای شرکت ها و کسب و کار ها ، بسیار پرهزینه هستند و اگر به درستی از ابزار ها و […]

laptop with program code isometric icon software development programming applications dark neon 39422 971 1
مطالعه :

قبل از شروع نوشتن محتوای این مقاله به نظرم رسید که خالی از لطف نیست تا جمله ای از یکی از بزرگان صنعت برنامه نویسی یعنی نیکلاس نگروپونته را برای شما عزیزان علاقه مند به حوزه برنامه نویسی ، بیان کنم .ایشان در یکی از سخنرانی های خود درباره برنامه نویسی اینطوری می فرمایند:“برنامه‌نویسی این امکان رو به شما می‌ده تا در مورد خودِ «فکر کردن» فکر کنید و وقتی‌ هم که دیباگ می‌کنید، در مورد خودِ «یادگیری» یاد می‌گیرید.”و در حقیقت نیز نیز همین طور است.اگر روش صحیح درست فکر کردن و یادگیری را بلد نباشیم ، به هیچ وجه ، قادر نخواهیم بود برنامه نویسی را به صورت حرفه ای پیش ببریم. خوب بریم سر اصل مطلب ، یعنی برسی جدید ترین و نو ظهور ترین زبان های برنامه نویسی. مقدمه امروزه با پیشرفت روز افزون تکنولوژی و وابستگی کسب و کار ها به صنعت دیجیتال ، اهمیت برنامه نویسان و توسعه دهندگان همه زمینه ها ، روز به روز افزایش میابد؛ این بدان معنا است که چه برنامه نویس هستید و چه کارفرما ، این بسیار اهمیت دارد که حداقل آگاهی های لازم را از دانش برنامه نویسی داشته باشید.اما دانستن یک زبان برنامه نویسی به تنهایی مشکلی را حل نمی کند و شما می بایست با جدید ترین متد ها و زبان ها آشنایی داشته باشید.زبان […]

بلاک اکشن
مطالعه :

  از بلاک اکشن ها چه می دانید؟ آیا تا به حال محدودیت های بلاک اکشن برای شما اعمال شده است؟اصلا در چه صورتی محدودیت های بلاک اکشن، برای شما اعمال می شود؟اگر اکانت اینستاگرام ما بلاک شد ، چه کاری از دست ما بر می آید؟ به طور کلی، بیشتر سامانه ها و وب اپلیکیشن ها ، برای فعالیت کاربران خود ، محدودیت هایی را به منظور جلوگیری از سوء استفاده های ناشی از فعالیت ربات ها ، اعمال می کنند و در صورتی که رفتار کاربری ، ربات گونه تشخیص داده شود ، در مرحله اول دسترسی این کاربر به برخی از خدمات و بخش های اپلیکشن محدود شده یا به عبارتی بلاک اکشن می شود.به دلیل آنکه بلاک اکشن شدن ، بیشتر در اینستاگرام ، دامن گیر ما می شود ، در ادامه موضوع اکشن بلاک را با محوریت اینستاگرام ، پیش خواهیم برد.در ادامه مقاله با ما همراه باشید. اینستاگرام من را بلک کرده ،این دقیقا یعنی چی؟ در صورتی که فعالیت های معمول شما در این پلتفرم(لایک ، کامنت ، فالو ، پست ، اشتراک گذاری استوری و پست یا هر اقدام دیگری) ، مسدود شده یا فعال نمی باشد ، اینساگرام ، محدودیت های بلاک اکشن را برای شما فعال نموده و این بدان معناست که شما قادر به لایک کردن یا دنبال کردن […]

programming languages 1400x670 e1473853525637 71agx31re0h9ve0ooztpf94s2fkoiw4fn87rtxibnhs 1
مطالعه :

یادگیری زبان برنامه نویسی ، نیاز هر انسانی است که در دنیای امروز ما زندگی می کند.اما ممکن است یادگیری برنامه نویسی ترسناک و دلهره آور به نظر برسد؛ اما با انتخاب درست زبان برنامه نویسی ، این نگرانی تا حد زیادی بی معنا می شود. به جرعت می توان گفت این نگرانی با وجود منابع آفلاین و آنلاین در دسترس مانند w3schools که بهترین آموزش ها را به صورت رایگان در اختیار همگان قرار می دهند ، امری بی مورد است ، به طوری که امروزه یک کودک نیز این امکان را دارد تا یک زبان برنامه نویسی را از ابتدا بیاموزد و شروع به برنامه نویسی نماید.اما مسئله در حوزه یادگیری زبان برنامه نویسی ، تنها منابع یادگیری نیستند ، بلکه فردی که اراده نموده تا وارد دنیای جذاب و بی مثال برنامه نویسی شود ، باید مسیر درستی را طی کند تا به قدرت نوشتن برنامه های سطح بالا  و ارزشمند ، دست یابد. در ادامه با ما در این مقاله همراه باشید، مطمئناً در انتهای ایم مقاله از سردرگمی شما برای شروع برنامه نویسی ، کاسته خواهد شد.   در چه حوزه ای علاقه مند به فعالیت هستید؟ برای اینکه بتوان زبان مناسبی را برای شروع انتخاب و برای یادگیری آن برنامه ریزی کرد ، باید این موضوع را دانست که زبان های برنامه نوسی زیادی […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.