saeed410
Member
در قسمت قبل با روش های مختلف استایل دهی عکس ها در بوت استرپ آشنا شدیم. یکی از اشیاء مهم که در هنگام استفاده از [h=1]بوت استرپ و طراحی واکنش گرا[/h] باید رعایت شود ، دکمه ها و سازگاری بین آنها در صفحات مختلف است. در این قسمت با روشهای مختلف استایل دهی دکمه ها در بوت استرپ به منظور [h=2]طراحی سایت[/h] سازگار آشنا خواهیم شد. هنگام اضافه کردن دکمه ها نکته ایی که باید رعایت کنید این است که در کلاس btn را در تمام انواع دکمه ها باید استفاده کنید. [h=2]استایل دکمه ها در بوت استرپ[/h] بوت استرپ 7 نوع استایل مختلف برای دکمه ها دارد که عبارتند از :
[h=2]اندازه های مختلف دکمه ها در بوت استرپ :[/h] بوت استرپ سه نوع کلاس CSS برای تغییر اندازه دکمه ها در نظر گرفته است :
[h=2]دکمه های سطح بلوک در بوت استرپ :[/h] برای ایجاد یک دکمه به صورتی که کل یک بلوک را بپوشاند از کلاس btn-block استفاده میکنیم :
[h=2]دکمه های فعال (active) و غیر فعال(disable) در بوت استرپ :[/h] بوت استرپ برای دکمه های فعال از کلاس active استفاده میکند. و برای غیر فعال کردن کلیک روی یک دکمه از کلاس disabled استفاده میکند. مثال :
در قسمت بعد با کلاسهای استایل دهی به فرم ها آشنا خواهیم شد.
در گروه: بوت استرپ و CSS
منبع : طراحی سایت
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
مثال :
<div class="container"><br/>
<button type="button" class="btn btn-default">دکمه پیش فرض</button>
<button type="button" class="btn btn-primary">دکمه اصلی</button>
<button type="button" class="btn btn-success">دکمه موفق</button>
<button type="button" class="btn btn-info">دکمه اطلاعات</button>
<button type="button" class="btn btn-warning">دکمه اخطار</button>
<button type="button" class="btn btn-danger">دکمه خطر</button>
<button type="button" class="btn btn-link">دکمه به صورت لینک</button>
</div>
<button type="button" class="btn btn-default">دکمه پیش فرض</button>
<button type="button" class="btn btn-primary">دکمه اصلی</button>
<button type="button" class="btn btn-success">دکمه موفق</button>
<button type="button" class="btn btn-info">دکمه اطلاعات</button>
<button type="button" class="btn btn-warning">دکمه اخطار</button>
<button type="button" class="btn btn-danger">دکمه خطر</button>
<button type="button" class="btn btn-link">دکمه به صورت لینک</button>
</div>
تصویر این کد به صورت زیر است :
.btn-lg
.btn-sm
.btn-xs
مثال استفاده از کلاسها : .btn-sm
.btn-xs
<div class="container"><br/>
<button type="button" class="btn btn-primary btn-lg">دکمه اصلی بزرگ</button>
<button type="button" class="btn btn-primary btn-sm">دکمه اصلی کوچک</button>
<button type="button" class="btn btn-primary btn-xs">دکمه اصلی خیلی کوچک</button>
<br /><br />
<button type="button" class="btn btn-danger btn-lg">دکمه خطر بزرگ</button>
<button type="button" class="btn btn-danger btn-sm">دکمه خطر کوچک</button>
<button type="button" class="btn btn-danger btn-xs">دکمه خطر خیلی کوچک</button>
</div>
تصویر نمونه این کد به صورت زیر است : <button type="button" class="btn btn-primary btn-lg">دکمه اصلی بزرگ</button>
<button type="button" class="btn btn-primary btn-sm">دکمه اصلی کوچک</button>
<button type="button" class="btn btn-primary btn-xs">دکمه اصلی خیلی کوچک</button>
<br /><br />
<button type="button" class="btn btn-danger btn-lg">دکمه خطر بزرگ</button>
<button type="button" class="btn btn-danger btn-sm">دکمه خطر کوچک</button>
<button type="button" class="btn btn-danger btn-xs">دکمه خطر خیلی کوچک</button>
</div>
[h=2]دکمه های سطح بلوک در بوت استرپ :[/h] برای ایجاد یک دکمه به صورتی که کل یک بلوک را بپوشاند از کلاس btn-block استفاده میکنیم :
<div class="container"><br/>
<br />
<div class="row">
<div class="col-sm-7" >
<button type="button" class="btn btn-primary btn-block">دکمه اصلی با اندازه 7</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-danger btn-block">دکمه خطر با اندازه 5</button>
</div>
</div>
تصویر دموی این کد : <br />
<div class="row">
<div class="col-sm-7" >
<button type="button" class="btn btn-primary btn-block">دکمه اصلی با اندازه 7</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-danger btn-block">دکمه خطر با اندازه 5</button>
</div>
</div>
[h=2]دکمه های فعال (active) و غیر فعال(disable) در بوت استرپ :[/h] بوت استرپ برای دکمه های فعال از کلاس active استفاده میکند. و برای غیر فعال کردن کلیک روی یک دکمه از کلاس disabled استفاده میکند. مثال :
<body style="font-size:16px;font-weight:bold;background-color:silver">
<div class="container"><br/>
<button type="button" class="btn btn-primary active">دکمه اصلی فعال</button>
<button type="button" class="btn btn-primary disabled">دکمه اصلی غیر فعال</button>
<br /><br/>
<button type="button" class="btn btn-danger active">دکمه خطر فعال</button>
<button type="button" class="btn btn-danger disabled">دکمه خطر غیر فعال</button>
</div>
تصویر دموی این کد : <div class="container"><br/>
<button type="button" class="btn btn-primary active">دکمه اصلی فعال</button>
<button type="button" class="btn btn-primary disabled">دکمه اصلی غیر فعال</button>
<br /><br/>
<button type="button" class="btn btn-danger active">دکمه خطر فعال</button>
<button type="button" class="btn btn-danger disabled">دکمه خطر غیر فعال</button>
</div>
در قسمت بعد با کلاسهای استایل دهی به فرم ها آشنا خواهیم شد.
در گروه: بوت استرپ و CSS
منبع : طراحی سایت
