码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap格式转换代码

时间:2015-01-30 19:13:55      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:

网址:http://www.w3cschool.cc/bootstrap/bootstrap-responsive-utilities.html

<div class="container" style="padding: 40px;">
   <div class="row visible-on">
      <div class="col-xs-6 col-sm-3" style="
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-xs">特别小型</span>
         <span class="visible-xs">? 在特别小型设备上可见</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-sm">小型</span>
         <span class="visible-sm">? 在小型设备上可见</span>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3" style="
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-md">中型</span>
         <span class="visible-md">? 在中型设备上可见</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-lg">大型</span>
         <span class="visible-lg">? 在大型设备上可见</span>
      </div>
    </div>
</div>

Bootstrap格式转换代码

标签:

原文地址:http://www.cnblogs.com/feiqi/p/4262727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!