如何在不同分辨率（带或不带 bootstrap）下更改内容（替换文本、图像等）？

Question

比如说，我想针对不同的设备分辨率更改文本或图片，不是文本大小而是完全不同的文本甚至 div，有没有办法做到这一点？

Answer 1

您可以使用 Bootstrap 的 available classes:

例如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <h1 class="text-center">This device is <span class="visible-xs-inline">extra small</span><span class="visible-sm-inline">small</span><span class="visible-md-inline">medium</span><span class="visible-lg-inline">large</span></h1>
  <img class="visible-xs-block center-block" src="http://i.stack.imgur.com/pIuT0.png" alt="phone">
  <img class="visible-sm-block center-block" src="http://i.stack.imgur.com/MA6ZP.png" alt="tablet">
  <img class="visible-md-block center-block" src="http://i.stack.imgur.com/6IekS.png" alt="notebook">
  <img class="visible-lg-block center-block" src="http://i.stack.imgur.com/3oaMK.png" alt="desktop">
</div>

如何在不同分辨率（带或不带 bootstrap）下更改内容（替换文本、图像等）？

How to change content ( substitute text, images etc.) on different resolutions ( with or without bootstrap)?

html

twitter-bootstrap-3

responsive