آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

مثال ها

بوت استرپ شامل چندین سبک دکمه های از پیش تعیین شده است که هر کدام به معنای معنایی خاص خود می پردازند.

 <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>

 

تگ های دکمه 

کلاسهای tw. برای طراحی با عنصر <button> طراحی شده اند. با این حال، شما همچنین می توانید از این کلاس ها در عناصر <a> یا <input> استفاده کنید.

هنگام استفاده از کلاسهای دکمه در عناصر <a> که برای فعال کردن قابلیت صفحه در صفحه استفاده می شود، به جای پیوند دادن به صفحات یا بخش های جدید در صفحه فعلی، این لینک ها باید یک نقش = "دکمه" برای دادن هدف مناسب به کمک فن آوری هایی مانند خوانندگان صفحه نمایش است.

 

 <a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset">

 

دکمه های بیرونی 

  تعویض کلاس های اصلاح کننده پیش فرض با .btn-outline-* برای حذف همه ی تصاویر پس زمینه و رنگ در هر دقیقه استفاده می شود.
 <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>

 

سایز ها

دکمه های بزرگتر یا کوچکتر اضافه کردن btn-lg. یا btn-sm. برای اندازه های اضافی است.

 <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-secondary btn-lg">Large button</button>

 

 <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-secondary btn-sm">Small button</button>

 

با اضافه کردن btn-block.، دکمه های بلوک سطح-چیز هایی که طول کامل یک پدر و مادر را می پوشند ایجاد کنید.

 

 <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

 

حالت فعال 

دکمه ها وقتی فعال می شوند فشرده می شوند. لازم نیست کلاس را به <button> s اضافه کنید چون از یک کلاس pseudo استفاده می کند. با این حال، شما هنوز می توانید همان ظاهر فعال را با فعال کنید.

 <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a> <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

 

حالت غیر فعال

با اضافه کردن خصوصیت بولی غیر فعال به هر عنصر <button>، دکمه ها غیرفعال می شوند.

 <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button> <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

 

دکمه های غیرفعال با استفاده از عنصر <a> کمی متفاوت عمل می کنند:

1-<a> از خصیصه غیرفعال پشتیبانی نمی کند، بنابراین شما باید کلاس disabled. را اضافه کنید تا بصری به نظر بیاید.

2-برخی از سبک ها گنجانده شده است برای غیر فعال کردن تمام رویدادهای اشاره گر در دکمه های لنگر. در مرورگرهایی که از این ویژگی پشتیبانی می کنند، مکان نما غیرفعال را نمی بینید.

3-دکمه های غیر فعال باید شامل "attribute aria-disabled = "true برای نشان دادن وضعیت عنصر به تکنولوژی های پشتیبانی باشد.

 

 <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a> <a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

 

پلاگین دکمه 

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

 

وضعیت را تغییر دهید

اضافه کردن "data-toggle = "button برای تغییر حالت فعال دکمه. اگر دکمه قبل را فعال کنید، باید کلاس دستی فعال و "aria-pressed = "true را به <button> اضافه کنید.

 <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button>

 

جعبه چک و رادیو

سبک Buttons بوت استرپ را می توان به عناصر دیگر مانند label> S> اعمال کرد تا سبکی جعبه یا سبک رادیویی را فعال کند. اضافه کردن "data-toggle = "buttons به btn-group حاوی دکمه های اصلاح شده برای فعال کردن قابلیت تغییر آنها از طریق جاوا اسکریپت و افزودن btn-group-toggle. به سبک input> s> در دکمه هایتان است. توجه داشته باشید که می توانید دکمه های تک ورودی یا گروه های آنها را ایجاد کنید.

حالت چک شده برای این دکمه ها تنها از طریق رویداد کلیک بر روی دکمه به روز می شود. اگر از روش دیگری برای به روزرسانی ورودی استفاده کنید، به عنوان مثال، با <input type = "reset"> یا با استفاده از خصوصیت چک شده ورودی دستی، شما باید به صورت دستی در <label> فعال کنید.

 

 <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="checkbox" checked autocomplete="off"> Checked </label> </div>

 

 <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Active </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio </label> </div>

 

متد ها

 

Method Description
$().button('toggle') Toggles push state. Gives the button the appearance that it has been activated.
$().button('dispose') Destroys an element’s button.