Probleme sur bootstraps

irene2017 1 Messages postés vendredi 16 juin 2017Date d'inscription 16 juin 2017 Dernière intervention - 16 juin 2017 à 13:01 - Dernière réponse : forum92 147 Messages postés lundi 6 juillet 2015Date d'inscription 22 octobre 2017 Dernière intervention
- 26 juin 2017 à 20:02
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>
Afficher la suite 
1Messages postés vendredi 16 juin 2017Date d'inscription 16 juin 2017 Dernière intervention

1 réponse

Répondre au sujet
forum92 147 Messages postés lundi 6 juillet 2015Date d'inscription 22 octobre 2017 Dernière intervention - 26 juin 2017 à 20:02
0
Utile
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 ?
Commenter la réponse de forum92