انواع دکمه ها در بوت استرپ با آموزش کامل
سایز دکمه ها در بوت استرپ – آموزش بوت استرپ
در این مقاله، آموزش دکمه ها در بوت استرپ را خواهید خواند که توسط تیم طراحی سایت اصفهان وب یار برای شما عزیزان آماده شده است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ آشنا می شوید.
دکمه ها برای اهداف مختلفی مانند submit یا reset کردن یک فرم، نمایش دادن یا مخفی کردن یک مطلب در سایت و موارد دیگر استفاده می شوند. بنابراین دکمه ها یک بخش لازم در طراحی سایت هستند. در ادامه همراه ما باشید تا با دکمه ها در بوت استرپ آشنا شوید.
معرفی دکمه ها در bootstrap
همانطور که می دانید تگ button برای ایجاد دکمه استفاده می شود. حال برای این که استایلی را که بوت استرپ برای دکمه ها در نظر گرفته است، به تگ button اضافه کنیم، کافی است از کلاس های بوت استرپ برای دکمه ها استفاده کنیم. این کلاس ها به شرح زیر می باشد.
- btn-default : برای ایجاد یک دکمه ی پیش فرض به رنگ خاکستری است.
- btn-primary : برای مشخص کردن دکمه ی اصلی از این کلاس استفاده می شود.
- btn-success : این کلاس مشخص کننده ی یک عملیات موفقیت آمیز است.
- btn-info : از این کلاس می توان به عنوان یک گزینه برای دکمه ی پیش فرض استفاده کرد.
- btn-warning : این کلاس نشان می دهد که در این فعالیت باید احتیاط شود.
- btn-danger : استفاده از این کلاس نشان دهنده ی یک عملیات خطرناک یا منفی است.
- btn-link : از این کلاس به این منظور استفاده می شود که شکل ظاهری دکمه به صورت لینک نمایش داده شود. اما همچنان ویژگی های دکمه را دارد.
قبل از همه ی این کلاس ها باید از کلاس btn استفاده شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.
|
1 2 3 4 5 6 7 8 |
<span style="font-size: 14pt;"><button type="button" class="btn">Basic Button</button> <button type="button" class="btn btn-default">Default Button</button> <button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-success">Success Button</button> <button type="button" class="btn btn-info">Info Button</button> <button type="button" class="btn btn-warning">Warning Button</button> <button type="button" class="btn btn-danger">Danger Button</button> <button type="button" class="btn btn-link">Link Button</button></span> |
خروجی این کد به صورت زیر است.
روش های مختلف ایجاد دکمه
برای ایجاد دکمه علاوه بر تگ button، می توان از تگ های input و a هم استفاده کرد. به کدهای زیر توجه کنید.
|
1 2 3 4 |
<span style="font-size: 14pt;"> <button type="button" class="btn btn-primary">Button</button> <input type="button" class="btn btn-success" value="Input Button"> <a href="#" class="btn btn-warning" role="button">Link Button</a> <input type="submit" class="btn btn-danger" value="Submit Button"></span> |
اگر به کدها دقت کنید مشاهده می کنید که برای ایجاد دکمه می توان از تگ input ، هم از نوع submit و هم از نوع button استفاده کرد.
خروجی این کد در تصویر زیر نمایش داده شده است.
سایز دکمه ها در بوت استرپ
بوت استرپ به شما اجازه می دهد تا با استفاده از کلاس های btn-md ، btn-sm ، btn-xs و btn-lg سایز دکمه ها را تغییر دهید. این کلاس ها به ترتیب برای ایجاد دکمه ی خیلی کوچک، دکمه ی کوچک، متوسط و دکمه ی بزرگ استفاده می شوند. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است.
|
1 2 3 4 |
<span style="font-size: 14pt;"><button type="button" class="btn btn-info btn-xs">Xsmall</button> <button type="button" class="btn btn-info btn-sm">Small</button> <button type="button" class="btn btn-info btn-md">Medium</button> <button type="button" class="btn btn-info btn-lg">Large</button></span> |
در تصویر زیر می توانید خروجی کد بالا را مشاهده کنید.
برای ایجاد دکمه با عرض کامل از کلاس btn-block استفاده می شود. به کد زیر دقت کنید.
|
1 2 3 4 5 |
<span style="font-size: 14pt;"><button type="button" class="btn btn-success btn-block">Button</button> <button type="button" class="btn btn-success btn-lg btn-block">Large Button</button> <button type="button" class="btn btn-success btn-md btn-block">Medium Button</button> <button type="button" class="btn btn-success btn-sm btn-block">Small Button</button> <button type="button" class="btn btn-success btn-xs btn-block">Xsmall Button</button></span> |
خروجی کد بالا
دکمه های فعال و غیر فعال در بوت استرپ
حتماً تا کنون با دکمه های غیرفعال در سایت ها مواجه شده اید. برای مثال تا زمانی که اطلاعات یک مرحله را وارد نکرده اید، دکمه ی رفتن به مرحله ی بعد غیر فعال است. اگر علاقمند هستید که بدانید چطور این دکمه ها غیر فعال شده اند، پاسخ آن خیلی ساده است. کافی است از کلاس disabled برای غیر فعال کردن دکمه استفاده کنید. از کلاس active هم برای فعال کردن دکمه استفاده می شود.
در کد زیر از این کلاس ها استفاده شده است.
|
1 2 3 |
<span style="font-size: 14pt;"><button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-primary active">Primary Button</button> <button type="button" class="btn btn-primary disabled">Primary Button</button></span> |
خروجی کد بالا
راه کار ایجاد دکمه های گروهی در بوت استرپ
شما می توانید در بوت استرپ دکمه ها را به صورت خطی گروه بندی کنید. برای این منظور کافی است از کلاس 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>
خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.
جالب است بدانید که شما می توانید برای این دکمه های گروهی در بوت استرپ سایز هم مشخص کنید. در واقع با اضافه کردن کلاس *-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</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>
خروجی به صورت زیر است.
خب دوستان معرفی انواع دکمه ها در بوت استرپ و آموزش ایجاد برخی دکمه ها در بوت استرپ به پایان رسید. اما تیم طراحی سایت وب یار همچنان آموزش های بوت استرپ را ادامه خواهد داد. چنانچه به مبحث بوت استرپ علاقمند هستید می توانید مباحث زیر را مطالعه بفرمایید.
استایل دهی به متن در بوت استرپ
کلاس های well و jumbotron در بوت استرپ
برای آگاهی از جدیدترین آموزش های طراحی سایت به صفحه ی اینستاگرام وب یار مراجعه فرمایید.
طراحی وب‌سایت به ساخت، راه‌اندازی و دیزاین صفحات وب گفته میشود که در ادامه با مزیت ساخت سایت در اصفهان آشنا می شویم. وب‌سایت‌ها با استفاده از زبان کدنویسی طراحی می‌شوند. اما امروزه با پیشرفت فناوری، توانایی‌ها و ویژگی‌های برنامه‌های ساخت وب‌سایت‌ها افزایش یافته و کار را برای برنامه‌نویسان و طراحان وب آسان‌تر کرده است. با توسعه فناوری و استفاده روز افزون مردم از تکنولوژی‌های پیشرفته و همینطور تاثیر شیوع کرونا، باعث شد تا مردم نیازهای خود را به صورت آنلاین و حضوری برطرف کنند. همینطور اکثر شرکت‌ها و حتی فروشگاه‌ها کلیه خدمات خود را به صورت اینترنتی در اختیار کاربران و مشتریان خود قرار می‌دهند. از این رو وب‌سایت‌ها اهمیت بسیار زیادی دارند. وب‌سایت‌ها انواع مختلفی از جمله وب‌سایت‌های فروشگاهی، شرکتی، خدماتی و… دارند. طراحی یک وب‌سایت حرفه‌ای می‌تواند شما را در جذب مشتری در اصفهان و شهر‌های دیگر کمک کند، مشتریانی که هم می‌توانند توریست باشند و هم از افراد خود اصفهان. طراحی یک وب‌سایت به خدماتی بستگی دارد که افراد می‌توانند به مشتریان خود ارائه دهند. افراد با طراحی یک وب‌سایت می‌تواند محصولات و یا خدمات خود را به همه مردم ایران و یا حتی جهان معرفی کنند. این خدمات می‌تواند خدمات فروشگاهی و راهبردی باشند. از این رو انتخاب شرکتی که بهترین و به روزترین خدمات ساخته وب‌سایت در اصفهان برای طراحی انواع وب‌سایت‌های تجاری را […]
دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]
طراحی قالب وردپرس امروزه طرفداران زیادی پیدا کرده است. وردپرس یک سیستم مدیریت محتوای قوی است که می توان با آن قالب های زیبایی طراحی کرد. در مطلب امروز وب یار می خواهیم با نحوه طراحی قالب وردپرس آشنا شویم. بیشتر سایت های دنیای وب امروزی با این سیستم مدیریت طراحی می شودو بازار کار خوبی دارد به ویژه اگر این قالب مختص کسب وکار شما باشد و با توجه به نیاز ها و سلایق شما طراحی شده باشد در این صورت است که علاوه برتکراری نبودن پاسخگوی نیازهای مجموعه شما می باشد. قالب وردپرس چیست ؟ وقتی شما هاست ودامنه ای برای سایت خود خریداری می کنید و سیستم مدیریت محتوای وردپرس را روی هاست خود نصب می کنید در این صورت یک سیستم مدیریت محتوا در دسترس شما قرار می گیرد با استفاده از این سیستم شما می توانید صفحه هاتی را به سایتتان اضافه کنید ،عکس و ویدیو منتشر کنید ،منو بالایی وپایین اضافه کنید ،انواع فرم ها را در سایت خود داشته باشید و… پس طراحی قالب وردپرس به شما امکان داشتن سایتی مجهز به امکانات خاص می باشد حال بسته به اینکه سایت شما شرکتی یا فروشگاهی ویا نه شخصی است لیست این امکانات متفاوت می باشد. دانلود قالب برای وردپرس بعد از اینکه شما وردپرس را نصب کردید سایت شما از یک ظاهر ساده […]
ساخت نرم افزار بدون کد نویسی و با استفاده از کدنویسی انجام میشود. در این مقاله از وب یار قصد داریم تا به چگونگی ساخت نرم افزار تحت ویندوز بدون کد نویسی و مزایای آن نسبت به روش‌های قدیمی بپردازیم. با پیشرفت تکنولوژی بستر استفاده از موبایل‌ها و کامپیوترها گسترده‌تر شده است، زیرا روز به روز به تعداد کاربران آن‌ها افزوده میشود. اگر شما نیز ایده‌ای برای تولید نرم افزار و سرویس‌دهی در این بستر را دارید، بهتر است هر چه سریعتر دست به کار شوید و از این فضا که پتانسیل بالایی دارد برای کسب درآمد استفاده کنید. ساخت نرم افزار بدون کد نویسی چگونه ممکن است؟ این روزها دیگر نیاز نیست تا پروسه‌ی طولانی آموزش برنامه نویسی را طی کنید تا بتوانید به ساخت نرم افزارها بپردازید. در گذشته اگر قصد ساخت برنامه‌ای را داشتید باید ساعت‌ها زمان صرف می‌کردید تا با استفاده از کدها دستور العمل‌هایی را برای برنامه تعریف کنید تا عملکرد درستی داشته باشد. همچنین پس از تعریف آن دستور العمل‌ها باید مراحل آزمون و خطا را طی می‌کردید تا به اصطلاح برنامه‌ای که ساخته‌ای را باگ گیری (اشکال‌گیری) کنید. اما دیگر ساخت نرم افزار بدون کد نویسی یک رویا نیست! متخصصان نرم افزارهای زیادی را به عنوان ابزارهای کمکی طراحی کرده‌اند تا کاربران بتوانند بدون نوشتن حتی یک خط کد، نرم افزار ایده‌آل خود […]
در این لینک مقالات مرجع جاوا اسکریپت برای شما عزیزان فراهم شده تا دسترسی راحت تری به مطالب حوزه جاوااسکریپت داشته باشید. آموزش زبان جاوا اسکریپت javascript + جلسه اول زبان برنامه نویسی جاوا اسکریپت یک زبان سمت کلاینت (کاربر) است و روی اکثر مرورگر های امروزی کار می کند. این زبان به تمام خصوصیت های عناصر html و css دسترسی داشته و نسبت به رویدادهای کاربر واکنش نشان می دهد محل قرار گیری کدهای جاوا اسکریپت + جلسه دوم تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند. آموزش دستورات مهم جاوا اسکریپت + جلسه سوم دستور جاوا اسکریپت شامل مقادیر، عملگرها،کلمات کلیدی و توضیحات است.دستورات جاوا اسکریپت زیر همان کلمات کلیدی رزرو شده ای هستند که نمی توانند به عنوان نام متغیر به کار روند. آموزش توضیحات در جاوا اسکریپت + جلسه چهارم توضیحات در جاوا اسکریپت به دو صورت به کار می روند: 1- توضیحات تک خطی 2- توضیحات چند خطی تعریف متغیرها در جاوا اسکریپت + قسمت پنجم متغیرها در javaScript حافظ و حامل اطلاعات هستند. یعنی این متغیرها اطلاعاتی را در خود ذخیره نموده و در حین اجرای برنامه با شرایط مختلف تغییر می کنند. انواع داده ها در JavaScript + جلسه ششم زبان جاوا اسکریپت نیز همانند سایر زبان های برنامه نویسی از انواع داده های عددی (Number) ، رشته ای (String) ، […]
در این مقاله از وب یار میخواهیم لیست ها در HTML5 که شامل لیست مرتب ، لیست نامرتب و لیست توضیحات را به شما بگوییم. آموزش لیست ها در HTML5 لیست ها کاربردهای فراوانی در متون مختلف داشته و حتما تا به حال نمونه هایی از آن ها را در کتاب ها ، مجلات ، روزنامه ها و.. دیده اید. اما کاربرد لیست ها محدود به مطالب چاپی نمی شود و امروزه در انواع طراحی صفحات وب ، شبکه های اجتماعی و یا پیام رسان ها نیز دیده می شوند. با کمک لیست ها می توانید موضوعات مرتبط به هم را در یک دسته قرار داده و آن ها را گروه بندی کنید. HTML نیز به منظور ایجاد انواع لیست ها در صفحات وب تگ هایی مشخص کرده است. در HTML5 سه نوع لیست با کاربردهای متفاوت وجود دارد که شامل موارد زیر است : Unordered Lists Ordered Lists Description Lists در ادامه به کاربرد و نحوه ی نوشتن هر لیست می پردازیم : لیست مرتب Unordered Lists در این لیست ها ترتیب آیتم ها اهمیت نداشته و تنها عناصر مرتبط به هم در یک لیست قرار می گیرند. به عنوان مثال به لیست زیر توجه کنید: انواع نوشیدنی های گرم قهوه چای نسکافه همان طور که مشاهده می کنید در این لیست ترتیب اهمیت نداشته و فرقی نمی کند […]