共计 1383 个字符，预计需要花费 4 分钟才能阅读完成。
Bootstrap4 的下拉菜单我感觉不难看，然而挺好用，所以我拿来丑化了一下用在了我的项目中。
丑化前
https://www.runoob.com/try/tr…
丑化后
代码
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bootstrap dropdown</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> | |
| <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> | |
| <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> | |
| <style type="text/css"> | |
| body{background: #eee;} | |
| #app{ | |
| width: 200px; | |
| margin:100px auto; | |
| } | |
| #app .dropdown .dropdown-btn{ | |
| border:none; | |
| outline: none; | |
| border-radius: 5px; | |
| font-size: 15px; | |
| background: #fff; | |
| color: #666; | |
| } | |
| #app .dropdown .dropdown-menu{ | |
| background: #fff; | |
| border: none; | |
| min-width:100px; | |
| } | |
| #app .dropdown .dropdown-menu .dropdown-item:hover{ | |
| background: #f8f9fa; | |
| color: #666; | |
| } | |
| #app .dropdown .dropdown-menu .dropdown-item:active{ | |
| background: #f8f9fa; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="dropdown"> | |
| <button type="button" class="dropdown-btn" data-toggle="dropdown">•••</button> | |
| <div class="dropdown-menu"> | |
| <a class="dropdown-item" href="#">Link 1</a> | |
| <a class="dropdown-item" href="#">Link 2</a> | |
| <a class="dropdown-item" href="#">Link 3</a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
作者
TANKING
如果大家还想丑化 Bootstrap 的一些控件，能够找我（请我喝杯咖啡：WeChat:sansure2016）
正文完
