Advertisement
Guest User

Untitled

a guest
Mar 24th, 2017
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.67 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Grupo de botões</title>
  7.  
  8. <link rel="stylesheet" type="text/css" href="../bootstrap.min.css">
  9. <script type="text/javascript" href ="../jquery-3.1.1.min.js"></script>
  10. <script type="text/javascript" href ="../bootstrap.min.js"></script>
  11.  
  12. </head>
  13. <body>
  14.  
  15. <div class="container">
  16.  
  17. <h1><small>Menu Dropdown <span class="caret"></span></small></h1><hr>
  18.  
  19. <!--1º passo: criar uma div com a classe dropdown
  20. 2º passo: criar um button que contenha o dropdown-toggle
  21. 2.5º passo: o data-toggle indica quem vai fazer funcionar, no caso, seria o dropdown da div principal.
  22. 3º passo: para adicionar a seta p/ baixo, após o nome, coloque a tag span com a class caret
  23. 4º passo: criar um ul com a classe dropdown-menu, para colocar as opções-->
  24.  
  25. <div class="dropdown">
  26. <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
  27. Sobre <span class="caret"></span></button>
  28.  
  29. <ul class="dropdown-menu">
  30. <li><a href="#">PHP</a></li>
  31. <li><a href="#">HTML</a></li>
  32. <li><a href="#">CSS</a></li>
  33.  
  34. </ul>
  35. </div>
  36.  
  37. <!--<div class="dropdown">
  38. <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Escolha <span class="caret"></span></button>
  39. <ul class="dropdown-menu">
  40. <li class="dropdown-header">Linguagens a serem aprendidas:</li>
  41. <li><a href="#">PHP</a></li>
  42. <li class="disabled"><a href="#">HTML</a></li>
  43. <li><a href="#">CSS</a></li>
  44. <li class="divider"></li>
  45. <li><a href="#">Javascript</a></li>
  46. </ul>
  47. </div>-->
  48.  
  49. </div>
  50.  
  51. </body>
  52. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement