bootstrap-导航条反色的导航条
生活随笔
收集整理的這篇文章主要介紹了
bootstrap-导航条反色的导航条
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
說明
通過添加?.navbar-inverse?類可以改變導航條的外觀示例
<!DOCTYPE?html> <html?lang="zh-CN"><head><meta?charset="utf-8"><meta?http-equiv="X-UA-Compatible"?content="IE=edge"><meta?name="viewport"?content="width=device-width,?initial-scale=1"><!--?上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！?--><title>Bootstrap?101?Template</title><!--?Bootstrap?--><link?rel="stylesheet"?href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"?integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"?crossorigin="anonymous"><!--?HTML5?shim?and?Respond.js?for?IE8?support?of?HTML5?elements?and?media?queries?--><!--?WARNING:?Respond.js?doesn't?work?if?you?view?the?page?via?file://?--><!--[if?lt?IE?9]><script?src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script?src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><nav?class="navbar?navbar-inverse?navbar-static-top"><div?class="container-fluid"><!--?Brand?and?toggle?get?grouped?for?better?mobile?display?--><div?class="navbar-header"><button?type="button"?class="navbar-toggle?collapsed"?data-toggle="collapse"?data-target="#bs-example-navbar-collapse-1"?aria-expanded="false"><span?class="sr-only">Toggle?navigation</span><span?class="icon-bar"></span><span?class="icon-bar"></span><span?class="icon-bar"></span></button><a?class="navbar-brand"?href="#">Brand</a></div><!--?Collect?the?nav?links,?forms,?and?other?content?for?toggling?--><div?class="collapse?navbar-collapse"?id="bs-example-navbar-collapse-1"><ul?class="nav?navbar-nav"><li?class="active"><a?href="#">Link?<span?class="sr-only">(current)</span></a></li><li><a?href="#">Link</a></li><li?class="dropdown"><a?href="#"?class="dropdown-toggle"?data-toggle="dropdown"?role="button"?aria-haspopup="true"?aria-expanded="false">Dropdown?<span?class="caret"></span></a><ul?class="dropdown-menu"><li><a?href="#">Action</a></li><li><a?href="#">Another?action</a></li><li><a?href="#">Something?else?here</a></li><li?role="separator"?class="divider"></li><li><a?href="#">Separated?link</a></li><li?role="separator"?class="divider"></li><li><a?href="#">One?more?separated?link</a></li></ul></li></ul><form?class="navbar-form?navbar-left"><div?class="form-group"><input?type="text"?class="form-control"?placeholder="Search"></div><button?type="submit"?class="btn?btn-default">Submit</button></form><ul?class="nav?navbar-nav?navbar-right"><li><a?href="#">Link</a></li><li?class="dropdown"><a?href="#"?class="dropdown-toggle"?data-toggle="dropdown"?role="button"?aria-haspopup="true"?aria-expanded="false">Dropdown?<span?class="caret"></span></a><ul?class="dropdown-menu"><li><a?href="#">Action</a></li><li><a?href="#">Another?action</a></li><li><a?href="#">Something?else?here</a></li><li?role="separator"?class="divider"></li><li><a?href="#">Separated?link</a></li></ul></li></ul></div><!--?/.navbar-collapse?--></div><!--?/.container-fluid?--></nav><!--?jQuery?(necessary?for?Bootstrap's?JavaScript?plugins)?--><script?src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!--?Include?all?compiled?plugins?(below),?or?include?individual?files?as?needed?--><script?src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"?integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"?crossorigin="anonymous"></script></body> </html>輸出
轉載于:https://blog.51cto.com/suyanzhu/1897980
總結
以上是生活随笔為你收集整理的bootstrap-导航条反色的导航条的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【架构】分布式追踪系统设计与实现
- 下一篇： 消息队列的探究