نحوه ی گروه بندی دکمه ها در بوت استرپ
بوت استرپ به ما امکان می دهد تا دکمه ها را بصورت خطی گروه بندی کنیم. به مثال زیر توجه کنید:
برای ایجاد دکمه های گروهی، می توانید از یک عنصر <div> به همراه کلاس btn-group استفاده کنید. به مثال زیر توجه کنید و سپس آن را اجرا کنید:
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
امتحان کنید»
نکته: به جای اینکه هر دکمه در یک گروه را اندازه دهی کنید، می توانید با استفاده از کلاس *-btn-group برای تمام دکمه ها، اندازه ای یکسان تهیه کنید:
مثال
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
امتحان کنید»
ایجاد دکمه های گروهی عمودی در بوت استرپ
بوت استرپ از دکمه های گروهی عمودی نیز پشتیبانی می کند، مثل زیر:
برای ایجاد دکمه های گروهی عمودی، می توانید از کلاس btn-group-vertical. استفاده کنید:
مثال
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
امتحان کنید »
دکمه های گروهی تو در تو و منوهای کشویی در بوت استرپ
شما می توانید با استفاده از دکمه های گروهی تو در تو، منوی کشویی ایجاد کنید. به مثال زیر توجه کنید:
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
امتحان کنید»
خدا اجرتون بده که انقدر کمک میکنید
من یه مشکلی برام پیش اومده. در قسمت منوی کشویی هرچی میزنم منو رو باز نمیکنه . حتی کدهای خود شمارو هم کپی کردم ولی بازم بازنکرد.
آیا در قسمت هد سایت باید کدی بزنم؟؟
آیا جی کوئری رو به درستی در بخش head اضافه کرده اید؟ و یا bootstrap.min.js رو در head اضافه کرده اید؟
حالا در آخر تگ head یک تگ style باز کنید و ببندید و سپس کدهای دکمه ی تولید شده را بین این تگ ها قرار دهید. خواهید دید که رنگ دکمه ها به درستی تغییر می کند. برای مشاهده ی یک مثال، به لینک زیر مراجعه کنید:
www.beyamooz.com/try_it_yourself/tryit.php?filename=change-bootstrap-button-color&stacked=h
توی مثال آخر در این قسمت:class="btn btn-primary dropdown-toggle" data-toggle="dropdown" ،،،متوجه این قسمت نشدم data-toggle="dropdown
ممنون میشم اگه راهنمایی کنید
برای اینکه منوی ما قابلیت باز شدن داشته باشد، باید کلاس dropdown-toggle را به دکمه ی مورد نظر بدهیم. و همچنین باید خصوصیت "data-toggle="dropdown را به این دکمه اضافه کنیم.
سپس باید به عنصر ul مورد نظر، کلاس dropdown-menu را بدهیم. اینا دیگه توضیح خاصی نداره و همواره باید این کار رو برای ایجاد منوی کشویی انجام بدیم.
آیا میشه رنگ و شکل دکمه ها و منوهارو به دلخواه انتخاب کرد؟
برای تغییر رنگ، فقط کافی است کلاس مورد نظر را برای آن تنظیم کنید. همچنین اگر می خواهید آیکن خاصی را روی دکمه نمایش دهید خیلی ساده می توانید از یک Span مثل زیر استفاده کنید:
<span class="glyphicon glyphicon-name"></span >
خصوصیت هایی هستند که از طریق data-
به آنها داده میشود و یکی از آن ها toggle هست همان طور که از اسم آن پیداست بین دو خصوصیت سوییج میشود یعنی وقتی شما dropdown را در بالا میبینید toggle در هر دو حالت باز و بسته سوییچ میشود
در مورد سوال دوم که در مورد role بود این در واقع یه قوانین استاندارد هستش که بهتر هست حتما گذاشته بشه
و گذاشتن کلمه role در کد ها باعث میشه کسانی که با هر صفحه نمایشی میخوان بخونن از صفحه بهتر بتونن به اون منو دسترسی داشته باشن و درواقع برای کسانی که صفحه خوان استفاده میکنن دسترسی به اون منو رو بهتر و خیلی راحت تر میکنه
با کلمه toggle در طراحی سایت و کلا زبان هایی مثل جاوااسکریپت خیلی میبینید مخصوصا در کتابخانه jquery
موفق باشید
توسط این خصوصیات میشه حالت و وضعیت منو رو مشخص کرد.
role هم همینطور! همونطور که از اسمش هم پیداست، role نقش اون خصوصیت رو به تگ میده.
در بعضی از کلاسها role ها اسم دیگه‌ای دارن.
توسط این خصوصیات میشه برخی از عملیات در درون کلاسهای فایل CSS رو هم کنترل کرد.