Эквивалент начальной загрузки HTML5Boilerplate .visuallyhidden

Есть ли в Twitter Bootstrap эквивалент несемантического вспомогательного класса HTML5Boilerplate .visuallyhidden? Я не вижу ничего похожего в файлах CSS. Назначение класса .visuallyhidden - визуально скрыть его, но сделать текст доступным для программ чтения с экрана. Есть ли другой подход Bootstrappy для достижения той же цели?

// HTML5Boilerplate's non-semantic helper class
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Связанные несемантические вспомогательные классы Bootstrap не достигают такого же эффекта:

// Some of Twitter Bootstrap's non-semantic helper classes
.hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

css twitter-bootstrap html5boilerplate
person Prembo    schedule 14.02.2013    source источник

Ответы (2)


arrow_upward
14
arrow_downward

Вы можете использовать класс Bootstrap .sr-only либо в своем HTML (несемантический), либо как миксин. Вот определение:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
person Matt Ryan    schedule 12.10.2013
comment
Добавлено: white-space:nowrap - person Olivier C; 22.11.2020

arrow_upward
6
arrow_downward

Хорошо,

.text-hide {
    background-color: transparent;
    color: transparent;
    border: 0;
    font: 0/0 a;
    text-shadow: none;
}

Изменить 2013-11-25: в Bootstrap v3.0.1 (как правильно сказал Дин в своем комментарии ниже) .text-hide частично делает то, что вы хотите. Ранее до Bootstrap v3 имя класса было .hide-text.
Первоначально он предназначался для замены изображений, поэтому оставляет неизменным свойство display.

См. https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 для полного объяснения всех свойств в этом правиле, например замечательного 0/0 a обходного пути для валидатора CSS.

Еще одно чтение о классе .hide-text:
https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

В Bootstrap также есть проблема с вашим вопросом: https://github.com/twitter/bootstrap/issues/6452

person Volker E.    schedule 15.02.2013
comment
И подумайте, пожалуйста, нужно ли ставить в исходники несемантические классы! ;) - person Volker E.; 15.02.2013
comment
Привет, Волкер, на самом деле я использую Compass / SASS, поэтому я не использую их несемантическим образом. Я использую их как «миксины», применяемые к различным элементам CSS (SASS). Спасибо, что указали на запрос на перенос. Я подожду, пока он не появится в плагинах Compass, которые я использую. - person Prembo; 16.02.2013
comment
Цитата из источника Bootstrap: Внимание! v3 запущен только с .hide-text(), но согласно нашему шаблону для миксинов, повторно используемых как классы с тем же именем, это не работает. Начиная с версии 3.0.1 мы добавили .text-hide() и устарели .hide-text(). Так что используйте .text-hide. - person Dean Taylor; 25.11.2013