Probleme sur bootstraps
irene2017
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
forum92 Messages postés 220 Date d'inscription Statut Membre Dernière intervention -
forum92 Messages postés 220 Date d'inscription Statut Membre Dernière intervention -
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>
<!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>
