Использование атрибутов данных со средствами массовой информации

Question

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

1. Я не уверен, если я использую атрибут data правильно, и
2. Я понятия не имею, как я бы предназначаться на <p> метки с селектором, так что я могу использовать :after для отображения изображения значков после текста.

Этот кант использует любой jquery/jscript как требование, поэтому это своего рода боль. Demo, it should be configured properly with bootstrap. (Изображение связан правильно, но не отображается в связи с ATTR.)

Пример HTML:

<div id="main" class=" container"> 
<div class="row"> 
    <div class ="col-lg-6 " id="badgeBox"> 
     <div class ="col-lg-12" data-test="<a href='http://www.va.gov/' target='_blank'><div class='badgeContainer'><img id='va_badge' class =' badges img-responsive' src='http://i.imgur.com/BAbUq6v.jpg'alt='Veteran Affairs Badge'></a></div>"> </div> 
     <span><p> U.S. Department of Veteran's Affairs</p></span> 

    </div> 
    </div>  
</div> 

Пример CSS:

.badgeContainer { 
width: 30%; 
}  
@media screen and (min-width: 1200px) { 
//some selector that targets the p tag// :after { 
content:"("attr(data-test) ")"; 
} 
} 

Answer 1

Я думаю, настройка содержимого из атрибута данных будет работать так. Однако тест данных должен находиться внутри p, и вы будете иметь большую проблему кодирования содержимого HTML внутри data-test ..

@media screen and (min-width: 1200px) { 
    p:after { 
    content: attr(data-test); 
    } 
} 

Более Bootstrap дружественный подход будет использовать включены служебные классы (http://getbootstrap.com/css/#responsive-utilities), чтобы показывать только ссылку на изображение в больших разрешениях использование visible-lg.

Демо с обоими подступами: http://bootply.com/94916