مشكلة في تنسيق الموقع

17 أبريل 2021

لدي كود يعرض اشعارات الرسائل الواردة لكن عند استخدام تنسيق

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

يؤثر فى تنسيقات الموقع بشكل كبير ككل ولا اعرف حلا لهذه المشكلة

وهذا هو الكود - هل هناك حل لهذه المشكلة او هناك بديل لbootstrap

حتى لو يتم كتابة التنسيق بشكل يدوي

<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown">
 <div class="label label-pill label-danger count"></div> 
 <div class="glyphicon glyphicon-bell"></div>
 </a>
 <div class="dropdown-menu"></div>
 </div>

<script>
$(document).ready(function(){
 
 function load_unseen_notification(view = '')
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{view:view},
   dataType:"json",
   success:function(data)
   {
    $('.dropdown-menu').html(data.notification);
    if(data.unseen_notification > 0)
    {
     $('.count').html(data.unseen_notification);
    }
   }
  });
 }
 
 load_unseen_notification();
 
 $('#messages_form').on('submit', function(event){
  event.preventDefault();
  if($('#sender_id').val() != ''&& $('#sender_name').val() != ''&& $('#message').val() != '')
  {
   var form_data = $(this).serialize();
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
	 $('#messages_form')[0].reset();
     load_unseen_notification();
    }
   });
  }
  else
  {
   alert("Both Fields are Required");
  }
 });
 
 $(document).on('click', '.dropdown-toggle', function(){
  $('.count').html('');
  load_unseen_notification('yes');
 });
 
 setInterval(function(){ 
  load_unseen_notification();;
 }, 5000); 
});
</script>

عبدالله نورالدين · 17 أبريل 2021

مشكلة التنسيق قد تحصل في حالة قمت باضافة الbootstrap بعدما قمت بتنسيق الموقع بالشكل المطلوب

السبب في ذلك أن الbootstrap يقوم بالتعديل على قيم عدة خصائص من الstyle (css)

من ضمن الخصائص التي تقوم مكتبة الboostrap بالتعديل على قيمتها هي الbox-model (خاصة بتحديد كيف يتم حساب العرض والطول الخاص بالعنصر).
حيث أنه قيمتها الافتراضية من دون استعمال مكتبة الbootstrap هي content-box (العرض والطول يتم حسابهما بدون اضافة قيمة الborder و padding).
لكن في حالة استعمال مكتبة الboostrap فانها تقوم بالتعديل عليها لتصبح border-box (العرض والطول يتم حسابهما مع اضافة قيمة الborder او padding).

لذلك تعديل هذه القيمة يسبب اختلاف في طريقة حساب قيمة العرض و الطول والذي يسبب اختلاف في التنسيق
في حالة كانت هذه هي مشكلتك فبامكانك حلها بشكل بسيط
عن طريق ارجاع قيمة box-sizing لقيمتها الأولية (content-box)
لفعل ذلك قم باضافة الكود التالي ل ملف css (او ضمن <style></style>)

*, *::before, *::after{
  box-sizing: content-box !important;
}

Wael Aljamal · 17 أبريل 2021

أرجو محاولة عمل التالي، استدعاء ملف التنسيقات الخاص ب Bootstrap قبل ملف بوتستراب الخاص بجافاسكربت.
في حال كان لديك ملف تنسيقات خاص بالموقع مثلا style.css، أرجو أيضا استدعائه بعد ملف تنسيقات بوتستراب.

بلال زيادة · 18 أبريل 2021

ستكون التنسيقات الخاصة ب css مضافة في وسم head كالتالي

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>

أما ملفات الخاصة بجافا سكريبت ستكون تحت في أسفل الصفحة قبل وسم الإغلاق

</body>

بهذا الشكل

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

يمكنك التعويض عن الروابط المستخدمة وهي CDN بمسارات الملفات في مشروعك. إذا لم تحل المشكلة يرجى إرفاق ملفات مشروعك لنساعدك في حل المشكلة.

مشكلة في تنسيق الموقع

السؤال

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

عبدالله نورالدين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية