Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen

Der Unterschied zwischen Navigationsleiste (Navbar) und Navigation (Nav) besteht nur in einem Wort, und es gibt ein zusätzliches Wort „Leiste“. Tatsächlich unterscheiden sie sich im Bootstrap-Framework immer noch offensichtlich. In der Navigationsleiste (Navigationsleiste) gibt es eine Hintergrundfarbe und die Navigationsleiste kann ein reiner Link (ähnlich der Navigation), ein Formular oder eine Kombination aus Formular und Navigation sein. In diesem Artikel wird die Bootstrap-Navigationsleiste im Detail vorgestellt.

Einfache Navigationsleiste

Im Bootstrap-Framework unterscheiden sich die Navigationsleiste und die Navigation optisch nicht wesentlich, aber in der tatsächlichen Verwendung ist die Navigationsleiste viel komplizierter als die Navigation.

　Die Navigationsleiste ist eine reaktionsfähige Basiskomponente, die als Navigationskopf in einer Anwendung oder Website verwendet wird. Sie können auf Mobilgeräten gefaltet (und geöffnet oder geschlossen) werden und werden mit zunehmender Breite des Ansichtsfensters schrittweise horizontal erweitert.

Beim Erstellen einer einfachen Navigationsleiste sind hauptsächlich die folgenden Schritte erforderlich:

　1 Fügen Sie zunächst den Klassennamen hinzu „navbar-nav“ basierend auf der Erstellung der Navigationsliste (

)

　 2. Fügen Sie einen Container (p) außerhalb der Liste hinzu und verwenden Sie den Klassennamen „navbar“ und „navbar -default"

[Prinzipanalyse]

　Die Hauptfunktion des „.navbar“-Stils besteht darin, den linken und rechten Abstand und die abgerundeten Ecken festzulegen, aber seine farbbezogenen Stile wurden in keiner Weise festgelegt

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

　 Navigation bar Die Farben werden über „.navbar-default“ gesteuert

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

Der Navbar-Nav-Stil passt die schwebenden sowie inneren und äußeren Ränder der Menüelemente basierend auf der Navigations-.nav neu an. Es enthält auch keine Farb- und anderen Stileinstellungen und Farb- und andere Stile werden zusammen mit dem übergeordneten Container „navbar-default“ implementiert.

　 [Hinweis] Verwenden Sie am besten den <nav></nav> Wenn Sie ein allgemeines <p></p>-Element verwenden, stellen Sie sicher, dass Sie das Attribut role="navigation" für die Navigationsleiste festlegen, damit Benutzer es verwenden können Hilfsgeräte können eindeutig erkennen, dass es sich um einen Navigationsbereich handelt. alt="Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen"/> <nav></nav> 元素，如果使用的是通用的 <p></p> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域

<div>
     <ul>
         <li><a>网站首页</a></li>
        <li><a>系列教程</a></li>
        <li><a>名师介绍</a></li>
        <li><a>成功案例</a></li>
        <li><a>关于我们</a></li>
     </ul>
</div>

相关推荐：《bootstrap教程》

导航条部件

【标题】

　　在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现

<div>
  　<div>
  　    <a>小火柴的蓝色理想</a>
  　</div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
</div>

【品牌图标】

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

<div>
   <div>
      <a>
        <img  alt="Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen" >
      </a>
    </div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
</div>

【二级菜单】

　　在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条

<div>
    <ul>
         <li><a>网站首页</a></li>
        <li>
          <a>系列教程<span></span></a>
          <ul>
            <li><a>CSS3</a></li>
            <li><a>JavaScript</a></li>
            <li><a>PHP</a></li>
          </ul>
       </li>
       <li><a>关于我们</a></li>
    </ul>
</div>

【部件排列】

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

标签里

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

　　[注意]导航条目前不支持多个.navbar-right类。为了让内容之间有合适的空隙，最后一个.navbar-right

Verwandte Empfehlungen: „ Bootstrap-Tutorial

"

Navigationsleistenkomponente

<p></p>

【Titel】

🎜🎜 Bei der Webseitenerstellung befindet sich häufig ein Titel vor dem Menü (der Text ist etwas größer als anderer Text). In Tatsächlich wurde dieser Aspekt auch im Bootstrap-Framework berücksichtigt. Erreicht durch „navbar-header“ und „navbar-brand“ 🎜

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
     <form>
           <div>
              <input>
           </div>
        <button>搜索</button>
     </form>
