CloseTag | الشروحات | Bootstrap | مجموعات الازرار في BootStrap | Bootstrap Button Groups

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>

<div class="container">
  <h2>Button Groups Sizes</h2>
  <p>Add class .btn-group-* to size all buttons in a button group.</p>
  <h3>Large Buttons:</h3>
  <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>
  <h3>Default Buttons:</h3>
  <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>
  <h3>Small Buttons:</h3>
  <div class="btn-group btn-group-sm">
    <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>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

  </body>
</html>

</html>

PCFkb2N0eXBlIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQogIDxoZWFkPg0KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPg0KICAgIDx0aXRsZT5Cb290c3RyYXAgZGVtbzwvdGl0bGU+DQogICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQogIDxib2R5Pg0KDQo8ZGl2IGNsYXNzPSJjb250YWluZXIiPg0KICA8aDI+QnV0dG9uIEdyb3VwcyBTaXplczwvaDI+DQogIDxwPkFkZCBjbGFzcyAuYnRuLWdyb3VwLSogdG8gc2l6ZSBhbGwgYnV0dG9ucyBpbiBhIGJ1dHRvbiBncm91cC48L3A+DQogIDxoMz5MYXJnZSBCdXR0b25zOjwvaDM+DQogIDxkaXYgY2xhc3M9ImJ0bi1ncm91cCBidG4tZ3JvdXAtbGciPg0KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1wcmltYXJ5Ij5BcHBsZTwvYnV0dG9uPg0KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1wcmltYXJ5Ij5TYW1zdW5nPC9idXR0b24+DQogICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4gYnRuLXByaW1hcnkiPlNvbnk8L2J1dHRvbj4NCiAgPC9kaXY+DQogIDxoMz5EZWZhdWx0IEJ1dHRvbnM6PC9oMz4NCiAgPGRpdiBjbGFzcz0iYnRuLWdyb3VwIj4NCiAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tcHJpbWFyeSI+QXBwbGU8L2J1dHRvbj4NCiAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tcHJpbWFyeSI+U2Ftc3VuZzwvYnV0dG9uPg0KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1wcmltYXJ5Ij5Tb255PC9idXR0b24+DQogIDwvZGl2Pg0KICA8aDM+U21hbGwgQnV0dG9uczo8L2gzPg0KICA8ZGl2IGNsYXNzPSJidG4tZ3JvdXAgYnRuLWdyb3VwLXNtIj4NCiAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tcHJpbWFyeSI+QXBwbGU8L2J1dHRvbj4NCiAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tcHJpbWFyeSI+U2Ftc3VuZzwvYnV0dG9uPg0KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1wcmltYXJ5Ij5Tb255PC9idXR0b24+DQogIDwvZGl2Pg0KPC9kaXY+DQoNCiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLmJ1bmRsZS5taW4uanMiIGludGVncml0eT0ic2hhMzg0LUEzckpEODU2S293U2I3ZHdsWmRZRWtPMzlHYWdpN3ZJc0YwanJSQW9RbURLS3RRQkhVdUxaOUFzU3Y0akQ0WGEiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQHBvcHBlcmpzL2NvcmVAMi4xMS41L2Rpc3QvdW1kL3BvcHBlci5taW4uanMiIGludGVncml0eT0ic2hhMzg0LVhlKzhjTDlvSmE2dE4vdmVDaFNQN3ErbW5TUGFqNUJjdTltUFg1RjV4SUdFMERWaXR0YXFUNWxvcmYwRUk3VmsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtT0RtRElWek4rcEZkZXh4SEVIRkJRSDMvOS92UTl1b3JpNDV6NEpqbkZzUnlkYm1RYm1MNXQxdFEwY3VsVXp5SyIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQoNCiAgPC9ib2R5Pg0KPC9odG1sPg0KDQo8L2h0bWw+