前言：
今天我们对“div高度自适应屏幕”大约比较看重，小伙伴们都想要分析一些“div高度自适应屏幕”的相关内容。那么小编在网摘上网罗了一些有关“div高度自适应屏幕””的相关知识，希望大家能喜欢，各位老铁们快快来学习一下吧！1.先看效果图
2.less自定义样式
*{ margin: 0; padding: 0; a{ display: block; text-align: center; color: gray; &:visited{ text-decoration: none !important; } &:focus{ text-decoration: none !important; } &:hover{ color: tomato !important; transform: scale(1.1); } transition:.5s; } .jumbotron{ text-align: center; color: steelblue !important; }}123456789101112131415161718192021222324253.css* { margin: 0; padding: 0;}* a { display: block; text-align: center; color: gray; transition: .5s;}* a:visited { text-decoration: none !important;}* a:focus { text-decoration: none !important;}* a:hover { color: tomato !important; transform: scale(1.1);}* .jumbotron { text-align: center; color: steelblue !important;}4.html引用bootstrap（js、css、jquery.js）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>栅格实例</title> <!--移动端meta标签--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> </head> <link rel="stylesheet" href="b-css/1-bs-ex.css" /> <body> <div class="container"> <!--巨幕组件--> <div class="jumbotron"> <h1>bootstrap自适应多屏幕布局</h1> <p>col-sm：小屏幕768px col-md：中屏幕992px col-lg：大屏幕1200px</p> </div> <div class="row"> <!--缩略图组件--> <div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-8 col-lg-3 col-lg-push-9"> <div class="thumbnail"> <img src="b-img/my-logo-2.png" alt="缩略图" /> <div class="caption" alt="图片说明"> <h3>缩略图展示1</h3> <a href="javascript:;">一刀coder @cevent</a> <p>图片的描述信息...图片的描述信息...图片的描述信息...</p> <p> <a href="javascript:;" class="btn btn-primary" role="button">C-Button</a> <a href="javascript:;" class="btn btn-default" role="button">E-Button</a> </p> </div> </div> </div> <!--排序：left=push 左边间距，向右 * .col-xs-push-12{ * left:12/12(百分比函数) * } * 使用push，到col-lg-push=当前位置 下1个 下2个 下3个 * 0 3 6 9 --> <div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0 col-lg-3 col-lg-push-3"> <!--缩略图引用--> <div class="thumbnail"> <img src="b-img/my-logo-2.png" alt="缩略图" /> <div class="caption" alt="图片说明"> <h3>缩略图展示2</h3> <a href="javascript:;">一刀coder @cevent</a> <p>图片的描述信息...图片的描述信息...图片的描述信息...</p> <p> <a href="javascript:;" class="btn btn-primary" role="button">C-Button</a> <a href="javascript:;" class="btn btn-default" role="button">E-Button</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-3"> <!--缩略图引用--> <div class="thumbnail"> <img src="b-img/my-logo-2.png" alt="缩略图" /> <div class="caption" alt="图片说明"> <h3>缩略图展示3</h3> <a href="javascript:;">一刀coder @cevent</a> <p>图片的描述信息...图片的描述信息...图片的描述信息...</p> <p> <a href="javascript:;" class="btn btn-primary" role="button">C-Button</a> <a href="javascript:;" class="btn btn-default" role="button">E-Button</a> </p> </div> </div> </div> <!--pull：右边间距，向左 更改到第一个位置，使用pull，到col-lg-pull-0=当前位置 -3=上1个 -6=上2个+ -9=上3个 0 3 6 9 .col-xs-pull-12{ * right:12/12(百分比函数) * } --> <div class="col-sm-6 col-md-4 col-lg-3 col-lg-pull-9"> <!--缩略图引用--> <div class="thumbnail"> <img src="b-img/my-logo-2.png" alt="缩略图" /> <div class="caption" alt="图片说明"> <h3>缩略图展示4</h3> <a href="javascript:;">一刀coder @cevent</a> <p>图片的描述信息...图片的描述信息...图片的描述信息...</p> <p> <a href="javascript:;" class="btn btn-primary" role="button">C-Button</a> <a href="javascript:;" class="btn btn-default" role="button">E-Button</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3"> <!--缩略图引用--> <div class="thumbnail"> <img src="b-img/my-logo-2.png" alt="缩略图" /> <div class="caption" alt="图片说明"> <h3>缩略图展示5</h3> <a href="javascript:;">一刀coder @cevent</a> <p>图片的描述信息...图片的描述信息...图片的描述信息...</p> <p> <a href="javascript:;" class="btn btn-primary" role="button">C-Button</a> <a href="javascript:;" class="btn btn-default" role="button">E-Button</a> </p> </div> </div> </div> </div> </div> </body> <!--注意引用样式时，添加rel--> <link rel="stylesheet" href="css/bootstrap.css" /> <!--引用bootstrap必须先引用jquery--> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script></html>私信了解、获取更多学习资料！！！yidao~~
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #div高度自适应屏幕
