Bootstrap｜“icon-bar“与“sr-only“的作用

Bootstrap十分适合制作响应式页面。当我们利用Bootstrap制作导航条时，在模版代码中会遇到以下代码:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	<span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

这段代码是用于生成“汉堡按钮”的。那么什么是“汉堡按钮”呢？大家在平时用手机上网时经常可以看到这样的界面：

右上角的那个有三条横线的按钮就是所谓的汉堡按钮，因为三条横线像汉堡的夹心（我并不觉得），所以被叫做汉堡按钮。点击这个按钮后就可以看到原来宽屏状态下的导航条：

"icon-bar"的作用

那么icon-bar的作用就显而易见了，有几个icon-bar，汉堡按钮上就会出现几个横线。当我们加入6个icon-bar后，就会发现汉堡按钮上的横线变成了6个。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	<span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

"sr-only"的作用

盲人上网与健康的人上网有所不同，盲人上网用的屏幕阅读器。是一种可将文字、图形以及电脑接口的其他部分（藉文字转语音技术）转换成语音及/或点字的软件。而屏幕阅读器的英文就是(Screen reader)，也就是"sr"，所以这个标签是专门用在屏幕阅读器上的。屏幕阅读器可以让残障人士能获取，且不会影响 UI 的视觉呈现。