bootstrap-导航条固定在顶部

2024-11-16 技术教程

说明

.navbar-fixed-top导航条固定在顶部

示例

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Bootstrap101Template</title><linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u"crossorigin="anonymous"></head><body><divclass="container"><navclass="navbarnavbar-defaultnavbar-fixed-top"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="sr-only">Togglenavigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="navnavbar-nav"><liclass="active"><ahref="#">Link<spanclass="sr-only">(current)</span></a></li><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown<spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Anotheraction</a></li><li><ahref="#">Somethingelsehere</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separatedlink</a></li><lirole="separator"class="divider"></li><li><ahref="#">Onemoreseparatedlink</a></li></ul></li></ul><formclass="navbar-formnavbar-left"><divclass="form-group"><inputtype="text"class="form-control"placeholder="Search"></div><buttontype="submit"class="btnbtn-default">Submit</button></form><ulclass="navnavbar-navnavbar-right"><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown<spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Anotheraction</a></li><li><ahref="#">Somethingelsehere</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separatedlink</a></li></ul></li></ul></div></div></nav></div><scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><scriptsrc="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></body></html>

输出