Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen-Bootstrap-Tutorial-php.cn

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;
}

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen

相关推荐：《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>

Nach dem Login kopieren

Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen

【品牌图标】

　　将导航条内放置品牌标志的地方替换为 <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>

Nach dem Login kopieren

Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen 【二级菜单】

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

<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>

Nach dem Login kopieren

Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen

【部件排列】

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

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

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

Bootstrap-Tutorial

Navigationsleistenkomponente

<p></p>

Lassen Sie uns über die Navigationsleiste in Bootstrap sprechen 【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>