脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap响应式工具使用

bootstrap响应式工具使用详解

 更新时间：2017年11月29日 09:04:14   作者：看五分钟佩奇的小姑姑  
这篇文章主要介绍了bootstrap响应式工具使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了bootstrap响应式工具的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>响应式工具</title>
  <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css" rel="external nofollow" >
  <script src="../JS/jquery-3.2.1.min.js"></script>
  <script src="../JS/bootstrap.js"></script>

  <style type="text/css">
    .tips1{width: 30px;height: 300px;background: black}
    .tips2{width: 30px;height: 200px;background: #ddd}
  </style>

</head>
<body style="height: 800px;">

  <!-- <div class="container">
    <div class="row">
       只有在lg分辨率以上的才会显示，否则是不会显示的 
      <div class="col-lg-6 visible-lg-inline-block">col-lg-6</div>
      <div class="hidden-sm hidden-xs">aaaaaaa</div>
    </div>
  </div>
 -->

  <div class="container-fluid">
    <div class="row"><!-- 消除最右边的空隙 -->
      <div class="tips1 pull-right visible-lg-block"></div>
      <!-- pull-right:右浮动 pull-left:左浮动-->
      <div class="tips2 hidden-lg affix"></div><!-- affix固定定位 -->
    </div>
  </div>


</body>
</html>
<!-- 
响应式工具：针对不同的设备展示或隐藏页面的内容
可见类：
  visible-[lg/md/sm/xs]-[inline/block/inline-block]
隐藏类：
  hidden-[lg/md/sm/xs]
浮动：[pull/push]-[right/left]
固定定位：affix
打印类：
  visible-print-[block/inline]:只有在使用打印功能的时候才会显示
  hidden-print:本来是显示内容的，当使用打印功能的时候会隐藏内容
 -->

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 实例说明为什么不要行内使用javascript

    实例说明为什么不要行内使用javascript

    不要行内写js是因为这样很不安全，因为用火狐的firebug可以轻松让代码失效，下面告诉大家为什么
    2014-04-04
  • NestJS使用class-validator进行数据验证

    NestJS使用class-validator进行数据验证

    本文将通过详细的步骤和实战技巧,带大家掌握如何在NestJS中使用class-validator进行数据验证,以及11条实战中常用的验证技巧,感兴趣的可以了解下
    2024-11-11
  • javascript日期比较方法实例分析

    javascript日期比较方法实例分析

    这篇文章主要介绍了javascript日期比较方法,列举了3个实例形式分析了javascript针对日期与时间的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 莱鸟介绍window.print()方法

    莱鸟介绍window.print()方法

    这篇文章主要介绍了莱鸟介绍window.print()方法的相关资料,需要的朋友可以参考下
    2016-01-01
  • 微信小程序工具函数封装

    微信小程序工具函数封装

    这篇文章主要为大家详细介绍了微信小程序工具函数封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS实现CheckBox复选框全选、不选或全不选功能

    JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭，如一次性处理多个产品，或对文章的删除、产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，需要的朋友可以参考下
    2016-02-02
  • 浅谈Webpack 是如何加载模块的

    浅谈Webpack 是如何加载模块的

    这篇文章主要介绍了Webpack 是如何加载模块的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JavaScript判断页面是否滚动到底部的技巧

    JavaScript判断页面是否滚动到底部的技巧

    在 JavaScript 中,我们可以通过一些技巧来判断页面是否滚动到底部,本文将介绍一些常用的方法,帮助你在项目中实现这一功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 小程序实现左右来回滚动字幕效果

    小程序实现左右来回滚动字幕效果

    这篇文章主要为大家详细介绍了小程序实现左右来回滚动字幕效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • js动态设置select下拉菜单的默认选中项实例

    js动态设置select下拉菜单的默认选中项实例

    今天小编就为大家分享一篇js动态设置select下拉菜单的默认选中项实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论