Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
問題原因
解決方案
順便記錄一下使用
效果圖
HTML
CSS
目錄
問題原因
兩個js文件沖突/沒有引入指定的js文件
我們不能同時引入這兩個js只能引入其一，同時引入會使得部分功能失效
解決方案
注意我們使用下拉菜單時使用的js是這個
bootstrap.bundle.js并不是
bootstrap.js如圖是正確的使用
順便記錄一下使用
效果圖
下圖提現了響應式
HTML
文件名 index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../js/jquery-3.5.1.js"></script><link rel="stylesheet" href="../bootstrap/css/bootstrap.css"><script src="../bootstrap/js/bootstrap.bundle.js"></script><!-- 防止bootstrap覆蓋自己的樣式--><link rel="stylesheet" href="../css/index.css"></head> <body> <img class="img_" src="../res/img/blog.jpg" alt="未加載."><!--使用container-fluid盡量撐起行 class="container-fluid"--> <div><!--使用bg(background)來調整背景顏色--><nav class="navbar navbar-expand-lg navbar-light bg-dark "><!-- 使用offset設置行中塊的橫向位置（默認1行12塊）從左到右--><a class="navbar-brand text-white-50 offset-1 " href="#">TMY Bolg</a><!-- 實現響應式的關鍵 通過綁定navbarSupportedContent（被擠壓內容塊的id）在頁面被擠壓時，通過js改變頁面布局 --><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><!-- 被擠壓時顯示出來的圖標--><span class="navbar-toggler-icon bg-success"></span></button><!-- 使用ml(margin-left)來調整間距--><div class="collapse navbar-collapse ml-5" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item ml-4"><!-- 使用text-color設置文本顏色--><a class="nav-link text-white-50 " href="#">我的首頁</a></li><li class="nav-item ml-4"><a class="nav-link text-white-50" href="#">賬號管理</a></li><li class="nav-item dropdown ml-4"><a class="nav-link dropdown-toggle text-white-50" href="#" id="navbarDropdown" role="button"data-toggle="dropdown" aria-expanded="false">賬號管理</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">修羅</a><a class="dropdown-item" href="#">無極</a><a class="dropdown-item" href="#">魁拔</a></div></li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="關鍵字" aria-label="Search"><button class="btn btn-outline-success bg-light text-dark my-2 my-sm-0" type="submit">搜索</button></form></div></nav> </div><!--這里設置position-absolute才能使得圖片在最下面--> <!--使用柵欄布局 先重寫container-fluid 使得 沒有左右邊距--> <div class="container-fluid bg-light fixed-bottom row h-75 position-absolute" id="contentid"> <!-- 使用col-sm布局左右兩列 mt-4表示距離頁面上的標簽4格--><div class="col-sm mt-4"> <!-- 使用彈性盒子 d-flex(display-flex) flex-column定義方向為列（盒子內的標簽會豎直排列）--><div class="d-flex flex-column"> <!-- img 定義了logo class用于設置寬高圓邊程度 img-thumbnail 設置邊框 ml-auto mr-auto使其趨于中心 --><img class="logo img-thumbnail float-left ml-auto mr-auto" src="../res/img/Java-Logo.jpg"><h2 class="text-dark w-100 text-center">purus molestie</h2><span class="text-dark w-75 text-center ml-auto mr-auto mt-2 mb-2"> Turpis inceptos, neque vel dolor.Mauris laoreet.Purus etorci in sollicitudin,acm quam,iaculis lacus. </span><button class="btn border-dark w-25 ml-auto mr-auto">訪問<span STYLE="font-size: 8px">>></span></button></div></div><div class="col-sm mt-4"><div class="d-flex flex-column bd-highlight"><img class="logo img-thumbnail ml-auto mr-auto" src="../res/img/Java-Logo.jpg"><h2 class="text-dark w-100 text-center">nullam molestie</h2><span class="text-dark w-75 ml-auto mr-auto text-center mt-2 mb-2">Turpis inceptos,neque vel dolor. Mauris laoreet, Purus et.orci in sollicitudin. </span><button class="btn border-dark w-25 ml-auto mr-auto mt-4">訪問<span STYLE="font-size: 8px">>></span></button></div></div> </div></body></html>CSS
文件名index.css
.img_{position:absolute;height: 100%;width: 100%;/*設置在最底層*/z-index: -2;background: rgba(255,255,255,0.1); } .logo{width: 200px;height: 200px;border-radius: 200px; } .container-fluid{padding-left: 0;padding-right: 0;margin-left: 0;margin-right: 0;margin-top: 60px; } #contentid{z-index: -1; }目錄
總結
以上是生活随笔為你收集整理的Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何做好虾皮跨境电商？关于Shopee店
- 下一篇： 教你在CorelDRAW中制作水印