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

بررسی اجمالی 

پلاگین ها قابل جابجایی هستند، پوسته های متنی برای نمایش لیست پیوندها و موارد دیگر. آنها با افزونه جاوا اسکریپت بوت استرپ تعاملی ساخته شده اند. آنها با کلیک کردن، نه توسط شناور شدن تغییر می کنند؛ این تصمیم طراحی ذهنی است.

Dropdowns در کتابخانه شخص ثالث Popper.js ساخته شده است که موقعیت مکانی پویا و تشخیص دیدگاه را فراهم می کند. مطمئن شوید که popper.min.js. قبل از جاوا اسکریپت Bootstrap یا استفاده از bootstrap.bundle.min.js / bootstrap.bundle.js که شامل Popper.js است. Popper.js برای موقعیت کشویی در navbars استفاده نمی شود هرچند موقعیت مکانی پویا لازم نیست.

اگر جاوا اسکریپت خود را از منبع ایجاد می کنید، به util.js نیاز دارد.

 

دسترس پذیری

ردپاهای بوت استرپ از سوی دیگر، طراحی شده اند به طور کلی و قابل اجرا به شرایط مختلف و ساختار نشانه گذاری. به عنوان مثال، امکان ایجاد دامنه هایی وجود دارد که حاوی ورودی های اضافی و کنترل های فرم مانند زمینه های جستجو یا فرم های ورود به سیستم هستند. به همین دلیل، Bootstrap انتظار نمی رود (و نه به طور خودکار آن را اضافه کند) هر یک از نقش ها و aria-attributes مورد نیاز برای منوهای واقعی ARIA. نویسندگان باید این خصوصیات خاص خود را به خود اختصاص دهند.

با این حال، بوت استرپ پشتیبانی داخلی را برای اکثر تعاملات منوی صفحه کلید استاندارد، از قبیل توانایی حرکت از طریق عناصر element.depd item، با استفاده از کلید های مکان نما و اضافه کردن کلید با استفاده از کلید ESC، اضافه می کند.

 

مثال ها

بسته بندی کشویی (دکمه یا پیوندتان) و منوی کشویی را در dropdown قرار دهید، یا عنصر دیگری که موقعیت را اعلام می کند: relative؛ می تواند از طریق <a> یا <دکمه> عناصر خاموشی باعث شود که نیازهای بالقوه شما بیشتر باشد.

 

کرکره های تک دکمه

هر یک از بیت تنها را می توان با تغییر برخی از تغییرات به یک زبانه کشویی تبدیل کرد. در اینجا نحوه قرار دادن آنها را با عناصر <button> قرار می دهیم:

 

 <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>

 

و با <a> عناصر:

 

 <div class="dropdown show"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>

 

بهترین قسمت این است که شما می توانید با هر نوع دکمه نیز انجام دهید:

 

 <!-- Example single danger button --> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

 

بازشو های تقسیم کردن دکمه 

به طور مشابه، کشویی ها را با تقسیم کردن دکمه های تقسیم شده با تقریبا همان نشانه گذاری به عنوان دکمه های تک دکمه ایجاد کنید، اما با افزودن کشویی-کشیدن-تقسیم کردن برای فاصله مناسب در اطراف کادر کشویی.

ما از این کلاس اضافی برای کاهش عرض بالشتک افقی در هر طرف صندلی با 25٪ استفاده می کنیم و حاشیه سمت چپ را که برای دکمه های معمولی دکمه اضافه شده است حذف می کنیم. این تغییرات اضافی باعث می شود که محتوا در دکمه تقسیم بندی محور قرار گیرد و محدوده ضربه ای مناسب تر در کنار دکمه اصلی قرار گیرد.

 

 <!-- Example split danger button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

 

اندازه گیری 

محو کردن دکمه ها با دکمه های هر اندازه، از جمله دکمه های کشویی پیش فرض و تقسیم، کار می کنند.

 

 <!-- Large button groups (default and split) --> <div class="btn-group"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button </button> <div class="dropdown-menu"> ... </div> </div> <div class="btn-group"> <button class="btn btn-secondary btn-lg" type="button"> Large split button </button> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> ... </div> </div> <!-- Small button groups (default and split) --> <div class="btn-group"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button </button> <div class="dropdown-menu"> ... </div> </div> <div class="btn-group"> <button class="btn btn-secondary btn-sm" type="button"> Small split button </button> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> ... </div> </div>

 

تنوع کشیدن

منوهای کشویی پایین تر از عناصر را با افزودن dropup. به عنصر parent، Trigger.

 

 <!-- Default dropup button --> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div> <!-- Split dropup button --> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary"> Split dropup </button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div>

 

تغییرات کشیدن راست 

منوهای کشویی را در سمت راست عناصر قرار دهید با اضافه کردن dropright. به عنصر parent.

 

 <!-- Default dropright button --> <div class="btn-group dropright"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropright </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div> <!-- Split dropright button --> <div class="btn-group dropright"> <button type="button" class="btn btn-secondary"> Split dropright </button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropright</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div>

 

