Signaler

Probleme sur bootstraps

Posez votre question irene2017 1Messages postés vendredi 16 juin 2017Date d'inscription 16 juin 2017 Dernière intervention - Dernière réponse le 26 juin 2017 à 20:02 par forum92
mon responsive ne fonctionne pas comme je le voudrais avec bootstraps comment remedier a cela sil vous plaitvoila mon code
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the pagevia file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/ html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/ respond.min.js"></script>
<![endif]-->
<style type="text/css">

/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */
/* Style pour grand desktop */

.header{
background-color: #404040;
color:#ffffff;
}
.header h6{
font-size: 6px;
}

.banner{
background-color:#249af4;
color:#ffffff;
}
.banner h6{
font-size:18px;
}
.banner h3{
font-size:30px;
}

.aside h5{
font-size:23px;
}

.aside h6{
font-size:18px;
text-align: justify;
}

.sidebar h5{
font-size:23px;
}

.sidebar h6{
font-size:18px;
text-align: justify;
}
.footer h5{
font-size:23px;
}

.footer h6{
font-size:18px;
}

[class*="col-md-3"]{
background-color:#249af4;

}
/* Style pour tablette */
@media (max-width: 768px) {
.container {
max-width:768px;
}

/* Style pour desktop */
@media (max-width: 992px) {
.container {
max-width:992px;


}


</style>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3><strong><span class="salut">Works</span> like a dream</strong></h3>
<h6><span class="salut">la boisson de nos jours constitut</span>
un danger pour</h6>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="btn-group btn-group-xs">
<a href="#" rel="nofollow noopener noreferrer" target="_blank" id="btn1" class="btn btn-default">CSS</a>
<a href="#" rel="nofollow noopener noreferrer" target="_blank" id="btn2" class="btn btn-default">ERP</a>
<a href="#" rel="nofollow noopener noreferrer" target="_blank" id="btn3" class="btn btn-default">HTML</a>
</div>
</div>
</div>
<div class="row banner">
<div class="col-lg-7 col-md-5 col-sm-12 col-xs-12">
<h3><strong>THE WORLD CAN</br><span class="salut1">BE YOURS</span></strong></h3>
<!-- deuxieme paragraphe du bloc contenu-->
<p><h6><span class="salut1">comment aller vous,avez vous un probleme</span>
</br>je ne me demande jamais comment demain serait</br>que demain sera meilleur</h6></p>
<!-- bouton du bloc contenu -->
<form action="#">
<a href="#" rel="nofollow noopener noreferrer" target="_blank" id="btn4" class="btn btn-default btn-xs">Read more</a>
</form>
</div>
<!-- <div class="col-lg-5 col-md-5">
<img src="testbon.gif" class="img-responsive " alt="Bird" id="testbon">
</div> -->
</div>
<div class="row menu">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand glyphicon glyphicon-chevron-right"href="#" rel="nofollow noopener noreferrer" target="_blank">HOMEPAGE</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="glyphicon glyphicon-chevron-right"href="#" rel="nofollow noopener noreferrer" target="_blank">ABOUTUS</a></li>
<li><a class="glyphicon glyphicon-chevron-right"href="#" rel="nofollow noopener noreferrer" target="_blank">CONTACT</a></li>
<li><a class="glyphicon glyphicon-chevron-right"href="#" rel="nofollow noopener noreferrer" target="_blank">SOLUTIONS</a></li>
<li><a class="glyphicon glyphicon-chevron-right"href="#" rel="nofollow noopener noreferrer" target="_blank">SERVICES</a></li>
</ul>
</div>
</nav>
</div>
<div class="row footer">
<div class="col-xs-4 col-sm-2 col-md-2 col-xs-offset-4">
<img src="picture.png" alt="Bird" class="img-responsive pull-left" id="tof">
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-xs-offset-1">
</p>
<h5>
<span class="salut2"><b>Changing text</span>
in Adobe Photoshop</h5></b><hr/>
<p><h6>celui qui parle exprime son fond de pensee alors que celui tu n'est pas assez sage car la sagesse ne se donne pas cela se merite au fil qui se tait cache son fond de pensee et ainsi on ne peut pas connaitre tu n'est pas assez sage car la sagesse ne se donne pas cela se merite au fil pourtant face a une idee tu n'est pas assez sage car la sagesse ne se donne pas cela se merite au fil du temps et des annes ecoules autour de son pourtant face a une idee tu n'est pas assez sage
</h6>
</p>
</div>
</div>
<div class="row aside">
<div class="col-xs-10 col-sm-3 col-md-3 col-xs-offset-1">
<h5><strong>Creating Subpages</strong></h5>
<h6>
<ul class="lien1">
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="dolor">la marche est un sport qui fait</a></li>
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="dolor">le cholera est une maladie tres</a></li>
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="dolor">le beurre n'est pas bon pour la</a></li>
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="dolor">la marche est un sport qui fait</a></li>
</ul>
</div>
<div class="col-xs-10 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-xs-offset-1">
<p><h5><strong>Changing Image</strong></h5>
<h6>
un docteur est un malade qui ne sait<br/>
un dentiste est un docteur qui travaille<br/>
un avocat est celui qui defend les droit<br/>
un arbitre est celui qui arbitre
</h6>
</p>
</div>
<div class="col-xs-10 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-xs-offset-1">
<h5> <strong>Contact Info</strong></h5>
<h6>
Email......................<a href="mailto:ITkamer@yahoo.fr" rel="nofollow noopener noreferrer" target="_blank" class="dolor"> ITkamer@yahoo.fr</a><br/>
Tel......................... +(001)783-245-6897<br/>
Fax ....................... +(001)783-245-6897<br/>
<ul id="nav1">
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="dolor"> l'esprit en perpetuel travail</a></li>
</ul>
</h6>
</div>
</div>
<div class="row sidebar">
<div class="col-xs-10 col-sm-10 col-md-10 col-xs-offset-1">
<h5><span class="salut2"><b>Changing text</span>in Adobe Photoshop</h5>
</b><hr/>
<p><h6>celui qui parle exprime son fond de pensee alors que celui tu n'est pas assez sage car la sagesse ne se donne pas cela se merite au fil qui se tait cache son fond de pensee et ainsi on ne peut pas connaitre tu n'est pas assez sage car la sagesse ne se donne pas cela se merite au fil pourtant face a une idee tu n'est pas assez sage car la sagesse ne se donne pas cela se merite au fil du temps et des annes ecoules autour de son pourtant face a une idee tu n'est pas assez sage
</h6></p>
</div>
<div class="col-xs-4 col-sm-2 col-md-2 col-xs-offset-4">
<img src="picture.png" alt="Bird" class="img-responsive pull-rigth" id="tof">
</div>
</div>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Utile
+0
plus moins
Bonjour,
Premièrement il existe des balises <code> donc merci de les utiliser ( avec le langage adapté).
Deuxièmement que signifie ( 'pas comme je voudrais')? Tu veux quoi ?
Peut être une capture pour montrer le résultat actuel ?
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !