دکمه های گروهی در بوت استرپ
نحوه ی گروه بندی دکمه ها در بوت استرپ
بوت استرپ به ما امکان می دهد تا دکمه ها را بصورت خطی گروه بندی کنیم. به مثال زیر توجه کنید:
برای ایجاد دکمه های گروهی، می توانید از یک عنصر <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>
امتحان کنید»
- نوشته شده توسط احسان عباسی
- بازدید: 15045
دیدگاه‌ها
باسلام ، خسته نباشید
خدا اجرتون بده که انقدر کمک میکنید
سلام و خسته نباشید عزیزان.
من یه مشکلی برام پیش اومده. در قسمت منوی کشویی هرچی میزنم منو رو باز نمیکنه . حتی کدهای خود شمارو هم کپی کردم ولی بازم بازنکرد.
آیا در قسمت هد سایت باید کدی بزنم؟؟
سلام. ممنون.
آیا جی کوئری رو به درستی در بخش head اضافه کرده اید؟ و یا bootstrap.min.j s رو در head اضافه کرده اید؟
سلام اگه بخواییم از رنگ های موجود برای دکمه ها استفاده نکنیم و رنگ دلخواه بدیم چه کار باید کرد.
سلام، از استایل دهی درون تگی برای اعمال رنگ دلخواهتان استفاده کنید. در واقع از ویژگی Style استفاده کنید و خصوصیت Color را تنظیم کنید.
style=""color:r ed رو که میذاریم رنگ متنش قرمز میشه خود دکمه همون ابی میمونه چکر باید کرد. با backgorund color هم تغییر نکرد
سلام. برای تغییر دادن رنگ دکمه ها در بوت استرپ، ابتدا به سایت css3buttongenerator.com/ بروید و دکمه ی دلخواه خود را به وسیله ی ابزارهای این سایت تولید کنید و سپس کدهای آن را کپی کنید.
حالا در آخر تگ 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="dr opdown" ،،،متوجه این قسمت نشدم data-toggle="dropdown
ممنون میشم اگه راهنمایی کنید
سلام ممنون
برای اینکه منوی ما قابلیت باز شدن داشته باشد، باید کلاس dropdown-toggle را به دکمه ی مورد نظر بدهیم. و همچنین باید خصوصیت "data-toggle="d ropdown را به این دکمه اضافه کنیم.
سپس باید به عنصر ul مورد نظر، کلاس dropdown-menu را بدهیم. اینا دیگه توضیح خاصی نداره و همواره باید این کار رو برای ایجاد منوی کشویی انجام بدیم.
با عرض سلام و تشکر بابت زحمات شما
آیا میشه رنگ و شکل دکمه ها و منوهارو به دلخواه انتخاب کرد؟
عرض سلام و ادب
برای تغییر رنگ، فقط کافی است کلاس مورد نظر را برای آن تنظیم کنید. همچنین اگر می خواهید آیکن خاصی را روی دکمه نمایش دهید خیلی ساده می توانید از یک Span مثل زیر استفاده کنید:
<span class="glyphico n glyphicon-name" ></span >
خصوصیت data-toggle="dr op-down در button و role="menu رو توضیح میدین!!!!؟؟؟
با سلام خدمت شما کاربر گرامی
خصوصیت هایی هستند که از طریق data-
به آنها داده میشود و یکی از آن ها toggle هست همان طور که از اسم آن پیداست بین دو خصوصیت سوییج میشود یعنی وقتی شما dropdown را در بالا میبینید toggle در هر دو حالت باز و بسته سوییچ میشود
در مورد سوال دوم که در مورد role بود این در واقع یه قوانین استاندارد هستش که بهتر هست حتما گذاشته بشه
و گذاشتن کلمه role در کد ها باعث میشه کسانی که با هر صفحه نمایشی میخوان بخونن از صفحه بهتر بتونن به اون منو دسترسی داشته باشن و درواقع برای کسانی که صفحه خوان استفاده میکنن دسترسی به اون منو رو بهتر و خیلی راحت تر میکنه
با کلمه toggle در طراحی سایت و کلا زبان هایی مثل جاوااسکریپت خیلی میبینید مخصوصا در کتابخانه jquery
موفق باشید
این خصوصیات برای خود html نیست، و تعریف شده توسط خود بوت استرپ هست.
توسط این خصوصیات میشه حالت و وضعیت منو رو مشخص کرد.
role هم همینطور! همونطور که از اسمش هم پیداست، role نقش اون خصوصیت رو به تگ میده.
در بعضی از کلاسها role ها اسم دیگه‌ای دارن.
توسط این خصوصیات میشه برخی از عملیات در درون کلاسهای فایل CSS رو هم کنترل کرد.