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

بتاريخ 24 دقائق مضت قال 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)

بتاريخ 19 ساعة قال 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 من ابوه

بتاريخ 1 دقيقة مضت قال gamal_king:

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

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

بتاريخ 10 دقائق مضت قال Khaled Osama3:

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

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

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

بتاريخ 10 دقائق مضت قال gamal_king:

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

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

بتاريخ 19 ساعة قال Khaled Osama3:

<div class="col-12 row">

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

<div class="col-6 row">

بتاريخ 2 دقائق مضت قال 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>

بتاريخ 5 دقائق مضت قال 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

بتاريخ 6 دقائق مضت قال 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 

بتاريخ 1 دقيقة مضت قال 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 

 

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

بتاريخ 3 دقائق مضت قال 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>

بتاريخ 3 دقائق مضت قال 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

بتاريخ 32 دقائق مضت قال 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 اعمده