تنسيق ملف بوستراب

  بتاريخ On 4‏/1‏/2024 at 12:40 قال gamal_king:

السلام عليكم لدي ملف تالي استخدمت بوتسراب ونسقت فيه بحيث يسهل تعديل عليه  ممكن احد من اعضاء ينسق لي شكل بحيث input  تكون نفس حجم وتحت بعض 

بارك الله فيكم 

أظهر المزيد  

يمكنك وضع كل input في هذا السياق حتي تكون نفس حجم وتحت بعض  

<div class="col-12 row">

      <label for="fname" class="col-sm-2 col-form-label"> الرقم الوطني:</label>

      <div class="col-sm-10">

        <input type="text" id="fname" name="fname" class="form-control"><br><br>

      </div>

</div>

فهنا جعلنا كل input مع ال label سياخذون صف كامل (حسب col-12) وكل input ('col-sm-10') له نفس الحجم
وكذلك الlabel ('col-sm-2') واستخدمنا كلاسات اخري في البوستراب لتحسين الشكل وتنسيقه (col-form-label و form-control)

  بتاريخ On 4‏/1‏/2024 at 13:11 قال Khaled Osama3:

يمكنك وضع كل input في هذا السياق حتي تكون نفس حجم وتحت بعض  

<div class="col-12 row">

      <label for="fname" class="col-sm-2 col-form-label"> الرقم الوطني:</label>

      <div class="col-sm-10">

        <input type="text" id="fname" name="fname" class="form-control"><br><br>

      </div>

</div>

فهنا جعلنا كل input مع ال label سياخذون صف كامل (حسب col-12) وكل input ('col-sm-10') له نفس الحجم
وكذلك الlabel ('col-sm-2') واستخدمنا كلاسات اخري في البوستراب لتحسين الشكل وتنسيقه (col-form-label و form-control)

أظهر المزيد  

يعني label اخد من ابوه 2 وdiv اخد 10 من ابوه

  بتاريخ On 5‏/1‏/2024 at 08:12 قال gamal_king:

يعني label اخد من ابوه 2 وdiv اخد 10 من ابوه

أظهر المزيد  

نعم بالظبط هكذا

  بتاريخ On 5‏/1‏/2024 at 08:14 قال Khaled Osama3:

نعم بالظبط هكذا

أظهر المزيد  

في حالة صف معين اريد عنصرين بجانب بعضهم 

بحيث مثلا اسم موظف امامه input  وامامهم اسم الاب وامامه input

  بتاريخ On 5‏/1‏/2024 at 08:24 قال gamal_king:

في حالة صف معين اريد عنصرين بجانب بعضهم 

بحيث مثلا اسم موظف امامه input  وامامهم اسم الاب وامامه input

أظهر المزيد  

  بتاريخ On 4‏/1‏/2024 at 13:11 قال Khaled Osama3:

<div class="col-12 row">

أظهر المزيد  

حسنا في هذه الحاله يجب ان تجعل ال div الاعلي يأخذ كلاس col-6 فقط وفي هذه الحاله الصفحه ستأخذ اتنين inputs في نفس الصف:

<div class="col-6 row">

  بتاريخ On 5‏/1‏/2024 at 08:36 قال Khaled Osama3:

حسنا في هذه الحاله يجب ان تجعل ال div الاعلي يأخذ كلاس col-6 فقط وفي هذه الحاله الصفحه ستأخذ اتنين inputs في نفس الصف:

<div class="col-6 row">

أظهر المزيد  

عدل علي كود تالي اخي ما فهمتك 

 <div class="col-6 row">
      <div class="">
      <label for="fname">اسم الموظف :</label>
        <input type="text" id="fname" name="fname"><br><br>
      </div>
      <div class="">
        <label for="fname"> اسم الاب:</label>
        <input type="text" id="fname" name="fname"><br><br>
      </div>
    </div>

  بتاريخ On 5‏/1‏/2024 at 08:39 قال gamal_king:

عدل علي كود تالي اخي ما فهمتك 

 <div class="col-6 row">
      <div class="">
      <label for="fname">اسم الموظف :</label>
        <input type="text" id="fname" name="fname"><br><br>
      </div>
      <div class="">
        <label for="fname"> اسم الاب:</label>
        <input type="text" id="fname" name="fname"><br><br>
      </div>
    </div>

 

أظهر المزيد  

هو صف مقسم لي 12 عمود 

انا به label  وinput  و label  وinput  اذا div اول ياخد col-6  و div  اخر ياخد col-6

  بتاريخ On 5‏/1‏/2024 at 08:39 قال gamal_king:

عدل علي كود تالي اخي ما فهمتك 

