Bootstrap 5 JS çalışmıyor

Alifg · 10 Temmuz 2023

HTML:

<html>
    <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="css.css">
    </head>
    <nav class="navbar navbar-expand-lg navbar-light  text-center header">
        <a class="navbar-brand" href="#">
            <img src="logo2.png" class="img-fluid logo" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mx-auto">
            <li class="nav-item active me-5">
              <a class="nav-link" href="#">Hakkımızda</span></a>
            </li>
            <li class="nav-item me-5">
              <a class="nav-link" href="#">İletişim</a>
            </li>
            <li class="nav-item me-5">
                <a class="nav-link" href="#">Ürünler</a>
              </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                İçerikler
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
           
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Arama" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Arama</button>
          </form>
        </div>
      </nav>
      <div class="container-fluid">
       
      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></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>

       
        </body>
</html>

delikarga · 10 Temmuz 2023

Head kısmına eklenecek:

HTML:

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

Body en alt eklenecek:

Kod:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

NOT: En alttaki 3 scripti silip dediğim gibi ekle.

Alifg · 10 Temmuz 2023

delikarga dedi:

Head kısmına eklenecek:

HTML:

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

Body en alt eklenecek:

Kod:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

NOT: En alttaki 3 scripti silip dediğim gibi ekle.

JS gene de çalışmıyor.

delikarga · 10 Temmuz 2023

Kullandığın html dosyasını chromeda aç ve f12 ile geliştirici konsolunu aç. Menüden Console'a gel. Ordaki hata çıktısını buraya at.

Alifg · 10 Temmuz 2023

delikarga dedi:
Kullandığın html dosyasını chromeda aç ve f12 ile geliştirici konsolunu aç. Menüden Console'a gel. Ordaki hata çıktısını buraya at.

birde gönderdiğin şekilde yaptığımda kendi css dosyam da çalışmayı bırakıyor sebebi nedir

delikarga · 10 Temmuz 2023

Kendi cssini bootstrapin altına koy. Bu arada senin daha önce ekledğini sil, 2 tane olmasın bootstrap.css

Alifg · 10 Temmuz 2023

delikarga dedi:
Kendi cssini bootstrapin altına koy. Bu arada senin daha önce ekledğini sil, 2 tane olmasın bootstrap.css

HTML:

<html>
    <head>
    <body>
    </head>
    <nav class="navbar navbar-expand-lg navbar-light  text-center header">
        <a class="navbar-brand" href="#">
            <img src="logo2.png" class="img-fluid logo" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mx-auto">
            <li class="nav-item active me-5">
              <a class="nav-link" href="#">Hakkımızda</span></a>
            </li>
            <li class="nav-item me-5">
              <a class="nav-link" href="#">İletişim</a>
            </li>
            <li class="nav-item me-5">
                <a class="nav-link" href="#">Ürünler</a>
              </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                İçerikler
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Arama" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Arama</button>
          </form>
        </div>
      </nav>
      <div class="container">
      <main>
        <div class="p-4 bg-dark text-white mb-5">
          <div class="p-4 col-md-6">
            <h1>başlık</h1>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas voluptatibus suscipit commodi rem a eaque repudiandae aspernatur optio aut, deserunt consequatur quidem quibusdam? Totam, sunt impedit nobis minus eos est. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, dolore ratione. Eum, id commodi molestias fugiat necessitatibus ea nulla explicabo, voluptatibus, cum libero tempora? Soluta tempore cum optio maxime ullam?
            <img src="logo2.png" height="200px" alt="">
            
          </div>

        </div>
      </div>
      </main>
      
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
        </body>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

      <link rel="stylesheet" href="css.css">
        

        
</html>

Alifg dedi:

HTML:

<html>
 <head>
 <body>
 </head>
 <nav class="navbar navbar-expand-lg navbar-light text-center header">
 <a class="navbar-brand" href="#">
 <img src="logo2.png" class="img-fluid logo" alt="">
 </a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mx-auto">
 <li class="nav-item active me-5">
 <a class="nav-link" href="#">Hakkımızda</span></a>
 </li>
 <li class="nav-item me-5">
 <a class="nav-link" href="#">İletişim</a>
 </li>
 <li class="nav-item me-5">
 <a class="nav-link" href="#">Ürünler</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 İçerikler.
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>

 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="search" placeholder="Arama" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Arama</button>
 </form>
 </div>
 </nav>
 <div class="container">
 <main>
 <div class="p-4 bg-dark text-white mb-5">
 <div class="p-4 col-md-6">
 <h1>başlık</h1>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas voluptatibus suscipit commodi rem a eaque repudiandae aspernatur optio aut, deserunt consequatur quidem quibusdam? Totam, sunt impedit nobis minus eos est. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, dolore ratione. Eum, id commodi molestias fugiat necessitatibus ea nulla explicabo, voluptatibus, cum libero tempora? Soluta tempore cum optio maxime ullam?
 <img src="logo2.png" height="200px" alt="">

 </div>

 </div>
 </div>
 </main>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 </body>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

 <link rel="stylesheet" href="css.css">

</html>

CSS normal şu an bir sorun yok ama JS hala çalışmıyor yanlış bir şey mi yaptım?

delikarga · 10 Temmuz 2023

Alifg dedi:
CSS normal şu an bir sorun yok ama JS hala çalışmıyor yanlış bir şey mi yaptım?

delikarga dedi:
Kullandığın html dosyasını chromeda aç ve f12 ile geliştirici konsolunu aç. Menüden Console'a gel. Ordaki hata çıktısını buraya at.

.....

Bootstrap 5 JS çalışmıyor

Ayrıntılı düzenleme

Alifg

Hectopat

delikarga

Kilopat

Alifg

Hectopat

delikarga

Kilopat

Alifg

Hectopat

delikarga

Kilopat

Alifg

Hectopat

delikarga

Kilopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz