Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
MDPH
/
Work
:
ex02.html
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!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>