Bootstrap

Bootstrap自适应导航栏

导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏

1、向 <nav> 标签添加 class .navbar、.navbar-default。
2、向上面的元素添加 role="navigation"，有助于增加可访问性。
3、向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大
一号
4、为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

[html]  view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset = "utf-8">  
  5.     <title>demo</title>  
  6.     <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">  
  7.     <script type="text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"></script>  
  8.     <script type="text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <nav class = "navbar navbar-default" role = "navigation">  
  12.         <div class="navbar-header">  
  13.             <a class="navbar-brand">hello</a>  
  14.         </div>  
  15.         <ul class="nav navbar-nav">  
  16.             <li class="active"><a href="#">网站首页</a></li>  
  17.             <li><a href="#">JS开发</a></li>  
  18.             <li><a href="#">html</a></li>  
  19.             <li><a href="#">jquery</a></li>  
  20.               
  21.             <li class="dropdown">  
  22.                 <a href="#" class="dropdown-toggle" data-toggle = "dropdown">前端学习 <span class="caret"></span></a>  
  23.   
  24.                 <ul class="dropdown-menu">  
  25.                     <li><a href="#">html+css学习</a></li>  
  26.                     <li><a href="#">javascript学习</a></li>  
  27.                     <li><a href="#">jquery学习</a></li>  
  28.                     <li class="divider"></li>  
  29.                     <li><a href="#">bootstrap学习</a></li>  
  30.                     <li><a href="#">less/sass学习</a></li>  
  31.                     <li><a href="#">angularJS学习</a></li>  
  32.                 </ul>  
  33.             </li>  
  34.         </ul>  
  35.     </nav>  
  36. </body>  
  37. </html>  



响应式的导航栏

1、将要折叠的内容包含在带有class .collapse和.navbar-collspae的<div>中。
2、折叠起来的导航栏是带有class .navbar-toggle以及data-toggle和data-target两个属性的按钮，data-toggle用于告诉javascript
需要对按钮做什么，此处是折叠：collapse，data-target用于指示折叠哪个元素，此处是1中的导航菜单，data-target的属性值是要
指定的元素的id。
3、button中使用带有class .icon-bar的<span>创建所谓的汉堡按钮（就是按钮中多了几个横线）

[html]  view plain copy print ?
  1. <body>  
  2.     <nav class = "navbar navbar-default" role = "navigation">  
  3.         <div class="navbar-header">  
  4.             <button type="button" class="navbar-toggle" data-toggle = "collapse"  data-target = "#target-menu">  
  5.                 <span class="sr-only">qieh</span>  
  6.                 <span class="icon-bar"></span>  
  7.                 <span class="icon-bar"></span>  
  8.                 <span class="icon-bar"></span>  
  9.             </button>  
  10.             <a class="navbar-brand">hello</a>  
  11.         </div>  
  12.         <div class="collapse navbar-collapse" id = "target-menu">  
  13.             <ul class="nav navbar-nav">  
  14.                 <li class="active"><a href="#">网站首页</a></li>  
  15.                 <li><a href="#">JS开发</a></li>  
  16.                 <li><a href="#">html</a></li>  
  17.                 <li><a href="#">jquery</a></li>  
  18.   
  19.                 <li class="dropdown">  
  20.                     <a href="#" class="dropdown-toggle" data-toggle = "dropdown">前端学习 <span class="caret"></span></a>  
  21.                     <ul class="dropdown-menu">  
  22.                         <li><a href="#">html+css学习</a></li>  
  23.                         <li><a href="#">javascript学习</a></li>  
  24.                         <li><a href="#">jquery学习</a></li>  
  25. <pre name="code" class="html">                        <li class="divider"></li>                          
<li><a href="#">bootstrap学习</a></li> <li><a href="#">less/sass学习</a></li> <li><a href="#">angularJS学习</a></li> </ul> </li> </ul> </div> </nav></body> 

 

  
 

 
 

 当屏幕的宽度大于等于768px时，显示与默认的导航栏相同，而屏幕宽度小于768px时，显示效果如下：
 
 
 

 注意:data-target的属性值其实是： #+id，如果只写成id，点击折叠按钮是没有任何反应的，另外，需要引入折叠插件，或者因为
 

 bootstrap.min.js和jquery.js
 
 

 
 

 导航栏中的表单
 