أظهر المزيد  

حسنا اخي هذا هو الكود بعد التعديل

 <div class="col-6 row">

      <label for="fname" class="col-sm-2 col-form-label">اسم الموظف :</label>

      <div class="col-sm-10">

        <input type="text" id="fname" name="fname" class="form-control"><br><br>

      </div>

</div>

 <div class="col-6 row">

      <label for="fname" class="col-sm-2 col-form-label">اسم الاب:</label>

      <div class="col-sm-10">

        <input type="text" id="fname" name="fname" class="form-control"><br><br>

      </div>

</div>

ملاحظه: لا يجب ان يكون عنصرين في نفس الصفحه لهما نفس قيمه  ال id 

  بتاريخ On 5‏/1‏/2024 at 08:47 قال Khaled Osama3:

حسنا اخي هذا هو الكود بعد التعديل

 <div class="col-6 row">

      <label for="fname" class="col-sm-2 col-form-label">اسم الموظف :</label>

      <div class="col-sm-10">

        <input type="text" id="fname" name="fname" class="form-control"><br><br>

      </div>

</div>

 <div class="col-6 row">

      <label for="fname" class="col-sm-2 col-form-label">اسم الاب:</label>

      <div class="col-sm-10">

        <input type="text" id="fname" name="fname" class="form-control"><br><br>

      </div>

</div>

ملاحظه: لا يجب ان يكون عنصرين في نفس الصفحه لهما نفس قيمه  ال id 

 

أظهر المزيد  

اخي تنسيقهم  جاء اسفل بعض وليس بنفس سطر هل فهمتني 

  بتاريخ On 5‏/1‏/2024 at 08:49 قال gamal_king:

اخي تنسيقهم  جاء اسفل بعض وليس بنفس سطر هل فهمتني 

أظهر المزيد  

حسنا اخي انا اشتغلت ع الكود الخاص بك وكانوا موجودين داخل div به كلاس row 
يمكنك وضعهم داخل div مثل الكود التالي:

<div class="row">
      <div class="col-6 row">

        <label for="fname" class="col-sm-2 col-form-label">اسم الموظف :</label>

        <div class="col-sm-10">

          <input type="text" id="fname" name="fname" class="form-control"><br><br>

        </div>

      </div>

      <div class="col-6 row">

        <label for="fname" class="col-sm-2 col-form-label">اسم الاب:</label>

        <div class="col-sm-10">

          <input type="text" id="fname" name="fname" class="form-control"><br><br>

        </div>

      </div>
    </div>

  بتاريخ On 5‏/1‏/2024 at 08:55 قال Khaled Osama3:

حسنا اخي انا اشتغلت ع الكود الخاص بك وكانوا موجودين داخل div به كلاس row 
يمكنك وضعهم داخل div مثل الكود التالي:

<div class="row">
      <div class="col-6 row">

        <label for="fname" class="col-sm-2 col-form-label">اسم الموظف :</label>

        <div class="col-sm-10">

          <input type="text" id="fname" name="fname" class="form-control"><br><br>

        </div>

      </div>

      <div class="col-6 row">

        <label for="fname" class="col-sm-2 col-form-label">اسم الاب:</label>

        <div class="col-sm-10">

          <input type="text" id="fname" name="fname" class="form-control"><br><br>

        </div>

      </div>
    </div>

 

أظهر المزيد  

اليس بدل row  لكلاس اب اعطاء d-flex  وflex-row  وdiv  ابناء تاخد d-flex

  بتاريخ On 5‏/1‏/2024 at 08:59 قال gamal_king:

اليس بدل row  لكلاس اب اعطاء d-flex  وflex-row  وdiv  ابناء تاخد d-flex

أظهر المزيد  

الفئة row تقوم بتعيين الشكل الشبكي (grid) للعناصر المتضمنة في ال div الأب. 

بحيث يتم:

- تقسيم الفضاء المتاح على 12 عمودا. 

- يتم تعيين col-xs-* على الأبناء لتحديد عدد الأعمدة التي سيشغلها كل عنصر.

في div أب مع row

div ابن col-6 يأخذ 6 أعمدة 

div آخر col-6 يأخذ الستة المتبقية

هذا يحقق تجميع العناصر بطريقة متساوية داخل ال row.

بدون row ستقع العناصر تحت بعضها البعض.

فنحن هنا قسمنا ال div الكبير ل 12 عمودا ثم قسمنا تحت اتنين div ابناء كل واحد يأخذ 6 عمودا 

ثم كل div ابن يقسم تحته اتنين (واحد label وواحد input ) ال label يأخذ 2 عمود و ال input يأخذ 10 اعمده