1 / 32

Bootstrap

framework bootstrap

saad18
Download Presentation

Bootstrap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 0

  2. 1 Qu’est-ce que Bootstrap? • Bootstrap est le Framework HTML, CSS et JavaScript le plus répandu pour développer un site Web réactif et adapté aux mobiles. • Il est absolument gratuit de télécharger et d’utiliser. • C’est un Framework frontal utilisé pour un développement Web plus facile et plus rapide.

  3. 2 Pourquoi utiliser Bootstrap ? • Il facilite les utilisateurs pour développer un site web réactif. • Il est compatible sur la plupart des navigateurs tels que Chrome, Firefox, Internet Explorer, Safari et Opera, etc. • Faire des sites responsive

  4. 3 Qu’est-ce qu’un site responsive? Un site Web est appelé site Web réactif, qui peut automatiquement s’ajuster pour être esthétique sur tous les appareils, des téléphones intelligents aux ordinateurs de bureau, etc.

  5. 4

  6. 5 Où obtenir Bootstrap? Télécharger Bootstrap à partir de http://www.getbootstrap.com <link rel="StyleSheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">

  7. 6

  8. 7

  9. 8 Explorer

  10. 9

  11. 10 Bootstrap couleurs primary :Bleu Secondary :gris Success :vert Danger :rouge Warning : orange Info :bleu clair light or white :blanc dark :noir

  12. 11 Bootstrap paragraphe <div class="container-fluid"><!--margen left--> <p class="text-center">text center</p> <p class="text-primary">text bleu</p> <p class="text-success">text vert</p> <p class="text-danger">text rouge</p> <p class="text-light bg-dark"> </p> <p class="text-dark">text noir</p> </div> text blanc

  13. 12 Bootstrap listes <!--liste normal--> <ul class="list-group "> <li class="list-group-item active">JAVA</li> <li class="list-group-item">CSS</li> <li class="list-group-item">HTML</li> <li class="list-group-item">BOOTSTRAP</li> </ul><br><br>

  14. 13 <!--liste numérotée--> <ul class="list-group list-group-numbered"> <li class="list-group-item ">JAVA</li> <li class="list-group-item">CSS</li> <li class="list-group-item">HTML</li> <li class="list-group-item">BOOTSTRAP</li> </ul><br><br> <!--liste horizontalement --> <ul class="list-group list-group-horizontal"> <li class="list-group-item ">JAVA</li> <li class="list-group-item">CSS</li> <li class="list-group-item">HTML</li> <li class="list-group-item">BOOTSTRAP</li> </ul>

  15. 14 Bootstrap boutons <button>btn Normale</button> <button class="btn btn-danger">rouge</button> <button class="btn btn-success">vert</button> <button class="btn btn-outline-primary">blue</button> <button class="btn btn-primary btn-lg">blue</button><!--btn-lg:grand bouton --> <button class="btn btn-danger btn-sm">rouge</button><!--btn-sm:small bouton --> <button class="btn btn-successdisabled">vert</button> <!--disabled:désactiver le bouton -->

  16. 15 Bootstrap alerts <divclass="alert alert-danger">Erreur</div> <divclass="alert alert-success">l'operation valider</div> <divclass="alert alert-warning">attention</div>

  17. 16 Bootstrap Grid system

  18. 17 • xs (pour les téléphones - écrans de moins de 768px de large) • sm (pour les tablettes - écrans d’une largeur égale ou supérieure à 768 px) • md (pour les petits ordinateurs portables - écrans égaux ou supérieurs à 992px de large) • lg (pour ordinateurs portables et de bureau - écrans égaux ou supérieurs à 1200px de large) <div class="row"> <div class=" col-md-6 " > <p>paragraphe 1</p> </div> <div class= " col-md-6 " > <p>paragraphe 2</p> </div> </div>

  19. 18 Bootstrap images <img src="image1.jpg" class="img-fluid"> <br><br><br><!--width 100%--> <img src="image1.jpg" class="img-thumbnail"> <br><br><br><!--Cadre--> <img src="image1.jpg" class="rounded mx-auto d-block"> <br><br><br><!--center--> <img src="image1.jpg" class="roundedfloat-end"> <br><br><br><!--desous-->

  20. 19 Bootstrap formes <div class="container-fluid"> <form class="form-group"> email:<input type="email" class="formcontrol"><br><br> password:<input type="password" class="form-control"> </form></div>

  21. 20 Bootstrap checkbox <div class="form-check"> <input class="form-check-input" type="checkbox" > TS </div> <div class="form-check"> <input class="form-check-input" type="checkbox" > Master </div> --switch : <div class="form-switch"> <input class="form-check-input" type="checkbox" > T </div> <div class="form-switch"> <input class="form-check-input" type="checkbox" > TS </div>

  22. 21 Bootstrap Radiobutton <div class="form-check"> <input class="form-check-input" type="radio" name="text1">M</div> <div class="form-check"> <input class="form-check-input" type="radio" name="text1" >F</div>

  23. 22 Bootstrap cards <div class="card" style="width: 16rem;"> <img src="pc.jpg" class="card-img-top"> <div class="card-body"> <h5 class="card-title">PC HP</h5> <p class="card-text">text.....................</p> <a href="#" class="btn btn-info">acheter</a> </div> </div>

  24. 23 Bootstrap Tableaux <table class="table table-hover"><!--tableaux--> <tr class="table-danger"><!-- couleur du tableaux--> <th >produit</th> <th>prix</th> </tr> <tr class="table-dark"> <td>clavier</td> <td>25 dh</td> </tr> <tr> <td>Souris</td> <td>50 dh</td> </tr> <tr> <td>cable</td> <td>10 dh</td> </tr> </table>

  25. 24 <hr> <table class="table table-striped table-bordered"><!--table-bordered:racine de les lignes--><!--table-borderless:Supprimer la racine de la ligne et de la colonne--> <tr> <th >produit</th> <th>prix</th> </tr> <tr> <td>clavier</td> <td>25 dh</td> </tr> <tr> <td>Souris</td> <td>50 dh</td> </tr> <tr> <td>cable</td> <td>10 dh</td> </tr> </table> --table-sm : tableau small -- table-responsive :scrole

  26. 25 Bootstrap Badges <h1>Example<span class="badge bg-danger">New</span></h1> <button type="button" class="btn btn-primary position-relative"> message <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 10</span> </button>

  27. 26 Bootstrap Navbar <nav class="navbarnavbar-expand-lg navbar-light bg-info"> <div class="container-fluid"> <a class="navbar-brand" href="pratique2.html">page1</a> <a class="navbar-brand" href="pratique2.html">page2</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

  28. 27 <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <form class="d-flex">

  29. 28 Étapes de recherche les styles de bootstrap

  30. 29

  31. 30 chaînes à apprendre bootstrap • chaînes arabic: • Développement Digital OFPPT: Lien: Bootstrap Cours 1 : Introduction + Get Started دورة بالدارجة لتعلم bootstrap - YouTube • Web Coding: lien :#web_coding #bootstrap4_darija 1# tutorial Bootstrap4 introduction Darija – YouTube • Chaînes anglaises: • ARCTutorials: lien :Bootstrap 5 Tutorial For Beginners #1 - Introduction - YouTube

  32. 31 Merci de votre patience

More Related