组件（三）

时间：2019-02-16 11:50:20 阅读：159 评论：0 收藏：0 [点我收藏+]

导航条

导航条：务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

<nav class="navbar navbar-default">  navbar-default:灰色   navbar-inverse:反色
      <div class="container-fluid">
           <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div id="mynavbar" class="collapse navbar-collapse">
                 <ul class="nav navbar-nav">
                     <li>
                         <a href="#">起步</a>
                     </li>
                     <li>
                         <a href="#">全局CSS样式</a>
                     </li>
                     <li>
                         <a href="#">组件</a>
                     </li>
                     <li>
                          <a href="#">javascript插件</a>
                     </li>
                     <li>
                          <a href="#">定制</a>
                     </li>
                     <li>
                          <a href="#">网站实例</a>
                     </li>
               </ul>
               <ul class="nav navbar-nav navbar-right">
                   <li>
                         <a href="#">Bootstrap中文网</a>
                   </li>
                </ul>
           </div>
      </div>
 </nav>

截图：
PC端：
技术图片

手机端：
技术图片

品牌图标：将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。

<nav class="navbar navbar-default">  navbar-default:灰色   navbar-inverse:反色
      <div class="container-fluid">
           <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="img/heroplane0.png"  height="100%"/>
                </a>
            </div>
            <div id="mynavbar" class="collapse navbar-collapse">
                 <ul class="nav navbar-nav">
                     <li>
                         <a href="#">起步</a>
                     </li>
                     <li>
                         <a href="#">全局CSS样式</a>
                     </li>
                     <li>
                         <a href="#">组件</a>
                     </li>
                     <li>
                          <a href="#">javascript插件</a>
                     </li>
                     <li>
                          <a href="#">定制</a>
                     </li>
                     <li>
                          <a href="#">网站实例</a>
                     </li>
               </ul>
               <ul class="nav navbar-nav navbar-right">
                   <li>
                         <a href="#">Bootstrap中文网</a>
                   </li>
                </ul>
           </div>
      </div>
 </nav>

截图：
技术图片

下拉菜单：将下拉菜单放在导航条内

<nav class="navbar navbar-default">  navbar-default:灰色   navbar-inverse:反色
      <div class="container-fluid">
           <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="img/heroplane0.png"  height="100%"/>
                </a>
            </div>
            <div id="mynavbar" class="collapse navbar-collapse">
                 <ul class="nav navbar-nav">
                     <li>
                         <a href="#">起步</a>
                     </li>
                     <li>
                         <a href="#">全局CSS样式</a>
                     </li>
                     <li>
                         <a href="#">组件</a>
                     </li>
                     <li>
                          <a href="#">javascript插件</a>
                     </li>
                     <li>
                          <a href="#">定制</a>
                     </li>
                     <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">网站实例<span class="caret"></span></a>
            <ul class="dropdown-menu">
                  <li><a>linux</a></li>
                  <li><a>linux</a></li>
                  <li><a>linux</a></li>
                  <li><a>linux</a></li>
             </ul>
              </li>
               </ul>
               <ul class="nav navbar-nav navbar-right">
                   <li>
                         <a href="#">Bootstrap中文网</a>
                   </li>
                </ul>
           </div>
      </div>
 </nav>

截图：
技术图片

表单：将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。

<nav class="navbar navbar-default">  navbar-default:灰色   navbar-inverse:反色
      <div class="container-fluid">
           <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="img/heroplane0.png"  height="100%"/>
                </a>
            </div>
            <div id="mynavbar" class="collapse navbar-collapse">
                 <ul class="nav navbar-nav">
                     <li>
                         <a href="#">起步</a>
                     </li>
                     <li>
                         <a href="#">全局CSS样式</a>
                     </li>
                     <li>
                         <a href="#">组件</a>
                     </li>
                     <li>
                          <a href="#">javascript插件</a>
                     </li>
                     <li>
                          <a href="#">定制</a>
                     </li>
                     <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">网站实例<span class="caret"></span></a>
            <ul class="dropdown-menu">
                  <li><a>linux</a></li>
                  <li><a>linux</a></li>
                  <li><a>linux</a></li>
                  <li><a>linux</a></li>
             </ul>
              </li>
               </ul>
               <ul class="nav navbar-nav navbar-right">
                   <li>
                         <a href="#">Bootstrap中文网</a>
                   </li>
                </ul>
                <form class="navbar-form navbar-right">
                      <div class="form-group">
                           <input type="text" class="form-control" />
                      </div>
                      <div class="form-group">
                           <input type="submit" class="btn btn-primary" value="搜索" />
                      </div>
                </form>
           </div>
      </div>
 </nav>

截图：
技术图片

按钮：

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

截图：
技术图片

文本和导航条中的链接：

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

截图：
技术图片

组件排列：.navbar-right:右边、.navbar-left:左边
固定在顶部：.navbar-fixed-top
需要为 body 元素设置内补（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。
```
body { padding-top: 70px; }
```
固定在底部：.navbar-fixed-bottom，添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。
```
<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>
```
需要为 body 元素设置内补（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。
```
body { padding-top: 70px; }
```
静止在顶部：
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）。
```
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>
```

路径导航

代码：

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

截图：
技术图片

组件（三）

标签：截图通用 html alt 手机实例好的图标位置

原文地址：https://www.cnblogs.com/PCBullprogrammer/p/10387191.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

组件（三）

导航条

需要为 `body` 元素设置内补（padding）

需要为 `body` 元素设置内补（padding）

路径导航

组件（三）

导航条

需要为 body 元素设置内补（padding）

需要为 body 元素设置内补（padding）

路径导航

需要为 `body` 元素设置内补（padding）

需要为 `body` 元素设置内补（padding）