Let's talk about the navigation bar in Bootstrap

The navigation bar (navbar) and the navigation (nav) differ by one word, with an additional word "bar". In fact, they are still obviously different in the Bootstrap framework. There is a background color in the navigation bar (navbar), and the navigation bar can be a pure link (similar to navigation), a form, or a combination of form and navigation. This article will introduce the Bootstrap navigation bar in detail.

Basic navigation bar

In the Bootstrap framework, the navigation bar and navigation are not much different in appearance, but in actual use, navigation Bars are much more complex than navigation.

The navigation bar is a responsive basic component used as the navigation header in an application or website. They can be folded (and opened or closed) on mobile devices, and gradually change to horizontal expansion mode when the width of the viewport (viewport) increases

When making a basic navigation bar, there are mainly the following steps: ：

　1. First, add the class name “navbar-nav” on the basis of making the navigation list (

)

　2. Add a new one outside the list Container (p), and use the class names "navbar" and "navbar-default"

[Principle Analysis]

The main function of the ".navbar" style is to set left and right padding and rounded corners, etc. effect, but its color-related style has not been set in any way

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

The color of the navigation bar is controlled through ".navbar-default"

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

The navbar-nav style is in The floating and inner and outer margins of menu items have been re-adjusted based on navigation.nav. It also does not include color and other style settings, and color and other styles are implemented together with the parent container "navbar-default"

　[Note] It is best to use the <nav></nav> element , if you are using the generic <p></p> element, be sure to set the role="navigation" attribute for the navigation bar, so that users using assistive devices know clearly that this is A navigation area

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

##Related recommendations: "

bootstrap tutorial"

Navigation bar component

[Title]

In Web page production, there is often a title in front of the menu (the text size is slightly larger than other text). In fact, This aspect has also been considered in the Bootstrap framework, which is implemented through "navbar-header" and "navbar-brand"<p></p>

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

[Brand Icon]

Replace the place where the brand logo is placed in the navigation bar with the

element to display your own brand icon. Since .navbar-brand has been set with padding and height, you need to add some CSS code according to your own situation to override the default settings

<div>
   <div>
      <a>
        <img  src="/static/imghw/default1.png" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" class="lazy" alt="Let's talk about the navigation bar in Bootstrap" >
      </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>

[Second-level menu]

The basic navigation bar provides the current state, disabled state, suspended state and other effects for the menu, and it can also have a navigation bar with a secondary menu

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

【Part Arrangement】

By adding .navbar-left and .navbar-right tool classes, you can create navigation links, forms, buttons or Text alignment. Both classes will set the float style in a specific direction through CSS. For example, to align navigation links, place them in separate

tags with utility classes applied<p></p> These classes are mixin versions of .pull-left and .pull-right , But they are limited to media queries, which makes it easier to handle navigation bar components on various screen sizes<p></p> [Note] Navigation bars currently do not support multiple

. navbar-right class. To allow for proper space between content, the last .navbar-right element uses a negative margin. If there are multiple elements using this class, their margins will not be displayed normally as expected

[Form]

Some navigation bars will have There is a search form. The Bootstrap framework provides a "navbar-form". The method of use is very simple. Just place a form with the navbar-form class name in the navbar container. <p></p> navbar-left implements left floating , navbar-right implements right floating<p></p>

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

【按钮】

　　对于不包含在 <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>

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

The above is the detailed content of Let's talk about the navigation bar in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!