zoukankan      html  css  js  c++  java
  • Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站)

    导航条

    导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

    以下代码和注释是我学习过程中的理解

    (注意 引入必要的.css 和 .js查看)

      1 <!DOCTYPE html>
      2 <html lang="zh-CN">
      3   <head>
      4     <meta charset="utf-8">
      5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6     <meta name="viewport" content="width=device-width, initial-scale=1">
      7     <title>Bootstrap 导航条模板</title>
      8     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
      9     <!--[if lt IE 9]>
     10       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     11       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
     12     <![endif]-->
     13   </head>
     14   <body>
     15 
     16     <nav class="navbar navbar-default">
     17       <!-- <div class="container-fluid"> -->
     18       <!-- 将 100% 宽度的布局转换为固定宽度的栅格布局。 -->
     19       <div class="container">
     20 
     21         <!-- 品牌商标 和  获得更好的移动分组显示-->
     22         <!-- .navbar-header元素里放了一个button按钮和一个a链接
     23             先说简单的a链接,用于放置网页logo,导航栏上通常都需要
     24             button按钮 是一个开关,当在移动设备上显示是,导航条一行显示不完,导航具体内容部分变会崩塌原有的显示形式,收集为多行显示,并隐藏,使用button 按钮可控制其(显示/隐藏)
     25          -->
     26         <!-- Brand and toggle get grouped for better mobile display -->
     27 
     28 <!-- 以下导航头部 -->
     29         <div class="navbar-header">
     30           <!-- 当屏幕缩小时 id为bs-example-navbar-collapse-1的元素隐藏,使用下面这个button 调出 #bs-example-navbar-collapse-1元素 -->
     31           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
     32             <!-- <span class="sr-only">Toggle navigation</span> -->
     33 
     34             <!-- 下面三个span 只是用来显示 三条 横线样式,可以清除注释看看 -->
     35             <!--  <span class="icon-bar"></span>
     36             <span class="icon-bar"></span>
     37             <span class="icon-bar"></span> -->
     38             更多
     39           </button>
     40 
     41           <!-- 将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补(padding)和高度(height),你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。 -->
     42           <!-- 放置商标的地方 -->
     43           <a class="navbar-brand" href="#">Brand</a>
     44           <!-- a链接里当然也可以图片 或 字体图标 -->
     45         </div>
     46 
     47 
     48 <!-- 以下为导航具体内容,身体部分 -->
     49 
     50         <!-- 收集导航链接、表单和其他内容 方便移动设备时。收集隐藏 -->
     51         <!-- Collect the nav links, forms, and other content for toggling -->
     52         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     53         <!-- 导航条的内容里有五部分  根据需求更改-->
     54         <!-- 第一部分 -->
     55           <ul class="nav navbar-nav">
     56             <li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li>
     57             <li><a href="#">链接</a></li>
     58             <li class="dropdown">
     59               <!-- 用来控制 下拉列表显示/隐藏 -->
     60               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉 <span class="caret"></span></a>
     61               <ul class="dropdown-menu">
     62                 <li><a href="#">一个行为</a></li>
     63                 <li><a href="#">另一个行为</a></li>
     64                 <li><a href="#">其他的行为</a></li>
     65                 <!-- .divider 分隔器 与上面分隔一条线 -->
     66                 <li role="separator" class="divider"></li>
     67                 <li><a href="#">分隔开的链接</a></li>
     68                 <li role="separator" class="divider"></li>
     69                 <li><a href="#">另一个分隔开的链接</a></li>
     70               </ul>
     71             </li>
     72           </ul>
     73           
     74           <!-- 第二部分 一个文本 -->
     75           <!-- 把文本包裹在 .navbar-text中时,为了有正确的行距和颜色,通常使用 <p> 标签。 -->
     76           <p class="navbar-text">文本内容</p>
     77 
     78           <!-- 第三部分 是一个表单-->
     79           <!-- 将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。 -->
     80           <form class="navbar-form navbar-left" role="search">
     81             <div class="form-group">
     82               <input type="text" class="form-control" placeholder="请输入内容">
     83             </div>
     84             <button type="submit" class="btn btn-default">提交</button>
     85           </form>
     86 
     87           <!-- 第四部分是一个独立按钮 -->
     88           <!-- 对于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法,例如, aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有,屏幕阅读器将使用 placeholder 属性(如果这个属性存在的话),但是请注意,使用 placeholder 代替其他识别标签的方式是不推荐的。 -->
     89           <button type="button" class="btn btn-default navbar-btn">独立按钮</button>
     90 
     91           <!-- 第五部分 -->
     92           <!-- 或许你希望在标准的导航组件之外添加标准链接,那么,使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。 -->
     93           <p class="navbar-text">正常文本<a href="#" class="navbar-link"> 非导航链接</a></p>
     94           
     95          
     96 
     97         </div><!-- /.navbar-collapse -->
     98 
     99       </div><!-- /.container-fluid -->
    100     </nav>
    101 
    102 
    103 
    104     <script src="lib/jquery/jquery.js"></script>
    105     <script src="lib/bootstrap/js/bootstrap.js"></script>
    106   </body>
    107 </html>

    通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的 <ul> 标签里。

    这些类是 .pull-left 和 .pull-right 的 mixin 版本,但是他们被限定在了媒体查询(media query)中,这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

    向右侧对齐多个组件

    导航条目前不支持多个 .navbar-right 类。为了让内容之间有合适的空隙,我们为最后一个 .navbar-right 元素使用负边距(margin)。如果有多个元素使用这个类,它们的边距(margin)将不能按照你的预期正常展现。

    我们将在 v4 版本中重写这个组件时重新审视这个功能。

    添加 .navbar-fixed-top 类可以让导航条固定在顶部,还可包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。

    需要为 body 元素设置内补(padding)

    这个固定的导航条会遮住页面上的其它内容,除非你给 <body> 元素底部设置了 padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是 50px。

    body { padding-top: 70px; }
    1 <nav class="navbar navbar-default navbar-fixed-top">
    2   <div class="container">
    3     ...
    4   </div>
    5 </nav>
     

    添加 .navbar-fixed-bottom 类可以让导航条固定在底部,并且还可以包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。

    需要为 body 元素设置内补(padding)

    这个固定的导航条会遮住页面上的其它内容,除非你给 <body> 元素底部设置了 padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是 50px。

    body { padding-bottom: 70px; }
    1 <nav class="navbar navbar-default navbar-fixed-bottom">
    2   <div class="container">
    3     ...
    4   </div>
    5 </nav>
     

    通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条,它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器,用于将导航条居中对齐并在两侧添加内补(padding)。

    通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条,它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器,用于将导航条居中对齐并在两侧添加内补(padding)。to center and pad navbar content.

    1 <nav class="navbar navbar-default navbar-static-top">
    2   <div class="container">
    3     ...
    4   </div>
    5 </nav>

    通过添加 .navbar-inverse 类可以改变导航条的外观。

    1 <nav class="navbar navbar-inverse">
    2   ...
    3 </nav>
     
  • 相关阅读:
    如何完全删除Linux应用
    IP地址获取工具类
    日期处理工具类
    Cookies的工具类
    权限管理系统学习笔记
    SpringBoot中JPA的一些基本操作
    Mysql和Java的数据类型对应表
    MySQL中的tinyint
    幂等性浅谈
    链接
  • 原文地址:https://www.cnblogs.com/yang-C-J/p/6171099.html
Copyright © 2011-2022 走看看