2015-02-10 5 views
3

кода блока первоначально ...не работает в начальной загрузки

<div class="content row"> 
    <img width="33%" class="img-thumbnail img-rounded" src="foo"> 
    <img width="33%" class=" img-thumbnail img-rounded" src="bar" > 
    <img width="33%" class=" img-thumbnail img-rounded" src="baz" > 
</div> 

Некоторые страницы DOM события после пользовательских запросов изменить блок HTML код для ...

<div class="content row"> 
    <img width="33%" class="img-thumbnail img-rounded center-block" src="foo"> 
    <img width="33%" class=" img-thumbnail img-rounded" src="bar" hidden=""> 
    <img width="33%" class=" img-thumbnail img-rounded" src="baz" hidden=""> 
</div> 

Когда страница отображает скрытые изображения по-прежнему отображаются? Изображения, помеченные как скрытые, не отображаются, как и ожидалось, если классы img- удалены. Но мне нужны классы начальной загрузки img-.

Как скрыть изображения, которые должны быть скрыты?

PS- Я использую Bootstrap 3.1.0

+1

просто использовать скрытый класс. это в bootstrap –

+0

OFFTOPIC :: администраторы должны позволить людям принимать ответы до 10 минут! это действительно раздражает, чтобы подождать, чтобы выбрать ответ! – anu

ответ

1

Было бы

<div class="content row"> 
    <img width="33%" class="img-thumbnail img-rounded center-block" src="foo"> 
    <img width="33%" class=" img-thumbnail img-rounded hidden" src="bar"> 
    <img width="33%" class=" img-thumbnail img-rounded hidden" src="baz"> 
</div> 

Вы также можете обратиться к Helper Class of Bootstrap знать о более похожих классов

+0

gotcha! благодаря! – anu

+0

Не забудьте выбрать его в качестве ответа, если это поможет, чуть ниже знака голосования. Вы найдете знак галочки, например, на этом [Image] (http://pasteboard.co/ZNmuQBX.png), он будет зеленым один раз вы нажимаете на нее. – NMindz

+0

обязательно сделаю. SO не позволит мне выбрать ответ до 10 минут! Это очень раздражает! Это похоже на то, что SO заставляет меня тратить 10 минут на ожидание, чтобы отметить правильный ответ. – anu

1

самозагрузки documentation говорит вам использовать следующие.

Принудительный элемент, который будет показан или скрыт (в том числе для чтения с экрана) с использованием классов .show и .hidden. Эти классы используют! Важно, чтобы избежать конфликтов специфичности, точно так же, как быстрые поплавки. Они доступны только для переключения уровня блока. Их также можно использовать в качестве миксинов.

.hide доступен, но он не всегда влияет на устройства чтения с экрана и устарел от версии 3.0. Вместо этого используйте .hidden или .sr-only.

Кроме того, .invisible может использоваться для переключения только видимости элемента, то есть его отображение не изменяется, и элемент все еще может влиять на поток документа.

2

http://getbootstrap.com/css/#helper-classes-show-hide

Отображение и скрытие контента

Force элемент, чтобы показать или скрыть (в том числе для чтения с экрана) с использованием .Show и .hidden классов. Эти классы используют ! Важно избегать конфликтов специфичности, точно так же, как быстрые поплавки. Они доступны только для переключения уровня блока. Они также могут быть , используемые в качестве миксинов.

.hide доступен, но он не всегда влияет на устройства чтения с экрана, а устарел от версии 3.0. Вместо этого используйте .hidden или .sr-only.

Кроме того, .invisible может использоваться для переключения только видимости элемента, то есть его дисплей не изменяется, и элемент может все еще влияет на поток документа.

"hidden" - это название класса. Вы можете применить его как класс.

0

Поскольку вы используете bootstrap, вы можете использовать класс hide таким образом.

<div class="content row"> 
    <img width="33%" class="img-thumbnail img-rounded center-block" src="foo"> 
    <img width="33%" class=" img-thumbnail img-rounded hide" src="bar"> 
    <img width="33%" class=" img-thumbnail img-rounded hide" src="baz"> 
</div> 

Вы также можете использовать скрытый класс для различных устройств, таких как скрытые см, скрытые LG и т.д.

+0

В классе загрузки нет класса спрятанности 3, см. Мой ответ – NMindz

Смежные вопросы