تغییرات کشیدن چپ

منوهای کشویی را در سمت چپ عناصر قرار دهید با افزودن dropleft. به عنصر parent.

 <!-- Default dropleft button --> <div class="btn-group dropleft"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropleft </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div> <!-- Split dropleft button --> <div class="btn-group"> <div class="btn-group dropleft" role="group"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropleft</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div> <button type="button" class="btn btn-secondary"> Split dropleft </button> </div>

 

ایتم های منو

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

 

 <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div>

 

هماهنگی منو

به طور پیش فرض، یک منوی کشویی به طور خودکار 100٪ از بالای صفحه و در سمت چپ والد خود قرار دارد. منوی کشویی را به راست راست بر روی منوی کشویی بروید.

 

 <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Right-aligned menu </button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div>

 

هدر منو

یک سرصفحه را برای برچسبگذاری قسمتهای اعمال در هر منوی کشویی اضافه کنید.

 

 <div class="dropdown-menu"> <h6 class="dropdown-header">Dropdown header</h6> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div>

 

تقسیم منو

جدا کردن گروهی از آیتم های مربوط به منو با یک تقسیم کننده.

 

 <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div>

 

اشکال منو

یک فرم را در یک منوی کشویی قرار دهید یا آن را به یک منوی کرکره ای بچسبانید و از امکانات حاشیه یا براق استفاده کنید تا فضای منفی مورد نیاز را به آن بدهید. 

 <div class="dropdown-menu"> <form class="px-4 py-3"> <div class="form-group"> <label for="exampleDropdownFormEmail1">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com"> </div> <div class="form-group"> <label for="exampleDropdownFormPassword1">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="dropdownCheck"> <label class="form-check-label" for="dropdownCheck"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">New around here? Sign up</a> <a class="dropdown-item" href="#">Forgot password?</a> </div>

 

 <form class="dropdown-menu p-4"> <div class="form-group"> <label for="exampleDropdownFormEmail2">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com"> </div> <div class="form-group"> <label for="exampleDropdownFormPassword2">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="dropdownCheck2"> <label class="form-check-label" for="dropdownCheck2"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form>

 

ایتم های منو فعال 

آیتم های فعال در منوی کشویی را فعال کنید.

 

 <div class="dropdown-menu"> <a class="dropdown-item" href="#">Regular link</a> <a class="dropdown-item active" href="#">Active link</a> <a class="dropdown-item" href="#">Another link</a> </div>

 

ایتم های منو غیر فعال 

افزودن disabled. به موارد موجود در منوی کشویی به منظور غیرفعال کردن آنها.

 

 <div class="dropdown-menu"> <a class="dropdown-item" href="#">Regular link</a> <a class="dropdown-item disabled" href="#">Disabled link</a> <a class="dropdown-item" href="#">Another link</a> </div>

 

استفاده 

از طریق ویژگی های داده یا جاوا اسکریپت، پلاگین کشویی محتوای محتوی پنهان (منوهای کشویی) را با تغییر دادن کلاس show نمایش در مورد آیتم های والدین تغییر می دهد. خصوصیت data-toggle = "dropdown" برای بستن منوهای کشویی در سطح برنامه کاربرد دارد، بنابراین بهتر است همیشه از آن استفاده کنید.

 

از طریق ویژگی های داده 

اضافه کردن "data-toggle = "dropdown به یک لینک یا دکمه برای تغییر یک کشویی.

 <div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger </button> <div class="dropdown-menu" aria-labelledby="dLabel"> ... </div> </div>

 

از طریق جاوا اسکریپت

از طریق جاوا اسکریپت از منوی کشویی استفاده کنید:

 

 $('.dropdown-toggle').dropdown()

 

گزینه ها

گزینه ها می توانند از طریق ویژگی های داده یا جاوا اسکریپت منتقل شوند. برای ویژگی های داده، نام گزینه را به داده اضافه کنید، همانطور که در data-offset = "" است.

 

Name Type Default Description
offset number | string | function 0 Offset of the dropdown relative to its target. For more information refer to Popper.js's offset docs.
flip boolean true Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
boundary string | element 'scrollParent' Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport''window''scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

توجه داشته باشید هنگامی که مرز به هر مقدار دیگری غیر از 'scrollParent' تنظیم می شود، موقعیت سبک: static به container dropdown اعمال می شود.

 

متدها

 

Method Description
$().dropdown('toggle') Toggles the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('update') Updates the position of an element’s dropdown.
$().dropdown('dispose') Destroys an element’s dropdown.

 

مناسبت ها 

همه رویدادهای منقضی در عنصر پدر و مادر کشوی منو اخراج می شوند و دارایی مرتبط مربوطه هستند که مقدار آن عنصر لنگر زدن است.

 

Event Description
show.bs.dropdown This event fires immediately when the show instance method is called.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

 

 $('#myDropdown').on('show.bs.dropdown', function () { // do something… })