cari

Rumah >hujung hadapan web >tutorial js >使用bootstrap如何使用响应式工具

使用bootstrap如何使用响应式工具

亚连
亚连asal
2018-06-23 16:56:331615semak imbas

这篇文章主要介绍了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;">

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

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


</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:本来是显示内容的，当使用打印功能的时候会隐藏内容
 -->

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue中有关于localstorage和sessionstorage如何使用

在Angular中如何实现table表格排序

在Angular中如何实现验证

有关于JavaScript使用中Object值如何合并

有关JavaScript的伪数组用法（详细教程）

Atas ialah kandungan terperinci 使用bootstrap如何使用响应式工具. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript bootstrap angular Object table
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在angularjs中如何实现时间轴Artikel seterusnya：在JavaScript中如何使用setter与getter方法

Artikel berkaitan

Lihat lagi