</div>

🎜🎜🎜🎜【Markensymbol】🎜🎜🎜　 Ersetzen Sie die Stelle, an der das Markenlogo in der Navigationsleiste platziert ist, durch das <img alt="Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen" >-Element, um Ihr eigenes Markensymbol anzuzeigen. Da .navbar-brand mit Abstand und Höhe festgelegt wurde, müssen Sie entsprechend Ihrer eigenen Situation etwas CSS-Code hinzufügen, um die Standardeinstellungen zu überschreiben🎜

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <button>Sign in</button>
</div>

🎜🎜【Menü der zweiten Ebene】🎜🎜🎜　 In der grundlegenden Navigation bietet die Leiste den aktuellen Status, den deaktivierten Status, den angehaltenen Status und andere Effekte für das Menü und kann auch eine Navigationsleiste mit einem sekundären Menü haben🎜

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as huochai</p>
</div>

🎜🎜🎜🎜【Teileanordnung】🎜🎜🎜　Durch Hinzufügen von Navigationslinks der Werkzeugklassen .navbar-left und .navbar-right , Formulare, Schaltflächen oder Textausrichtung. Beide Klassen legen den Float-Stil über CSS in eine bestimmte Richtung fest. Um beispielsweise Navigationslinks auszurichten, platzieren Sie sie in separaten
-Tags mit angewendeten Utility-Klassen 🎜🎜 Diese Klassen sind Mischversionen von .pull-left und .pull-right , aber sie sind in der Medienabfrage eingeschränkt Es erleichtert die Handhabung der Navigationsleistenkomponente auf verschiedenen Bildschirmgrößen🎜🎜　[Hinweis] Die Navigationsleiste unterstützt derzeit nicht mehrere .navbar-right-Klassen. Um den richtigen Abstand zwischen den Inhalten zu gewährleisten, verwendet das letzte .navbar-right-Element negative Ränder. Wenn diese Klasse von mehreren Elementen verwendet wird, werden ihre Ränder nicht wie erwartet angezeigt Ganz einfach: Platzieren Sie einfach ein Formular mit dem Klassennamen „navbar-form“ im Navbar-Container🎜🎜　navbar-left implementiert Left-Floating, Navbar-right implementiert Right-Floating🎜

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as <a>huochai</a></p>
</div>

🎜🎜🎜

【按钮】

　　对于不包含在 <form></form> 中的 <button></button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的

　　[注意]就像标准的 按钮类 一样，.navbar-btn 可以被用在 <a></a> 和 <input> 元素上。然而，在 .navbar-nav 内，.navbar-btn 和标准的按钮类都不应该被用在 <a></a> 元素上。

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <button>Sign in</button>
</div>

【文本】

　　把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p></p> 标签

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as huochai</p>
</div>



【非导航链接】

　　可以在标准的导航组件之外添加标准链接，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as <a>huochai</a></p>
</div>



导航条位置


　　很多情况下，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了g两种固定导航条的方式：

   ☑  .navbar-fixed-top：导航条固定在浏览器窗口顶部

   ☑  .navbar-fixed-bottom：导航条固定在浏览器窗口底部

　　使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可

　　这个固定的导航条会遮住页面上的其它内容，除非给  元素底部设置了 padding。提示：导航条的默认高度是 50px

body { padding-top: 70px; }
body { padding-bottom: 70px; }

<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>
<p>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容</p>
<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>

【静止在顶部】

　　通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失

<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>
<p>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容</p>

响应式导航条

　　Bootstrap的响应式导航条实现如下：

　　1、保证在窄屏时需要折叠的内容必须包裹在带一个p内，并且为这个p加入collapse、navbar-collapse两个类名。最后为这个p添加一个class类名或者id名

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

　　或者

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

　　2、保证在窄屏时要显示的图标样式（固定写法）：

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

　　3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的p来决定。如

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

　　或者，对应class="example"

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

<div>
  <div>
       <button>
         <span>Toggle Navigation</span>
         <span></span>
         <span></span>
         <span></span>
       </button>
  </div>
  <div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
  </div>
</div>



反色导航条

　　反色导航条其实是Bootstrap框架提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>



更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Navigationsleiste in Bootstrap sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!