لماذا Carousel Bootstrap لا يظهر في الصفحة ؟

Samir Boukheche · 25 أكتوبر 2022

السلام عليكم

اريد تضمين سلايد Carousel في الصفحة البوتستراب 5

لان رافض يظهر لا أدري اين المشكلة هل في تضمين الاكواد

هدا هو الكود

<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<title>index.html</title>
<link href="layout/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="layout/css/bootstrap.rtl.css" rel="stylesheet" type="text/css">
<link href="layout/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="layout/css/style.css" rel="stylesheet" type="text/css">
<!---->
		
	

		
</head>

<body>
	
	<!-- Main Container -->
	 <div class="container my-5">
	   <!--begin nav-->
	<nav class="navbar navbar-expand-md fixed-top bg-light  ">
  <div class="container-fluid ">
	 
    <a class="navbar-brand" href="#">
      <img src="https://sakanjamaie.sa/img/new-logo2.svg" alt="Logo" > 
    </a>
	 
	  <!--begin ul liste-->
	  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto  mb-1">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">الرئيسية</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
الاسئلة المتكررة</a>
        </li>
        <li class="nav-item">
          <a class="nav-link  " href="#">الدخول<i class="fa fa-sign-in mx-1" aria-hidden="true"></i></a>
        </li>
      </ul>
		<!--زر دخول المنصة-->
        <button class="btn btn-success mx-auto" type="button" style="font-family: 'Noto Kufi Arabic', sans-serif; font-weight: 700; line-height: 30px">
			<i class="fa fa-sign-in me-2" aria-hidden="true"></i>الدخول الى منصة العقار</button>
		<!--زر دخول المنصة-->
      
    </div>
	  <!--End ul liste-->
 	 </div>
</nav>
	<!--End nav-->
		</div>

		 <!--SECTION 1 Begin-->
	<section class="section-about aos-init aos-animate" data-aos="fade-up" data-aos-duration="1500" style="margin-top: 120px">
        <div class="container">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-6">
                        <div class="card-body">
                            <h5 class="card-title">ماهي منصة السكن الجماعي ؟</h5>
                            <p class="card-text">
                                منصة تمكّن المنشآت من توضيح معلومات السكن الفردي أو الجماعي للعاملين
                                لديها، وتعمل على التأكد من توفير بيئة سكنية مناسبة لهم بما يتلاءم مع ظروف عملهم وفق
                                معايير واضحة ومحددة تلتزم بها المنشآت، وتُقيّم بناءً عليها، حيث يمكن من خلال المنصة
                                توضيح أنواع الوحدات السكنية الجماعية أو الفردية سواءً كانت مستأجرة أو مملوكة.
                            </p>
                            <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
                        </div>
                    </div>
                    <div class="col-md-6">
                        <img class="d-block w-100" src="https://sakanjamaie.sa/img/new1.png" alt="Third slide" height="340px">


                    </div>

                </div>
            </div>
        </div>
    </section>
		 
		 <!--SECTION 1 End-->
	
	
		 <!--SECTION 2 begin-->
	<!--Carousel Wrapper-->
	<section>
	<div class="container px-1 py-5  ">
    
 <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img  src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img  src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"   class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img  src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  </div>
</section>
  <!--/.Carousel Wrapper-->
	
		 <!--SECTION 2 End-->
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 

	
	
	<!-- Main Container -->
	
	
	
	<script src="layout/js/bootstrap.min.js" ></script>
	<script src="layout/js/jquery-3.6.1.min.js"></script>
</body>
</html>

أسامة زيادة · 25 أكتوبر 2022

بتاريخ 2 دقائق مضت قال Reda Boukheche:

اخي لاحظت لما أحدف ملف البوتستراب الخاص بالعربي RTL من المحرر

<link href="css/bootstrap.rtl.css" rel="stylesheet" type="text/css">

يظهر بشكل عادي

هل يؤثر عدم تضمين ملف bootstrap.rtl.css على الصفحات لان الموقع عربي

ام يمكن الاستغناء عنه

تحياتي

نعم يؤثر تضمين إثنين من ملفات بوتستراب الخاصة في التنسيقات في الصفحة ويسبب في مشاكل في التصميم ، يمكنك الإستغناء ملف bootstrap.rtl.css وكتابة الخاصية lang , dir لتعديل اتجاه الصفحة ، بهذا الشكل .

<html lang="ar" dir="rtl">

أسامة زيادة · 25 أكتوبر 2022

وعليكم السلام

تأكد من أنك قمت بتنزيل ملفات بوتستراب الإصدار الخامس ، لقد قمت بإستعمال cdnالخاص في الإصدار الخامس وظهر Carousel أي أنك قمت بتضمين أكواد Carousel لكن لديك مشكلة في الوصول إلى ملفات البوتستراب ،

cdn css

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

cdn script

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

وتأكد من أن المسارات صحيحة لديك بأن ملف bootstrap.css داخل مجلد CSS وهذا المجلد داخل مجلد layout ، وأيضاً يفضل أن تضمن ملف واحد وليس الإثنبن وكذلك مسارات الجافا سكربت

<link href="layout/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="layout/css/bootstrap.rtl.css" rel="stylesheet" type="text/css">

وأخبرنا بالنتيجة هل قمت بحل المشكلة أو لا

Samir Boukheche · 25 أكتوبر 2022

بتاريخ On 13/10/2022 at 10:23 قال Adnane Kadri:
يمكنك تقييد تصريح لقواعد CSS بشرط أن تكون اللغة الحالية هي العربية. يوجد متغير القالب if@ لهذا الغرض.
@if ( Config::get('app.locale') == 'ar')
<style>
  /* اي قواعد تخصيص تختص بالعربية  */
</style>
@endif

بتاريخ 3 ساعات قال أسامة زيادة:
وعليكم السلام

تأكد من أنك قمت بتنزيل ملفات بوتستراب الإصدار الخامس ، لقد قمت بإستعمال cdnالخاص في الإصدار الخامس وظهر Carousel أي أنك قمت بتضمين أكواد Carousel لكن لديك مشكلة في الوصول إلى ملفات البوتستراب ،

cdn css
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
cdn script
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
وتأكد من أن المسارات صحيحة لديك بأن ملف bootstrap.css داخل مجلد CSS وهذا المجلد داخل مجلد layout ، وأيضاً يفضل أن تضمن ملف واحد وليس الإثنبن وكذلك مسارات الجافا سكربت
<link href="layout/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="layout/css/bootstrap.rtl.css" rel="stylesheet" type="text/css">
وأخبرنا بالنتيجة هل قمت بحل المشكلة أو لا

اخي لاحظت لما أحدف ملف البوتستراب الخاص بالعربي RTL من المحرر

يظهر بشكل عادي

هل يؤثر عدم تضمين ملف bootstrap.rtl.css على الصفحات لان الموقع عربي

ام يمكن الاستغناء عنه

تحياتي

لماذا Carousel Bootstrap لا يظهر في الصفحة ؟

السؤال

Samir Boukheche

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

Recommended Posts

أسامة زيادة

أسامة زيادة

Samir Boukheche

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية