search

Home  >  Article  >  Web Front-end  >  Sharing how to use bootstrap responsive tool

Sharing how to use bootstrap responsive tool

PHPz
PHPzOriginal
2018-01-05 13:30:301630browse

This article mainly introduces relevant information on the use of bootstrap responsive tools. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

【Related video recommendation: Bootstrap tutorial】

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

Related recommendation:

Bootstrap responsive navigation Example sharing

bootstrap responsive Chinese background template

BootStrap responsive navigation bar example introduction_javascript skills

The above is the detailed content of Sharing how to use bootstrap responsive tool. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of JavaScript setters and gettersNext article：Detailed explanation of JavaScript setters and getters

Related articles

See more