Bootstrap pb

Salut !

Je m'amuse a faire un petit site avec bootstrap, mais lors de l'onglet réduit(téléphone) le toggle button ne marche pas, et le carousel ne marche pas !

Merci de votre aide !

ps: je supprimerai le lien des images apres !

Merci d'avance car je ne trouve vraiment pas !

<DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nova+Script" rel="stylesheet">
<link rel="icon" href="ico normale.png" type="image/ico">

    </head>
    <body>
   <nav role="navigation" class="navbar navbar-inverse">
   
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand name">Usite</a>
    </div>
   
    <div id="navbarCollapse" class="collapse navbar-collapse">
         <ul class="nav navbar-nav ">
            <li><a href="#"><span class="glyphicon glyphicon-home"></span> Acceuil</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            
            <li><a href="#">Services</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Contact</a></li>
        
        
            <li><a href="#"> <span class="glyphicon glyphicon-time"></span> Time</a></li>
        </ul>
    </div>
</nav>
        
        
        
        
    <style>
        .name{
            
          border:3px beige solid;
            color: white;
            font-family:monospace,sans-serif;
            border-radius: 
px;      
            font-size: 30px;
        }
        </style>
        <div class="container">
        <center><h1>Services</h1></center>
            <center><div style="background-color:orange; width: 40%; height:3px; border-radius:10px;"></div></center>
        
        
        <div  id="monCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
            <li data-target="#monCarousel" data-slide-to="0" class="active"></li>
             <li data-target="#monCarousel" data-slide-to="1"></li>
        
            </ol>
            <div>
                
                
                
        <div class="carousel-inner" role="listbox"> 
           <div class="item active">
            
            <img src="http://www.fteam.org/EDLB/wp-content/uploads/plage.jpeg"/>
            <div class="carousel-caption"><h1>LOL0</h1></div>
            </div>
            
             <div class="item">
            
            <img src="http://sosduneterrienneendetresse.s.o.pic.centerblog.net/qo9nwya4.jpg"/>
            <div class="carousel-caption"><h1>LOL1</h1></div>
            </div>
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            </div>
                <a href="#monCarousel" class="left carousel-control" role="button" data-slide="prev">
                    
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#monCarousel" class="right carousel-control" role="button" data-slide="next">
                    
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
                
                
                
                
                
        </div>
    </body>
    </html>

bonjour

juste en survolant ton code on peut déjà voir un erreur d'ordre de chargement des scripts

jquery n'est pas chargé au bon moment

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nova+Script" rel="stylesheet">
<link rel="icon" href="ico normale.png" type="image/ico">

-
Edité par wimbo 26 avril 2017 à 14:23:42

Bootstrap pb

Supprimer

Modérer

Signaler le message aux modérateurs