تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

دکمه های گروهی در بوت استرپ

نحوه ی گروه بندی دکمه ها در بوت استرپ

Wiki

بوت استرپ به ما امکان می دهد تا دکمه ها را بصورت خطی گروه بندی کنیم. به مثال زیر توجه کنید:

 

برای ایجاد دکمه های گروهی، می توانید از یک عنصر <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>

امتحان کنید»

نکته: به جای اینکه هر دکمه در یک گروه را اندازه دهی کنید، می توانید با استفاده از کلاس *-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>

امتحان کنید»

ایجاد دکمه های گروهی عمودی در بوت استرپ

Wiki

بوت استرپ از دکمه های گروهی عمودی نیز پشتیبانی می کند، مثل زیر:

 

برای ایجاد دکمه های گروهی عمودی، می توانید از کلاس 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>

امتحان کنید »

دکمه های گروهی تو در تو و منوهای کشویی در بوت استرپ

Wiki

شما می توانید با استفاده از دکمه های گروهی تو در تو، منوی کشویی ایجاد کنید. به مثال زیر توجه کنید:

مثال

<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>

امتحان کنید»

دیدگاه‌ها  

0 # ارسا 1396-07-09 10:41
باسلام ، خسته نباشید
خدا اجرتون بده که انقدر کمک میکنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # saeid ebrahimi 1396-04-25 23:49
سلام و خسته نباشید عزیزان.
من یه مشکلی برام پیش اومده. در قسمت منوی کشویی هرچی میزنم منو رو باز نمیکنه . حتی کدهای خود شمارو هم کپی کردم ولی بازم بازنکرد.
آیا در قسمت هد سایت باید کدی بزنم؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1396-04-26 11:39
سلام. ممنون.
آیا جی کوئری رو به درستی در بخش head اضافه کرده اید؟ و یا bootstrap.min.j s رو در head اضافه کرده اید؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # محدثه نوروزی 1396-02-11 19:12
سلام اگه بخواییم از رنگ های موجود برای دکمه ها استفاده نکنیم و رنگ دلخواه بدیم چه کار باید کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-02-15 22:01
سلام، از استایل دهی درون تگی برای اعمال رنگ دلخواهتان استفاده کنید. در واقع از ویژگی Style استفاده کنید و خصوصیت Color را تنظیم کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # soroor mohammadi 1396-03-17 16:00
style=""color:r ed رو که میذاریم رنگ متنش قرمز میشه خود دکمه همون ابی میمونه چکر باید کرد. با backgorund color هم تغییر نکرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1396-03-17 16:27
سلام. برای تغییر دادن رنگ دکمه ها در بوت استرپ، ابتدا به سایت css3buttongenerator.com/ بروید و دکمه ی دلخواه خود را به وسیله ی ابزارهای این سایت تولید کنید و سپس کدهای آن را کپی کنید.
حالا در آخر تگ head یک تگ style باز کنید و ببندید و سپس کدهای دکمه ی تولید شده را بین این تگ ها قرار دهید. خواهید دید که رنگ دکمه ها به درستی تغییر می کند. برای مشاهده ی یک مثال، به لینک زیر مراجعه کنید:
www.beyamooz.com/try_it_yourself/tryit.php?filename=change-bootstrap-button-color&stacked=h
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Mohammad Farokhian 1395-09-15 09:27
سلام خسته نباشید
توی مثال آخر در این قسمت:class="btn btn-primary dropdown-toggle " data-toggle="dr opdown" ،،،متوجه این قسمت نشدم data-toggle="dropdown
ممنون میشم اگه راهنمایی کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-09-15 10:25
سلام ممنون
برای اینکه منوی ما قابلیت باز شدن داشته باشد، باید کلاس dropdown-toggle را به دکمه ی مورد نظر بدهیم. و همچنین باید خصوصیت "data-toggle="d ropdown را به این دکمه اضافه کنیم.
سپس باید به عنصر ul مورد نظر، کلاس dropdown-menu را بدهیم. اینا دیگه توضیح خاصی نداره و همواره باید این کار رو برای ایجاد منوی کشویی انجام بدیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # nahidgh 1395-07-04 17:34
با عرض سلام و تشکر بابت زحمات شما
آیا میشه رنگ و شکل دکمه ها و منوهارو به دلخواه انتخاب کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-07-05 09:00
عرض سلام و ادب
برای تغییر رنگ، فقط کافی است کلاس مورد نظر را برای آن تنظیم کنید. همچنین اگر می خواهید آیکن خاصی را روی دکمه نمایش دهید خیلی ساده می توانید از یک Span مثل زیر استفاده کنید:
<span class="glyphico n glyphicon-name" ></span >
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # هما 1394-09-06 20:10
خصوصیت data-toggle="dr op-down در button و role="menu رو توضیح میدین!!!!؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # hamid fa 1394-09-06 20:46
با سلام خدمت شما کاربر گرامی

خصوصیت هایی هستند که از طریق data-

به آنها داده میشود و یکی از آن ها toggle هست همان طور که از اسم آن پیداست بین دو خصوصیت سوییج میشود یعنی وقتی شما dropdown را در بالا میبینید toggle در هر دو حالت باز و بسته سوییچ میشود

در مورد سوال دوم که در مورد role بود این در واقع یه قوانین استاندارد هستش که بهتر هست حتما گذاشته بشه
و گذاشتن کلمه role در کد ها باعث میشه کسانی که با هر صفحه نمایشی میخوان بخونن از صفحه بهتر بتونن به اون منو دسترسی داشته باشن و درواقع برای کسانی که صفحه خوان استفاده میکنن دسترسی به اون منو رو بهتر و خیلی راحت تر میکنه

با کلمه toggle در طراحی سایت و کلا زبان هایی مثل جاوااسکریپت خیلی میبینید مخصوصا در کتابخانه jquery

موفق باشید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-09-06 20:34
این خصوصیات برای خود html نیست، و تعریف شده توسط خود بوت استرپ هست.
توسط این خصوصیات می‌شه حالت و وضعیت منو رو مشخص کرد.
role‌ هم همینطور! همونطور که از اسمش هم پیداست، role‌ نقش اون خصوصیت رو به تگ میده.
در بعضی از کلاسها role ها اسم دیگه‌ای دارن.

توسط این خصوصیات میشه برخی از عملیات در درون کلاسهای فایل CSS رو هم کنترل کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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