Bootstrap 导航栏中的“图标栏”

我不能理解以下代码在 icon-bar方面的含义:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

icon-bar是用来做什么的? 为什么有三个类似的实例？

这段代码在导航栏部分:

<div class="navbar-header">
...
</div>
102652 次浏览
小开
最佳答案

icon-bar is used for responsive layouts to create a button that looks like ≡ on narrow browser screens. You can resize your browser window (by making it narrow) to see how the navbar is replaced by that button.

The three span tags create three horizontal lines that look like a button, commonly known as the "burger" icon.

Take a look at icon-bar in bootstrap.css:

.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}

It is a block structure, so it is aligned line by line. The background-color is set to be gray80. Actually, you can change its width, height, background-color, etc. as you wish.

小开

I expanded on the OP's answer since this came up during a different search, and I had to make a few modifications to actually get things working that I felt were worth sharing here. Putting it in it's own answer so that it gets proper code formatting.

I used this in a dropdown toggle button instead of navbar (same idea). Here's the code I used:

HTML:

          <div class="dropdown">
<a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Menu
<span class="icon-bars-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="reservations">Reservations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="amenities">Amenities</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="accommodations">Accommodations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="location">Location</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="packages">Packages</a></li>
</ul>
</div>

CSS:

.dropdown-toggle .icon-bars-button{
display: inline-block;
vertical-align:middle;
}
.dropdown-toggle .icon-bar {
margin-bottom:2px;
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
小开

the class="navbar-toggle" is used to get the styles.

data-toggle="collapse" attribute is used to control the show and hide.

the data-target = "#id" attribute is used to connect the button with the collapsible div

icon-bar is used o create a button with three horizontal lines. This button is displayed when the screen width is small


提交答案