标签：文字 顶部 here Link Something 固定 action link 导航
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link rel="stylesheet" href="./css/normalize.css"> 9 <link rel="stylesheet" href="./css/bootstrap.min.css"> 10 </head> 11 12 <body> 13 <!-- navbar-fixed-top 静止在顶部 --> 14 <nav class="navbar navbar-default navbar-fixed-top"> 15 <div class="container-fluid"> 16 <!-- Brand and toggle get grouped for better mobile display --> 17 <div class="navbar-header"> 18 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 19 data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 20 <span class="sr-only">Toggle navigation</span> 21 <span class="icon-bar"></span> 22 <span class="icon-bar"></span> 23 <span class="icon-bar"></span> 24 </button> 25 <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-heart text-danger"></span></a> 26 </div> 27 28 <!-- Collect the nav links, forms, and other content for toggling --> 29 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 30 <ul class="nav navbar-nav"> 31 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 32 <li><a href="#">Link</a></li> 33 <li class="dropdown"> 34 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" 35 aria-expanded="false">Dropdown <span class="caret"></span></a> 36 <ul class="dropdown-menu"> 37 <li><a href="#">Action</a></li> 38 <li><a href="#">Another action</a></li> 39 <li><a href="#">Something else here</a></li> 40 <li role="separator" class="divider"></li> 41 <li><a href="#">Separated link</a></li> 42 <li role="separator" class="divider"></li> 43 <li><a href="#">One more separated link</a></li> 44 </ul> 45 </li> 46 </ul> 47 <form class="navbar-form navbar-left"> 48 <div class="form-group"> 49 <input type="text" class="form-control" placeholder="Search"> 50 </div> 51 <button type="submit" class="btn btn-default">Submit</button> 52 </form> 53 <ul class="nav navbar-nav navbar-right"> 54 <li><a href="#">Link</a></li> 55 <li class="dropdown"> 56 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" 57 aria-expanded="false">Dropdown <span class="caret"></span></a> 58 <ul class="dropdown-menu"> 59 <li><a href="#">Action</a></li> 60 <li><a href="#">Another action</a></li> 61 <li><a href="#">Something else here</a></li> 62 <li role="separator" class="divider"></li> 63 <li><a href="#">Separated link</a></li> 64 </ul> 65 </li> 66 </ul> 67 </div><!-- /.navbar-collapse --> 68 </div><!-- /.container-fluid --> 69 </nav> 70 <div class="content" style="margin: 51px;height: 800px;"> 71 这是文字内容这是文字内容这是文字内容这是文字内容 72 </div> 73 74 <script src="./js/jquery.min.js"></script> 75 <script src="./js/bootstrap.min.js"></script> 76 </body> 77 78 </html>
静止在顶部 class=“navbar-fixed-top”
标签：文字,顶部,here,Link,Something,固定,action,link,导航 来源： https://www.cnblogs.com/lvzhnehan/p/15655446.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。