bootstrap-2-栅格简单实例
2021/11/28 6:10:33
本文主要是介绍bootstrap-2-栅格简单实例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- 栅格实例效果
- tips
- 缩略图栅格
- 新需求
- 错误
栅格实例效果
这个东西,不需要我们自己写,要去bootstrap当中找,这个东西有个学名,叫做缩略图。上面是一张图片,下面是图片的介绍。
<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div>
tips
这么写的a标签,是不会被点击的。
缩略图栅格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <style> a { display: block; text-align: center; color: darkgrey; margin-bottom: 0.5em; } </style> </head> <body> <div class="container"> <div class="jumbotron"> <h1>hello world!</h1> </div> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="../images/bootstrap.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by @mdo</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="../images/react.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by @mdo</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="../images/typescript.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by @mdo</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="../images/webpack.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by @mdo</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> </div> </div> </body> <script src="../js/jquery-3.6.0.min.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
效果如下:
新需求
当进行响应式的时候,卡片向下掉的顺序是:bootstrap-react-typescript-webpack
。
这个就要用到列排序。
第一个向下掉,证明这个卡片是在html的最后的位置。
所以我们第一步,是要在html当中,调整卡片的顺序,编写为:webpack-typescript-react-bootstrap
。
在这个基础上,我们使用列排序。
- lg的时候
- bootstrap需要向左偏移,要增加right的距离,我们要设置col-lg-pull-9。
- react需要向左偏移,要增加right的距离,我们要设置col-lg-pull-3。
- typescript需要向右偏移,要增加left的距离,我们要设置col-lg-push-3。
- webpack需要向右偏移,要增加left的距离,我们要设置col-lg-push-3。
- md的时候
- 同上原理
- sm的时候
- 同上原理。
错误
在这个实现新需求的过程中,我们遇到一个错误,效果如下:
最终需求实现的源码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <style> a { display: block; text-align: center; color: darkgrey; margin-bottom: 0.5em; } </style> </head> <body> <div class="container"> <div class="jumbotron"> <h1>hello world!</h1> </div> <div class="row"> <div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6"> <div class="thumbnail"> <img src="../images/webpack.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by 4444</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6 "> <div class="thumbnail"> <img src="../images/typescript.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by 3333</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> <div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6"> <div class="thumbnail"> <img src="../images/react.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by 2222</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="../images/bootstrap.png" alt="bootstrap"> <div class="caption"> <h3>Bootstrap 编码规范</h3> <a href="javascript:;" class="text-center">by 1111</a> <p>Bootstrap 编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p> </div> </div> </div> </div> </div> </body> <script src="../js/jquery-3.6.0.min.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
最终需求实现的效果如下:
这篇关于bootstrap-2-栅格简单实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?