Heim > Artikel > Web-Frontend > So verwenden Sie reaktionsfähige Tools mithilfe von Bootstrap
So verwenden Sie reaktionsfähige Tools mithilfe von Bootstrap
- 亚连Original
- 2018-06-23 16:56:331510Durchsuche
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!