suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie reaktionsfähige Tools mithilfe von Bootstrap

So verwenden Sie reaktionsfähige Tools mithilfe von Bootstrap

亚连
亚连Original
2018-06-23 16:56:331615Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von Bootstrap-Responsive-Tools vorgestellt, die einen gewissen Referenzwert haben.

Die Beispiele in diesem Artikel zeigen Ihnen die Verwendung von Bootstrap-Responsive-Tools. Der spezifische Code dient als Referenz.

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

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es Ihnen in Zukunft weiterhelfen wird.

Verwandte Artikel:

So verwenden Sie Localstorage und Sessionstorage in Vue

So implementieren Sie die Tabellensortierung in Angular

So implementieren Sie die Überprüfung in Angular

Informationen zum Zusammenführen von Objektwerten in der Verwendung von JavaScript

Anleitung Verwenden Sie Pseudo-Arrays in JavaScript (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reaktionsfähige Tools mithilfe von Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript bootstrap angular Object table
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie eine Zeitleiste in AngularJSNächster Artikel：So implementieren Sie eine Zeitleiste in AngularJS

In Verbindung stehende Artikel

Mehr sehen