File "ex02.html"
Full Path: /home/analogde/www/MDPH/Work/ex02.html
File size: 9.09 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<style>
#sidebar {
height: 100vh;
//background-color: #333;
}
.row {
height: 120px;
}
nav {
position: relative;
margin: 50px;
width: 360px;
//background:
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Sub Menu */
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
nav ul li a:hover {
//background: #1d4f71;
//color: #fff;
}
nav ul li a .fa {
width: 16px;
text-align: center;
margin-right: 5px;
float:right;
}
nav ul ul {
background: rgba(0, 0, 0, 0.2);
}
nav ul li ul li a {
border-left: 4px solid transparent;
padding: 10px 20px;
}
nav ul li ul li a:hover {
border-left: 4px solid green; //#3498db;
}
.xxxx {
background : #D6DBDF ;
}
</style>
<i class="fa fa-caret-down" style="font-size:48px;color:red"></i>
<br>
<br>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md bg-info">colonne 1</div>
<div class="col-md bg-warning">colonne 2</div>
<div class="col-md bg-success">colonne 3</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-4 bg-info">col-md-4</div>
<div class="col-md-4 bg-warning">col-md-4</div>
<div class="col-md-4 bg-success">col-md-4</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-3 bg-info">col-md-3</div>
<div class="col-md-6 bg-warning">col-md-6</div>
<div class="col-md-3 bg-success">col-md-3</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-8 bg-info">col-md-8</div>
<div class="col-md-4 bg-warning">col-md-4</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-8 bg-primary ">
<div class="pb-3 ">col-md-8</div>
<div class="row">
<div class="col-md-6 bg-secondary">col-md-6</div>
<div class="col-md-6 bg-danger">col-md-6</div>
</div>
</div>
<div class="col-md-4 bg-warning">col-md-4</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md bg-info">1er élément</div>
<div class="col-md-6 bg-warning">2è élément</div>
<div class="col-md bg-success">3è élément</div>
</div>
</div>
<br>
<br>
<div class="container">
<!--La classe .mt permet de rajouter une marge externe supérieure-->
<div class="row mt-3">
<div class="col-md-3 bg-info">
.col-12 par défaut / .col-3 pour les fenêtres >= 768px
</div>
<div class="col-md-6 bg-warning">
.col-12 par défaut / .col-6 pour pour les fenêtres >= 768px
</div>
<div class="col-md-3 bg-success">
.col-12 par défaut / .col-3 pour les fenêtres >= 768px
</div>
</div>
<div class="row mt-3">
<div class="col col-md-3 bg-info">
.col (= .col-4 ici) par défaut / .col-3 à partir de 768px
</div>
<div class="col col-md-6 bg-warning">
.col (= .col-4 ici) par défaut / .col-6 à partir de 768px
</div>
<div class="col col-md-3 bg-success">
.col (= .col-4 ici) par défaut / .col-3 à partir de 768px
</div>
</div>
<div class="row mt-3">
<div class="col-md-3 col-lg-4 bg-info">
.col-12 puis .col3 dès 768px puis .col4 dès 992px
</div>
<div class="col-md-6 col-lg-4 bg-warning">
.col-12 puis .col6 dès 768px puis .col4 dès 992px
</div>
<div class="col-md-3 col-lg-4 bg-success">
.col-12 puis .col3 dès 768px puis .col4 dès 992px
</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-9 bg-info">Colonne 1 de niveau 1
<div class="row">
<div class="col bg-success">Sous colonne 1 (niveau 2)</div>
<div class="col bg-success">Sous colonne 2 (niveau 2)</div>
<div class="col bg-success">Sous colonne 3 (niveau 2)</div>
</div>
</div>
<div class="col-3 bg-warning">Colonne 2 de niveau 1</div>
</div>
</div>
<nav class='xxxx '>
<ul>
<li><a href='#profile'>Profile</a></li>
<li><a href='#message'>Messages</a></li>
<li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right '></div></a>
<ul>
<li><a href='#settings'>Account</a></li>
<li><a href='#settings'>Profile</a></li>
<li><a href='#settings'>Secruity & Privacy</a></li>
<li><a href='#settings'>Password</a></li>
<li><a href='#settings'>Notification</a></li>
</ul>
</li>
<li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
<ul>
<li><a href='#settings'>FAQ's</a></li>
<li><a href='#settings'>Submit a Ticket</a></li>
<li><a href='#settings'>Network Status</a></li>
</ul>
</li>
<li><a href='#message'>Logout</a></li>
</ul>
</nav>
<!--
<div class="container">
<div class="row">
<div class="col-md bg-info">1er élément</div>
<div class="col-md-6 bg-warning">2è élément</div>
<div class="col-md bg-success">3è élément</div>
</div>
</div>
-->
<!--
<div class="container-fluid h-100 d-flex flex-column">
<div class="row" style="background-color: grey;">
<br>
</div>
<div class="row h-100" style="background-color: yellow;">
<br>
</div>
<div class="row" style="background-color: green;">
<br>
</div>
</div>
<!--
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4 bg-primary"> First Column</div>
<div class="col-12 col-sm-6 col-lg-4">Second Column</div>
<div class="col-12 col-sm-6 col-lg-4">Third Column</div>
<div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
</div>
</div>
-->
<!--
<div class="container">
<div class="row">
<div class="col-2 bg-info">1er élément</div>
<div class="col-4 bg-warning">2è élément</div>
<div class="col-6 bg-success">3è élément</div>
</div>
</div>
-->
<!--
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-3 col-xs-1" id=”sidebar”>
</div>
<main class=”col-md-9 col-xs-11">
</main>
</div>
</div>
-->
<script>
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
</script>
</body>
</html>