부트스트랩을 사용하여 반응형 도구를 사용하는 방법
- 亚连원래의
- 2018-06-23 16:56:331569검색
이 글은 주로 부트스트랩 반응형 도구 사용에 대한 관련 정보를 소개하며, 관심 있는 친구들이 참고할 수 있습니다.
이 글의 예시는 참고용으로 부트스트랩 반응형 도구의 특정 코드를 공유합니다. 는 다음과 같습니다
<!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에서 로컬 저장소 및 세션 저장소를 사용하는 방법에 대해
객체를 사용하는 JavaScript에 대해 값을 결합하는 방법
JavaScript 의사 배열 사용법 정보(자세한 튜토리얼)
위 내용은 부트스트랩을 사용하여 반응형 도구를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Anglejs에서 타임라인을 구현하는 방법다음 기사：Anglejs에서 타임라인을 구현하는 방법