Индикатор выполнения начальной загрузки, размещение текста на панели "Stacked"

#html #twitter-bootstrap

#HTML #twitter-bootstrap

Вопрос:

Возможно, я упускаю что-то простое, но я пытаюсь разместить некоторый текст на панели Stacked для Twitter-индикатор выполнения начальной загрузки: Stacked Bar

 <div class="progress">
   <div class="progress-bar progress-bar-success" style="width: 50%">
      <span class="sr-only">50%</span>
   </div>
   <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
      <span class="sr-only">20%</span>
   </div>
   <div class="progress-bar progress-bar-danger" style="width: 30%">
      <span class="sr-only">30%</span>
   </div>
</div>

ДЕМОНСТРАЦИЯ JSFiddle

Я просто пытаюсь отобразить текст в каждом сегменте панели stacked (50%, 20%, 30%), но я не могу определить правильную реализацию. Любая помощь приветствуется!

Спасибо!

1. Я поместил тег p после вашего интервала, и текст появился. Взгляните … jsfiddle.net/Hx6Sh/1 РЕДАКТИРОВАТЬ: я удалил класс только для sr, и он отображался в виде текста. 🙂

2. Должен быть sr-only класс, скрывающий текст.

3. sr-only предназначен для программ чтения с экрана, для удобства слепых, в противном случае он невидим. удалите это, и все будет в порядке.

Ответ №1:

Согласно документам Twitter по начальной загрузке, sr-only класс улучшен для скрытия элемента для всех устройств, кроме программ чтения с экрана. Таким образом, в данном случае он скрывает метки, которые вы хотите показывать на всех других устройствах, кроме SRs.

Удалите класс, и он заработает.

Обновленный JSFiddle.

1. у вас все наоборот: он скрывает текст, используемый программами чтения с экрана, от других людей, которых это может смутить.

2. Это то, что я говорю. Возможно, я написал это неясно 🙂 РЕДАКТИРОВАТЬ: обновлено. Спасибо за уведомление.

3. ах, интересно! Спасибо!