آموزش Bootstrap قسمت ۴: دکمهها
آنچه در این مقاله میخوانید
Toggleسلام به کاربران وبسایت تاتوره با چهارمین قسمت از آموزش Bootstrap در خدمت شما هستیم.
حالا که در مورد رنگ ها صحبت کردیم، می تونیم بریم سراغ دکمه ها.
یک دکمه میتونه خیلی کاربرد داشته باشه، در همه وبسایت ها می تونید ببینید که از دکمه ها بسیار استفاده شده پس این قسمت میتونه خیلی مفید باشه. پس مثل قسمت قبل وارد سایت Bootstrap میشیم، در Documentation قسمت Components رو پیدا کرده سپس کلیک کنید و بعد از اون در زیرش Buttons رو انتخاب کنید.
ورود به صفحه Buttons در صفحه رسمی بوت استرپ
در ابتدای صفحه با چیزی مانند تصویر بالا مواجه میشید. همونطور که مشاهده میکنید اسم کلاس هایی که به هر دکمه داده شده با یکی از رنگ هایی که در قسمت قبل گفته شد، تموم شده. همونطور که از تصویر پیداست، وقتی ما به هر کدوم از این دکمه ها کلاسی با رنگ دلخواهمون رو میدیم، رنگ دکمه به همون شکل تغییر پیدا میکنه.
از قبل
در قسمت قبل گفته شد که برای رنگ دادن به نوشته از کلاسی مثل text-warning استفاده میکنیم.
در اینجا
تفاوت اینه که وقتی میخوایم رنگی به دکمه بدیم از یکی از کلاس های زیر استفاده میکنیم.
- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
کلاس آخر رو کمی با فاصله نوشتم چون در رنگ ها کلاس مشابهی وجود نداشت!
طرز استفاده
به این صورته که شما ابتدا یک تگ button ایجاد میکنید و بعد از اون بهش کلاس btn رو میدید. پس یادتون باشه حتما ابتدا کلاس btn رو بصورت جدا بنویسید وگرنه دکمه شما اصلا شکل نمیگیره! قدم بعدی اینه که بهش یکی از کلاس های بالا رو میدید تا رنگ دلخواه رو بگیره.
دقت کنید
که میتونید از تگ a یا همون لینک و یا input هم برای اینکار استفاده کنید.
اما
وقتی میخواید اون دکمه در همون صفحه برای شما کاری انجام بده بدون اینکه شما به جای دیگه ای منتقل بشید باید از تگ button استفاده کنید. به هر حال نکته ای بود که باید بهش اشاره میکردم.
اینم کمی HTML !
بیاید بیشتر در مورد خود این کلاس ها صحبت کنیم. گفته شد که شما حتما باید ابتدا کلاس btn رو به تگتون بدید و بعد از اون یکی از کلاس های گفته شده برای رنگ دهی به دکممون استفاده کنیم مثل btn-primary
اگر فقط از کلاس btn استفاده کنیم چه اتفاقی میفته؟ بیاید با هم امتحان کنیم.
از فایل starter قسمت دوم استفاده کنید و فایل جدیدی به نام buttons.html و یا .htmlدکمه ایجاد کنید. در این فایل تگ button ای بنویسید و کلاس btn رو بهش اختصاص بدید. هرچی هم دوست داشتید داخل تگ بنویسید مانند کد زیر
<button class="btn">کلیک کنید!</button>
وقتی فایل رو در مرورگر باز میکنیم با چیزی شبیه به تصویر زیر مواجه میشیم. اولش ممکنه فکر کنید هیچ اتفاقی نیفتاده ولی وقتی روی دکمه کلیک میکنید متوجه میشید که واقعا یه دکمه است اما اصلا زیبا و مشخص نیست!
برای مشاهده بهتر یک گیف درست کردم تا متوجه بشید چی میگم.
بنابراین اولین کاری که میکنیم اینه که به دکمه خودمون کلاس btn رو میدیم تا دکمه با شکل بگیره. در مرحله بعد برای زیبا کردن اون باید از کلاس هایی که به رنگ اشاره میکنن استفاده کنیم. پس نباید از هیچ کدوم از این کلاس ها به صورت تنها استفاده کنیم. هرچند میشه از کلاس های رنگ به تنهایی استفاده کرد ولی ظاهر خوبی دریافت نخواهیم کرد. مثل تصویر زیر رو بهش اختصاص دادم.
<button class="btn-info">کلیک کنید!</button>
شاهد منظره خوبی نیستیم. یه دکمه که رنگش زیباست اما خودش نه! اگر این کد رو در سیستم عامل های دیگه یا حتی مرورگر های دیگه اجرا کنید نتیجه متفاوت خواهد بود. چون وقتی به دکمه ای استایل نمیدید خود مرورگر از استایل های پیش فرض خودش استفاده میکنه.
جادوی اصلی
رسیدیم به بخش اصلی کار. حالا وقتشه که هر دو کلاس رو به دکمه خودتون بدید. مثل کد زیر:
<button class="btn btn-info">کلیک کنید!</button>
و بعد از اون نتیجه رو در مرورگرتون مشاهده کنید.
خیلی عالیه حالا ما یه دکمه بسیار زیبا داریم که قرار نیست تو هر دستگاهی هر جور دلش خواست نشون داده بشه!
میبینید که حتی وقتی روش کلیک میکنیم طرح زیبایی ایجاد میشه و حتی سایه کوچکی درون دکمه به وجود میاد
در اینجا میخوام از یک کلاس دیگه هم استفاده کنید. البته نه برای دکمه ها، بلکه برای المنتی که دکمه ها درون اونا هستن. ازتون میخوام که تگ div ایجاد کنید و کلاس container رو بهش اختصاص بدید و این دکمه رو درون اون تگ قرار بدید. مثل کد زیر:
<div class="container"> <button class="btn btn-info">کلیک کنید!</button> </div>
با این کار شما تمامی تگ های خودتون رو برای هر صفحه نمایشی قابل مشاهده میکنید. به این صورت که وقتی صفحه نمایش بسیار بزرگ میشه، محتوای سایت شما از یک حد خاصی بیرون نمیزنه. مشاهده کنید که بعد از اضافه کردن این کلاس به div قبل از دکمه، دکمه ما به سمت راست منتقل شد و من هرچقدر هم از زوم صفحه کم و یا به اون اضافه کنم، دکمه من در همون جا باقی میمونه و مثل قبل به گوشه صفحه منتقل نمیشه
دیگر دکمه ها
اگر در صفحه Buttons در سایت Bootstrap کمی پایین تر بیاید متوجه کلاس های دیگه ای هم میشید.
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-danger
- btn-outline-warning
- btn-outline-info
- btn-outline-light
- btn-outline-dark
بیاید از این کلاس ها بجای کلاس های قبلی استفاده کنیم.
در سمت راست دکمه جدید رو مشاهده میکنید. این دکمه بجای اینکه تماما به رنگ مورد نظرمون باشه، فقط border اون به رنگ دلخواهمون در میاد. و وقتی روی اون hover می کنیم، رنگ داخلش به رنگ اصلی تغییر پیدا میکنه.
ازتون میخوام از تمامی این کلاس ها در کد خودتون استفاده کنید و چیزی مثل کد زیر رو ایجاد کنید. البته بهتره به دکمه ای که کلاس btn-outline-light رو داره text-dark رو هم اضافه کنید تا بتونید نوشته درون اون رو مشاهده کیند.
<div class="container"> <button type="button" class="btn btn-primary">کلیک کنید!</button> <button type="button" class="btn btn-secondary">کلیک کنید!</button> <button type="button" class="btn btn-success">کلیک کنید!</button> <button type="button" class="btn btn-danger">کلیک کنید!</button> <button type="button" class="btn btn-warning">کلیک کنید!</button> <button type="button" class="btn btn-info">کلیک کنید!</button> <button type="button" class="btn btn-light">کلیک کنید!</button> <button type="button" class="btn btn-dark">کلیک کنید!</button> <button type="button" class="btn btn-link">کلیک کنید!</button> <button type="button" class="btn btn-outline-primary">کلیک کنید!</button> <button type="button" class="btn btn-outline-secondary">کلیک کنید!</button> <button type="button" class="btn btn-outline-success">کلیک کنید!</button> <button type="button" class="btn btn-outline-danger">کلیک کنید!</button> <button type="button" class="btn btn-outline-warning">کلیک کنید!</button> <button type="button" class="btn btn-outline-info">کلیک کنید!</button> <button type="button" class="btn btn-outline-light text-dark">کلیک کنید!</button> <button type="button" class="btn btn-outline-dark">کلیک کنید!</button> </div>
نتیجه رو در مرورگر مشاهده کنید.
بسته به سایز نماشگر نتیجه ممکنه متفاوت باشه. ازتون میخوام مرورگر رو از حالت تمام صفحه خارج کنید و عرض اون رو کم کنید تا ببینید کلاس container چقدر کاربردی خواهد بود. با تغییر سایز به اندازه تبلت و یا گوشی موبایل میتونید این مورد رو به خوبی حس کنید.
میبینید که همه چی به خوبی تغییر سایز داده و در قالب کوچک موبایل به خوبی جا شده. برای نظم بیشتر به بالای هر دسته بندی تگ h1 اضافه کردم.
<div class="container"> <h1>دکمه های عادی</h1> <button type="button" class="btn btn-primary">کلیک کنید!</button> <button type="button" class="btn btn-secondary">کلیک کنید!</button> <button type="button" class="btn btn-success">کلیک کنید!</button> <button type="button" class="btn btn-danger">کلیک کنید!</button> <button type="button" class="btn btn-warning">کلیک کنید!</button> <button type="button" class="btn btn-info">کلیک کنید!</button> <button type="button" class="btn btn-light">کلیک کنید!</button> <button type="button" class="btn btn-dark">کلیک کنید!</button> <h1>لینک</h1> <button type="button" class="btn btn-link">کلیک کنید!</button> <h1>دکمه های outline</h1> <button type="button" class="btn btn-outline-primary">کلیک کنید!</button> <button type="button" class="btn btn-outline-secondary">کلیک کنید!</button> <button type="button" class="btn btn-outline-success">کلیک کنید!</button> <button type="button" class="btn btn-outline-danger">کلیک کنید!</button> <button type="button" class="btn btn-outline-warning">کلیک کنید!</button> <button type="button" class="btn btn-outline-info">کلیک کنید!</button> <button type="button" class="btn btn-outline-light text-dark">کلیک کنید!</button> <button type="button" class="btn btn-outline-dark">کلیک کنید!</button> </div>
اندازه
حالا به کلاس های دیگه دکمه ها میرسیم. جایی که میتونید اندازه دکمتون رو تغییر بدید.
- btn-lg
- btn-sm
- btn-block
در اینجا lg مخفف large به معنی بزرگ و sm مخفف small به معنی کوچک میباشد. این مخفف هارو به یاد داشته باشید چون در آینده در کلاس های دیگه خیلی باهاشون کار داریم و البته این ها همش نبودند!
خب همونطور که از نام دو کلاس اول پیداست باعث میشن دکمه ما بزرگ یا کوچیک بشن. اما کلاس اخر باعث میشه دکمه تماما عرض صفحه رو بگیره. شما نمیتونید از دو کلاس اول در کنار هم استفاده کنید اما میتونید اونها رو در کنار کلاس سوم به کار ببرید تا مثلا دکمه ای داشته باشیم کوچیک اما با عرض تمام صفحه.
بیاید برخی از این ترکیب ها رو با هم امتحان کنیم. من کلاس های هر کدوم رو بین تگ هاشون مینویسم تا بهتر متوجه بشید.
<div class="container"> <h1>دکمه های عادی</h1> <button type="button" class="btn btn-primary">کلیک کنید!</button> <button type="button" class="btn btn-secondary">کلیک کنید!</button> <button type="button" class="btn btn-success">کلیک کنید!</button> <button type="button" class="btn btn-danger">کلیک کنید!</button> <button type="button" class="btn btn-warning">کلیک کنید!</button> <button type="button" class="btn btn-info">کلیک کنید!</button> <button type="button" class="btn btn-light">کلیک کنید!</button> <button type="button" class="btn btn-dark">کلیک کنید!</button> <h1>لینک</h1> <button type="button" class="btn btn-link">کلیک کنید!</button> <h1>دکمه های outline</h1> <button type="button" class="btn btn-outline-primary">کلیک کنید!</button> <button type="button" class="btn btn-outline-secondary">کلیک کنید!</button> <button type="button" class="btn btn-outline-success">کلیک کنید!</button> <button type="button" class="btn btn-outline-danger">کلیک کنید!</button> <button type="button" class="btn btn-outline-warning">کلیک کنید!</button> <button type="button" class="btn btn-outline-info">کلیک کنید!</button> <button type="button" class="btn btn-outline-light text-dark">کلیک کنید!</button> <button type="button" class="btn btn-outline-dark">کلیک کنید!</button> <h1>اندازه ها</h1> <button type="button" class="btn btn-secondary btn-lg">btn-lg</button> <button type="button" class="btn btn-secondary btn-sm">btn-sm</button> <button type="button" class="btn btn-primary btn-block">btn-block</button> <button type="button" class="btn btn-primary btn-block btn-sm">btn-block btn-sm</button> <button type="button" class="btn btn-primary btn-block btn-lg">btn-block btn-lg</button> </div>
کلاس دیگه ای که وجود داره active هست. شما میتونید این کلاس رو به دکمه خودتون اضافه کنید و باعث بشید دکمه به نظر hover شده بیاد. با مثال بهتر متوجه میشید
<button type="button" class="btn btn-warning active">فعال</button> <button type="button" class="btn btn-warning">عادی</button>
به دکمه سمت چپ کلاس active اضافه شده و این کلاس کاری میکنه که دکمه hover شده به نظر بیاد. یعنی اگر شما با اشارهگر خودتون روی دکمه سمت چپ برید، دکمتون دقیقا مثل سمت راستی میشه.
نکته ای رو باید دقت کنید اینکه ما گفته بودیم وقتی به دکمهای یکی از کلاس های outline رو میدیم، هنگام hover دکمه دقیقا به شکل غیر outline در میاد. بنایراین اگر به دکمهای یکی از کلاس های outline رو دادید و سپس کلاس active رو هم اضافه کردید، دکمتون قراره دقیقا مثل دکمه ای به نظر بیاد که کلاس ساده غیر outline مثل (btn-warning) بدون کلاس active به نظر برسه. بنابراین بهتره یا اصلا بگم نباید از active در کنار کلاس های outline استفاده کنید.
در کل active کلاسیه که برای خیلی المنت های دیگه بکار میره که جلوتر به اونها میرسیم. پس بهتره فعلا صبرکنید تا بهتر متوجه بشید.
همونطور که میشه فهمید، شما میتونید با ترکیب این کلاس ها دکمه مورد نطرتون رو بسازید. مثلا دکمه ای که تمام عرض و بزرگ باشه، رنگش آبی کم رنگ و فقط border اون رنگ داشته باشه. شما باید کد زیر رو نوشته باشید.
برای تمرین دکمه های زیر رو برای خودتون بسازید. جواب این سوال ها در فایل پایان آموزش قرار داره.
دکمه های زیر را بسازید.
- رنگ نارنجی (warning)، اندازه بزرگ، رنگ متن آبی کمرنگ (info)
- رنگ خاکستری (secondary) فقط برای border، اندازه تمام عرض و کوچک، رنگ متن سیاه
- رنگ قرمز (danger)، اندازه عادی، رنگ متن سفید ، دکمه hover شده به نظر برسد.
دانلود فایل های این آموزش و پاسخ تمرین:
دانلود فایلهای مربوط به این قسمت
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.