Sujet Précédent Sujet Suivant

Probleme sur bootstraps

Fermé
irene2017 Messages postés 1 Date d'inscription vendredi 16 juin 2017 Statut Membre Dernière intervention 16 juin 2017 - 16 juin 2017 à 13:01
forum92 Messages postés 220 Date d'inscription lundi 6 juillet 2015 Statut Membre Dernière intervention 14 août 2018 - 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>

1 réponse

Réponse 1 / 1
forum92 Messages postés 220 Date d'inscription lundi 6 juillet 2015 Statut Membre Dernière intervention 14 août 2018 133
26 juin 2017 à 20:02
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 ?
0

Discussions similaires

Problème Bootstrap
xooit21 -
jordane45 -

9 réponses
Problème avec modal en bootstrap
linaa123 -
Anis SERRAFI -

1 réponse
Problème bootstrap débutant d-none et d-*-block
Mika -
Mika023 -

4 réponses