Diskuze: Bootstrap

Martin Štěpaník

Člen

Martin Štěpaník:2.3.2018 13:56

Dobrý den, potřeboval bych poradit. Správně se mi ukazuje navbar tzv. "burger", ale když na něj kliknu, tak se nic neděje(nejde rozkliknout), collapse mam nastaveno. Další problém mám s Carousel, první obrázek načte, ale přepínat na další už nelze. Prohlížeč používám Chrome. Setkal jste se s tímhle prosím někdo? děkuji za případnou pomoc.

Hlavička nadefinovaná zde.

Odpovědět

2.3.2018 13:56

Šimon Rataj

Člen

Šimon Rataj:2.3.2018 15:57

Ukaž kód toho navbaru.

Nahoru Odpovědět

2.3.2018 15:57

Šimon Rataj

Člen

Šimon Rataj:2.3.2018 16:01

Zkus novější jQuery (min. 1.9) a jestli to nepůjde, zkontroluj konzoli.

Editováno 2.3.2018 16:02

Nahoru Odpovědět

2.3.2018 16:01

Martin Štěpaník

Člen

Martin Štěpaník:4.3.2018 12:51

</button>

</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar left">
<li class="active"><a href="indeexx.html">Home</a></li>
<li><a href="Dovednosti.html">Jazyky</a></li>
<li><a href="mailform.php">Kontakt</a></li>
<li><a href="registrace.php">Registrace</a></li>
</ul>
</div>

</div>

Nahoru Odpovědět

4.3.2018 12:51

Martin Štěpaník

Člen

Martin Štěpaník:5.3.2018 15:58

Bohužel nefunguje, hodil jsem tam tento link <script src="http://code.jquery.com/jquery-1.9.1.js"></script> a nic, ještě nějaké rady prosím? potřebuju v něm dodělat web. Díky!

Nahoru Odpovědět

5.3.2018 15:58

Šimon Rataj

Člen

Šimon Rataj:5.3.2018 16:02

Je nějaká chyba v konzoli?

Nahoru Odpovědět

5.3.2018 16:02

Šimon Rataj

Člen

Šimon Rataj:5.3.2018 16:08

Zkoušel jsem tvoji adresu na jQuery, když ji nakopíruji, hodí mi to error 404, pak jsem zkoušel tu adresu přepsat a fungovalo mi to, nejspíš je ve tvém odkazu nějaký neviditelný znak, zkus tu adresu napsat znovu, nejlépe se souborem jquery-1.9.1.min.js, bude se to rychleji načítat.

Nahoru Odpovědět

5.3.2018 16:08

Šimon Rataj

Člen

Šimon Rataj:5.3.2018 16:16

Našel jsem tam divné znaky %C2 a %AD mezi písmeny u a e.

Nahoru Odpovědět

5.3.2018 16:16

Martin Štěpaník

Člen

Martin Štěpaník:5.3.2018 16:26

V konzoli je chyba tahle.

Nahoru Odpovědět

5.3.2018 16:26

Šimon Rataj

Člen

Šimon Rataj:5.3.2018 16:32

https://stackoverflow.com/…rap-carousel Tady se píše, že to může být tím, že nemáš na žádném obrázku v carouselu třídu active.

Nahoru Odpovědět

5.3.2018 16:32

Šimon Rataj

Člen

Šimon Rataj:5.3.2018 16:35

Příště používej vložení kódu, ty divné znaky pravděpodobně budou entita , která se sem vkládá automaticky.

Nahoru Odpovědět

5.3.2018 16:35

Martin Štěpaník

Člen

Martin Štěpaník:6.3.2018 16:06

Tak chyba z konzole po upravení Carouselu zmizela, ovšem stále se mi nepřepínají jednotlivé obrázky, chyba bude zjevně tedy někde jinde :/...

Nahoru Odpovědět

6.3.2018 16:06

Šimon Rataj

Člen

Šimon Rataj:6.3.2018 19:28

Ukážeš, prosím kód celé stránky, rád bych si to zkusil u sebe.

Nahoru Odpovědět

6.3.2018 19:28

Martin Štěpaník

Člen

Martin Štěpaník:6.3.2018 20:00

<!DOCTYPE html>
<html lang="cs-cz">
<head>
  <title>Bootstrap Website Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
  .navbar
  {
    margin-bottom: 0;
    border-radius: 0;
    background-color: #2b2b2e;
    color: black;
    padding: 7px 11px;
    font-size: 1.25em;
    border: 5px;
  }
  .navbar-brand
  {

    float:left;
    min-height: 55px;
    padding: 8px 15px 5px;
  }
  .navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus,
  .navbar-inverse .navbar-nav .active a:hover
  {
    color:#FFF;
    background-color: #0012d9;
  }
  .navbar-inverse .navbar-nav li a
  {

    color: #dddce0;
  }

  </style>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#"><img src="img/w3newbie.png"></a>



      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar left">
            <li class="active"><a href="indeexx.html">Home</a></li>
                                        <li><a href="Dovednosti.html">Jazyky</a></li>
                                        <li><a href="mailform.php">Kontakt</a></li>
            <li><a href="registrace.php">Registrace</a></li>
          </ul>
      </div>


      </div>

  </nav>
  <div id="carouselExampleIndicators" class="carousel-slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="img-responsive" src="img/snow.png" alt="First slide">
      </div>
      <div class="item">
        <img class="img-responsive" src="img/snow.png" alt="Second slide">
      </div>
      <div class="item">
        <img class="img-responsive" src="img/red.png" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">další</span>
    </a>
  </div>



</body>

</html>

Nahoru Odpovědět

6.3.2018 20:00

Šimon Rataj

Člen

Šimon Rataj:6.3.2018 22:04

Asi jsi to dělal podle nějakých starých návodů, trochu jsem to upravil pro Bootstrap 3.

<!DOCTYPE html>
<html lang="cs-cz">
<head>
  <title>Bootstrap Website Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
  .navbar
  {
    margin-bottom: 0;
    border-radius: 0;
    background-color: #2b2b2e;
    color: black;
    padding: 7px 11px;
    font-size: 1.25em;
    border: 5px;
  }
  .navbar-brand
  {

    float:left;
    min-height: 55px;
    padding: 8px 15px 5px;
  }
  .navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus,
  .navbar-inverse .navbar-nav .active a:hover
  {
    color:#FFF;
    background-color: #0012d9;
  }
  .navbar-inverse .navbar-nav li a
  {

    color: #dddce0;
  }

  </style>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#"><img src="img/w3newbie.png"></a>



      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="indeexx.html">Home</a></li>
                                        <li><a href="Dovednosti.html">Jazyky</a></li>
                                        <li><a href="mailform.php">Kontakt</a></li>
            <li><a href="registrace.php">Registrace</a></li>
          </ul>
      </div>


      </div>

  </nav>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img class="img-responsive" style="width: 100%" src="img/snow.png" alt="First slide">
      </div>
      <div class="item">
        <img class="img-responsive" style="width: 100%" src="img/snow.png" alt="Second slide">
      </div>
      <div class="item">
        <img class="img-responsive" style="width: 100%" src="img/red.png" alt="Third slide">
      </div>
    </div>
    <a class="left carousel-control" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="icon-prev" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="icon-next" aria-hidden="true"></span>
      <span class="sr-only">další</span>
    </a>
  </div>



</body>

</html>

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

6.3.2018 22:04

Martin Štěpaník

Člen

Martin Štěpaník:7.3.2018 14:49

Báječné! děkuji ti za ochotu

Nahoru Odpovědět

+1

7.3.2018 14:49

Nejčastěji vyhledáváné

Diskuze: Bootstrap