در خدمت شما هستیم با آموزش Bootstrap جلسه یازدهم (Button)
آموزش Bootstrap جلسه یازدهم (Button) از سری آموزش های تک قسمتی است
سلام برنامه در این جلسه درباره نحوه ساخت دکمه در Bootstrap صحبت می کند
تقریبا همه سایت ها در خود تعداد زیادی دکمه دارند که این دکمه ها در ظاهر سایت بسیار تاثیر گذارند
مزیت دکمه در بوت استرپ این است که شما تنها با معرفی یک کلاس آن ها را می سازید
این دکمه ظاهر ها و استایل های مختلفی دارند که برای هر کاری مناسب هستند.
کلاس buttons
همانطور که گفته شد بوت استرپ برای دکمه ها هم فکری کرده است و کار شما را راحت کرده است.
برای استفاه از دکمه های مختلف با رنگ های متنوع کافیست شما کلاس آن را فراخوانی کنید.
این کلاس ها مشابه کلاس های دیگر که معرفی کردیم از ۴ رنگ برای ۴ کاربر مختلف پشتیبانی میکنند.
کلاس ها را به برای شما معرفی میکنیم:
- btn : این کلاس هر کجا استفاده شود دکمه ای ایجاد میشود
- btn-default : این کلاس دکمه ای بدون رنگ ایجاد میکند.
- btn-primary : این کلاس دکمه ای با رنگ آبی میسازد
- btn-success : دکمه ای به رنگ سبز ایجاد میکند.
- btn-info : کلاس فوق دکمه ای به رنگ آبی کمرنگ میسازد.
- btn-warning : این کلاس دکمه ای به رنگ نارنجی یا زرد میسازد.
- btn-danger : دکمه ای به رنگ قرمز میسازد.
- btn-link : عملا به آن دکمه نمیتوان گفت اما برای لینک ها استفاده میشود.
اگر بخواهیم از موارد بالا مثالی بزنیم مثال زیر مورد مناسبی است:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Button Styles</h2> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </div> </body> </html>
تمام کلاس های معرفی شده در مثال الا موجود هستند.
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه دهم (Alert Box)
آموزش Bootstrap جلسه دوازدهم(Group Button)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap 4 جلسه نهم (button)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزشتون عالیه مخصوصا اینکه ویدیو آموزش هم موجوده ممنون از وقتی که میذارید
من آموزش بوت استرپ رو پولی خریدم با وجود پولی بودن نصف این چیزی که شما رایگان آموزش میدید هم نگفته ممنون ازتون همینطوری ادامه بدید