تحقيق أزرار Bootstrap متسعة العرض بأسلوب فريد

في Bootstrap، يمكنك تحقيق مجموعة من الأزرار تمتد عبر عرض العنصر الأم بطريقة تشبه تلك المحققة باستخدام فئة “.btn-block” ولكن على مجموعة الأزرار. تحديداً، يمكنك استخدام فئة “.btn-group-block” المخصصة.

للقيام بذلك، يلزمك تحديد عرض المجموعة بنسبة مئوية لتكون 100% من عرض العنصر الأم. يمكنك القيام بذلك باستخدام الأنماط الخاصة بلغة التنسيق CSS.

الشيفرة التالية توضح كيفية تحقيق هذا الهدف:

htmlCopy code
<div class="btn-group btn-group-block" role="group" aria-label="...">
  <button type="button" class="btn btn-default" style="width: 33.33%;">Leftbutton>
  <button type="button" class="btn btn-default" style="width: 33.33%;">Middlebutton>
  <button type="button" class="btn btn-default" style="width: 33.33%;">Rightbutton>
div>

في هذا المثال، تم تعيين فئة “.btn-group-block” لتحديد نمط مجموعة الأزرار، وتم تعيين عرض كل زر بنسبة 33.33% باستخدام الأنماط المضمنة في الواجهة. وبهذا يتم تحقيق توسع مجموعة الأزرار لتمتد عبر عرض العنصر الأم.

إذا كنت ترغب في تحسين هذا الأمر وجعله أكثر قابلية للتخصيص، يمكنك نقل الأنماط المضمنة إلى ملف CSS خارجي لتنظيم الشيفرة بشكل أفضل.

يمكنك القيام بالمزيد من التخصيص وتحسين مظهر مجموعة الأزرار بواسطة إضافة بعض الأنماط الإضافية. على سبيل المثال، يمكنك تحديد الألوان والحدود لتحسين تميز الأزرار وتكاملها بشكل أفضل مع تصميم موقعك.

الشيفرة التالية توضح كيفية إضافة بعض الأنماط الإضافية:

htmlCopy code
<style>
  .btn-group-block {
    display: flex;
    width: 100%;
    margin-bottom: 15px; /* تضيف هامش أسفل المجموعة لتحسين التباعد */
  }

  .btn-group-block .btn {
    flex: 1;
    border-radius: 0; /* إزالة زوايا الأزرار */
  }

  .btn-group-block .btn:first-child {
    border-top-left-radius: 4px; /* إضافة زاوية للزر الأول في الجهة العليا اليسرى */
    border-bottom-left-radius: 4px; /* إضافة زاوية للزر الأول في الجهة السفلى اليسرى */
  }

  .btn-group-block .btn:last-child {
    border-top-right-radius: 4px; /* إضافة زاوية للزر الأخير في الجهة العليا اليمنى */
    border-bottom-right-radius: 4px; /* إضافة زاوية للزر الأخير في الجهة السفلى اليمنى */
  }
style>

<div class="btn-group btn-group-block" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Leftbutton>
  <button type="button" class="btn btn-default">Middlebutton>
  <button type="button" class="btn btn-default">Rightbutton>
div>

في هذا المثال، تم إضافة أنماط إضافية لتحديد زوايا الأزرار وتحسين التباعد بينها. يمكنك تعديل القيم وفقًا لاحتياجات تصميم موقعك. يمكن أيضاً تحديد ألوان الخلفية والنص والحدود وغيرها لتكامل مظهر مجموعة الأزرار مع استايل موقعك.