Bootstrap响应实用程序类-前端实例代码

!DOCTYPE htmlhtmlheadtitleTry v1.2 Bootstrap Online/titlelink href=/bootstrap/css/bootstrap.min.css rel=stylesheet

编程学习网为您整理以下代码实例，主要实现：Bootstrap响应实用程序类，希望可以帮到各位朋友。

<!DOCTYPE HTML>
<HTML>
<head>
   <Title>Try v1.2 bootstrap Online</Title>
   <link href="/bootstrap/CSS/bootstrap.min.CSS" rel="stylesheet">
   <script src="/scripts/jquery.min.Js"></script>
   <script src="/bootstrap/Js/bootstrap.min.Js"></script>
</head>
<body>

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         Box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <span class = "hIDden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         Box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <span class = "hIDden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>

      <div class = "clearfix visible-xs"></div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         Box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <span class = "hIDden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         Box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <span class = "hIDden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>

   </div>  
</div>

</body>
</HTML>