导航中的form表单，需要使用class navbar-form，这确保了表单垂直对齐和在较窄的视口中的折叠行为。使用对齐方式选型来决定 
 

 
 

 导航栏的内容放置在哪里，此处使用了navbar-right，居于右侧（如果使用navbar-left那么就会居于左侧，默认是左侧）。
 
 

 
 
 

 
 

 
 
 
  
 
   [html]  
   view plain 
   copy 
   print 
   ? 
   
 
   
 
  
 
 
 
 
  1.  <body>  
  2.      <nav class = "navbar navbar-default" role = "navigation">  
  3.          <div class="navbar-header">             
  4.              <a class="navbar-brand">hello</a>  
  5.          </div>  
  6.          <div>  
  7.              <ul class="nav navbar-nav">  
  8.                  <li class="active"><a href="#">网站首页</a></li>  
  9.                  <li><a href="#">JS开发</a></li>  
  10.                  <li><a href="#">html</a></li>  
  11.                  <li><a href="#">jquery</a></li>  
  12.              </ul>  
  13.              <form class="navbar-form navbar-right" role="search">  
  14.                  <div class="form-group">  
  15.                      <input type="text" class="form-control" placeholder="Search">  
  16.                  </div>  
  17.                  <button type="submit" class="btn btn-default">提交</button>  
  18.              </form>   
  19.          </div>  
  20.      </nav>  
  21.  </body>  
 

 

 

 
 

 
 
 

 
 
 

 
 

 导航栏中的按钮
 
不在 <form> 中的 <button>或者a 元素。通过 
添加class  
.navbar-btn，使得按钮在导航栏上垂直居中 

 

 
 

 
 
 

 
 

 
 
 
  
 
   [html]  
   view plain 
   copy 
   print 
   ? 
   
 
   
 
  
 
 
 
 
  1.  <body>  
  2.      <nav class = "navbar navbar-default" role = "navigation">  
  3.          <div class="navbar-header">             
  4.              <a class="navbar-brand">hello</a>  
  5.          </div>  
  6.          <div>  
  7.              <ul class="nav navbar-nav">  
  8.                  <li class="active"><a href="#">网站首页</a></li>  
  9.                  <li><a href="#">JS开发</a></li>  
  10.                  <li><a href="#">html</a></li>  
  11.                  <li><a href="#">jquery</a></li>  
  12.              </ul>  
  13.              <form class="navbar-form navbar-right" role="search">  
  14.                  <div class="form-group">  
  15.                      <input type="text" class="form-control" placeholder="Search">  
  16.                  </div>  
  17.                  <button type="submit" class="btn btn-default">提交</button>  
  18.              </form>   
  19.              <button type="button" class="btn btn-primary navbar-btn">button按钮</button>  
  20.              <a href = "#" class="btn btn-warning navbar-btn">链接按钮</a>  
  21.          </div>  
  22.      </nav>  
  23.  </body>  
 

 

 

 
 

 
 
 

 
 

 导航栏中的文本
 

 
 使用 class .navbar-text，确保适当的前导和颜色。 

 

 

 
 

 
 

 
 
 
  
 
   [html]  
   view plain 
   copy 
   print 
   ? 
   
 
   
 
  
 
 
 
 
  1.  <body>  
  2.      <nav class = "navbar navbar-default" role = "navigation">  
  3.          <div class="navbar-header">             
  4.              <a class="navbar-brand">hello</a>  
  5.          </div>  
  6.          <div>  
  7.              <ul class="nav navbar-nav">  
  8.                  <li class="active"><a href="#">网站首页</a></li>  
  9.                  <li><a href="#">JS开发</a></li>  
  10.                  <li><a href="#">html</a></li>  
  11.                  <li><a href="#">jquery</a></li>  
  12.              </ul>  
  13.              <p class="navbar-text">导航栏中文字  
  14.                  <a href="#" class="navbar-link">链接</a>  
  15.              </p>  
  16.          </div>  
  17.      </nav>  
  18.  </body>  
 

 

 

 
 

 
 
 

 
 

 非导航链接
 

 
 使用 class navbar-link 为默认的和倒转的导航栏选项添加适当的颜色，因为默认的a标签的样式可能与导航栏的样式不协调 

 

 

 
 

 
 

 
 
 
  
 
   [html]  
   view plain 
   copy 
   print 
   ? 
   
 
   
 
  
 
 
 
 
  1.  <body>  
  2.      <nav class = "navbar navbar-default  navbar-inverse" role = "navigation">  
  3.          <div class="navbar-header">             
  4.              <a class="navbar-brand">hello</a>  
  5.          </div>  
  6.          <div>  
  7.              <ul class="nav navbar-nav">  
  8.                  <li class="active"><a href="#">网站首页</a></li>  
  9.                  <li><a href="#">JS开发</a></li>  
  10.                  <li><a href="#">html</a></li>  
  11.                  <li><a href="#">jquery</a></li>  
  12.              </ul>  
  13.              <p class="navbar-text">导航栏中文字  
  14.                  <a href="#" class="navbar-link">链接</a>  
  15.              </p>  
  16.          </div>  
  17.      </nav>  
  18.      <div style="background-color:#CCCCCC;height:1000px;">          
  19.      </div>  
  20.      <div style="background-color:#BFFF70;height:200px;">          
  21.      </div>  
  22.  </body>  
 

 

 

 
 

 
 

 固定到顶部
 
