"icon-bar" ในแถบนำทาง bootstrap ของ twitter

ฉันไม่เข้าใจว่ารหัสต่อไปนี้หมายถึงอะไร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>

icon-barใช้สำหรับรูปแบบที่ตอบสนองเพื่อสร้างปุ่มที่ดูเหมือน like บนหน้าจอเบราว์เซอร์ที่แคบ คุณสามารถปรับขนาดหน้าต่างเบราว์เซอร์ของคุณ (โดยทำให้แคบลง) เพื่อดูว่าแถบนำทางถูกแทนที่ด้วยปุ่มนั้นอย่างไร

spanแท็กสามแท็กสร้างเส้นแนวนอนสามเส้นที่มีลักษณะเหมือนปุ่มซึ่งเรียกกันทั่วไปว่าไอคอน "เบอร์เกอร์"

ดูicon-barในbootstrap.css:

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

เป็นโครงสร้างบล็อกจึงเรียงกันทีละบรรทัด background-colorจะกำหนดgray80 ที่จริงแล้วคุณสามารถเปลี่ยนมันwidth, height, background-colorและอื่น ๆ ตามที่คุณต้องการ

ฉันขยายคำตอบของ OP เนื่องจากสิ่งนี้เกิดขึ้นในระหว่างการค้นหาที่แตกต่างกันและฉันต้องทำการปรับเปลี่ยนเล็กน้อยเพื่อให้สิ่งต่างๆทำงานได้จริงซึ่งฉันรู้สึกว่าคุ้มค่าที่จะแบ่งปันที่นี่ ใส่ไว้ในคำตอบของตัวเองเพื่อให้ได้รูปแบบรหัสที่เหมาะสม

ฉันใช้สิ่งนี้ในปุ่มสลับแบบเลื่อนลงแทน navbar (แนวคิดเดียวกัน) นี่คือรหัสที่ฉันใช้:

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

class="navbar-toggle"ถูกนำมาใช้เพื่อให้ได้รูปแบบ

data-toggle="collapse" แอตทริบิวต์ใช้เพื่อควบคุมการแสดงและซ่อน

data-target = "#id"แอตทริบิวต์ที่ใช้ในการเชื่อมต่อปุ่มที่มี div พับ

icon-barใช้ o สร้างปุ่มที่มีเส้นแนวนอนสามเส้น ปุ่มนี้จะแสดงเมื่อความกว้างของหน้าจอมีขนาดเล็ก