ميتا إكسبرس


Button group

عمل مجموعة ازرار داخل مجموعة

الناشر: WEB School

القسم: Bootstrap

تاريخ النشر: 2021-04-22



Basic example

code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">
<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"></script>
</head>
<body>



<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">
  <button type=\"button\" class=\"btn btn-primary\">Left</button>
  <button type=\"button\" class=\"btn btn-danger\">Middle</button>
  <button type=\"button\" class=\"btn btn-secondary\">Right</button>
</div>



</body>
</html>




Button toolbar

code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">
<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"></script>
</head>
<body>







<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar with button groups\">
  <div class=\"btn-group mr-2\" role=\"group\" aria-label=\"First group\">
    <button type=\"button\" class=\"btn btn-secondary\">1</button>
    <button type=\"button\" class=\"btn btn-secondary\">2</button>
    <button type=\"button\" class=\"btn btn-secondary\">3</button>
    <button type=\"button\" class=\"btn btn-secondary\">4</button>
  </div>
  <div class=\"btn-group mr-2\" role=\"group\" aria-label=\"Second group\">
    <button type=\"button\" class=\"btn btn-secondary\">5</button>
    <button type=\"button\" class=\"btn btn-secondary\">6</button>
    <button type=\"button\" class=\"btn btn-secondary\">7</button>
  </div>
  <div class=\"btn-group\" role=\"group\" aria-label=\"Third group\">
    <button type=\"button\" class=\"btn btn-secondary\">8</button>
  </div>
</div>







</body>
</html>




Sizing

code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">
<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"></script>
</head>
<body>






<div class=\"btn-group btn-group-lg \" role=\"group\" aria-label=\"...\">زر رقم 1</div>
<div class=\"btn-group\" role=\"group\" aria-label=\"...\">زر رقم 2</div>
<div class=\"btn-group btn-group-sm\" role=\"group\" aria-label=\"...\">زر رقم 3</div>







</body>
</html>




Nesting

code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\" crossorigin=\"anonymous\">

<script src=\"https://code.jquery.com/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"></script>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\" integrity=\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\" crossorigin=\"anonymous\"></script>
<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\" integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\" crossorigin=\"anonymous\"></script>



</head>
<body>


<div class=\"btn-group\" role=\"group\" aria-label=\"Button group with nested dropdown\">
  <button type=\"button\" class=\"btn btn-secondary\">1</button>
  <button type=\"button\" class=\"btn btn-secondary\">2</button>

  <div class=\"btn-group\" role=\"group\">
    <button id=\"btnGroupDrop1\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">
      Dropdown
    </button>
    <div class=\"dropdown-menu\" aria-labelledby=\"btnGroupDrop1\">
      <a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
      <a class=\"dropdown-item\" href=\"#\">Dropdown link</a>
    </div>
  </div>
</div>


</body>
</html>




عرض السلة (تأكيد الشراء) افراغ السلة
اتمام الشراء