如果想要让导航栏固定在页面的顶部，向  
.navbar class 添加 class .navbar-fixed-top。为了防止导航栏与页面主体中的其他内容 
 

 
 

 的顶部相交错，需要向 <body> 标签添加内边距，内边距的值至少是导航栏的高度。
 
 

 
 

 
 
 
  
 
   [html]  
   view plain 
   copy 
   print 
   ? 
   
 
   
 
  
 
 
 
 
  1.  <body>  
  2.      <nav class = "navbar navbar-default navbar-static-top" role = "navigation">  
  3.          <div class="navbar-header">             
  4.              <a class="navbar-brand">hello</a>  
  5.          </div>  
  6.          <div>  
  7.              <ul class="nav navbar-nav">  
  8.                  <li class="active"><a href="#">网站首页</a></li>  
  9.                  <li><a href="#">JS开发</a></li>  
  10.                  <li><a href="#">html</a></li>  
  11.                  <li><a href="#">jquery</a></li>  
  12.              </ul>  
  13.              <p class="navbar-text">导航栏中文字  
  14.                  <a href="#" class="navbar-link">链接</a>  
  15.              </p>  
  16.          </div>  
  17.      </nav>  
  18.      <div style="background-color:#CCCCCC;height:1000px;">          
  19.      </div>  
  20.      <div style="background-color:#BFFF70;height:200px;">          
  21.      </div>  
  22.  </body>  
 

 

 
为了能够看出效果，此处添加了两个有背景色的div。 

 

 
 

 
 
 

 
 
 

 
 

 
 固定到底部，只需要把class .navbar-fixed-top换成.navbar-fixed-bottom即可，不需要在body中添加内边距。 

 

 
  
 
对于给nav添加 .navbar-static-top class，实在是没有看出有什么作用，开始以为是能够创建一个浮动的导航条的。
 

 

 反色的导航栏
 
向  
.navbar class 添加 .navbar-inverse class，创建一个带有黑色背景白色文本的导航栏 
 

 
 

 
 

 
 
 
  
 
   [html]  
   view plain 
   copy 
   print 
   ? 
   
 
   
 
  
 
 
 
 
  1.  <body>  
  2.      <nav class = "navbar navbar-default  navbar-inverse" role = "navigation">  
  3.          <div class="navbar-header">             
  4.              <a class="navbar-brand">hello</a>  
  5.          </div>  
  6.          <div>  
  7.              <ul class="nav navbar-nav">  
  8.                  <li class="active"><a href="#">网站首页</a></li>  
  9.                  <li><a href="#">JS开发</a></li>  
  10.                  <li><a href="#">html</a></li>  
  11.                  <li><a href="#">jquery</a></li>  
  12.              </ul>  
  13.              <p class="navbar-text">导航栏中文字  
  14.                  <a href="#" class="navbar-link">链接</a>  
  15.              </p>  
  16.          </div>  
  17.      </nav>  
  18.      <div style="background-color:#CCCCCC;height:1000px;">          
  19.      </div>  
  20.      <div style="background-color:#BFFF70;height:200px;">          
  21.      </div>  
  22.  </body>  
 

 

 

                
      


    


    

      




    

      
悦读

      
道可道，非常道；名可名，非常名。
无名，天地之始，有名，万物之母。
故常无欲，以观其妙，常有欲，以观其徼。
此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

    


    
    
    
    
    
    
    
    

    
    




  
    最新收录
  
  

    
    
    
      
第五章springboot实现web的常用功能

    
    
    
      
基于python+flask框架的网上书城（开题+程序+论文） 计算机毕设

    
    
    
      
20221403郑骁恒 实验3-1

    
    
    
      
GESP 一级至六级 样题与真题集（2022.11.11）

    
    
    
      
对AttributeSet和defStyle的理解

    
    
    
      
昇思25天学习打卡营第4天 | 数据变换 Transforms

    
    
    
      
蓝桥杯嵌入式学习笔记(7):ADC程序设计

    
    
    
      
鸿蒙网络编程系列46-仓颉版Web组件加载网页的三种方式

    
    
    
      
腾讯qlv格式转换mp4工具（极速无损免费版）

    
    
    
      
Oracle数据库常用SQL语句查询

    
    

  




    
   
  







  









  












;