web前端:bootstrap栅格系统:自适应多屏幕布局
ccwgpt 2024-10-14 08:48 32 浏览 0 评论
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~~
相关推荐
- 用Steam启动Epic游戏会更快吗?（epic怎么用steam启动）
-
Epic商店很香，但也有不少抱怨，其中一条是启动游戏太慢。那么，如果让Steam启动Epic游戏，会不会速度更快？众所周知，Steam可以启动非Steam游戏，方法是在客户端左下方点击“添加游戏”，然...
- Docker看这一篇入门就够了（dockerl）
-
安装DockerLinux:$curl-fsSLhttps://get.docker.com-oget-docker.sh$sudoshget-docker.sh注意：如果安装了旧版...
- AYUI 炫丽PC开发UI框架2016年6月15日对外免费开发使用 [1]
-
2016年6月15日，我AY对外发布AYUI（WPF4.0开发）的UI框架，开发时候，你可以无任何影响的去开发PC电脑上的软件exe程序。AYUI兼容XP操作系统，在Win7/8/8.1/10上都顺利...
- 别再说C#/C++套壳方案多了!Tauri这“借壳生蛋”你可能没看懂!
-
浏览器套壳方案，C#和C++有更多，你说的没错，从数量和历史积淀来看，C#和C++确实有不少方式来套壳浏览器，让Web内容在桌面应用里跑起来。但咱们得把这套壳二字掰扯清楚，因为这里面学问可大了！不同的...
- OneCode 核心概念解析——Page(页面)
-
在接触到OneCode最先接触到的就是，Page页面，在低代码引擎中，页面（Page）设计的灵活性是平衡“快速开发”与“复杂需求适配”的关键。以下从架构设计、组件系统、配置能力等维度，解析确...
- React是最后的前端框架吗，为什么这么说的?
-
油管上有一位叫Theo的博主说，React是终极前端框架，为什么这么说呢？让我们来看看其逻辑：这个标题看起来像假的，对吧？React之后明明有无数新框架诞生，凭什么说它是最后一个？我说的“最后一个”不...
- 面试辅导(二):2025前端面试密码:用3个底层逻辑征服技术官
-
面试官放下简历，手指在桌上敲了三下："你上次解决的技术难题，现在回头看有什么不足？"眼前的候选人瞬间僵住——这是上周真实发生在蚂蚁金服终面的场景。2025年的前端战场早已不是框架熟练...
- 前端新星崛起!Astro框架能否终结React的霸主地位?
-
引言：当"背着背包的全能选手"遇上"轻装上阵的短跑冠军"如果你是一名前端开发者，2024年的框架之争绝对让你眼花缭乱——一边是React这位"背着全家桶的全能选...
- 基于函数计算的 BFF 架构（基于函数计算的 bff 架构是什么）
-
什么是BFFBFF全称是BackendsForFrontends(服务于前端的后端)，起源于2015年SamNewman一篇博客文章《Pattern:BackendsFor...
- 谷歌 Prompt Engineering 白皮书:2025年 AI 提示词工程的 10 个技巧
-
在AI技术飞速发展的当下，如何更高效地与大语言模型（LLM）沟通，以获取更准确、更有价值的输出，成为了一个备受关注的问题。谷歌最新发布的《PromptEngineering》白皮书，为这一问题提供了...
- 光的艺术:灯具创意设计（灯光艺术作品展示）
-
本文转自|艺术与设计微信号|artdesign_org_cn“光”是文明的起源，是思维的开端，同样也是人类睁眼的开始。每个人在出生一刻，便接受了光的照耀和洗礼。远古时候，人们将光奉为神明，用火来...
- MoE模型已成新风口，AI基础设施竞速升级
-
机器之心报道编辑：Panda因为基准测试成绩与实际表现相差较大，近期开源的Llama4系列模型正陷入争议的漩涡之中，但有一点却毫无疑问：MoE（混合专家）定然是未来AI大模型的主流范式之一。...
- Meta Spatial SDK重大改进:重塑Horizon OS应用开发格局
-
由文心大模型生成的文章摘要Meta持续深耕SpatialSDK技术生态，提供开自去年9月正式推出以来，Meta持续深耕其SpatialSDK技术生态，通过一系列重大迭代与功能增强，不断革新H...
- "上云"到底是个啥?用"租房"给你讲明白IaaS/PaaS/SaaS的区别
-
半夜三点被机房报警电话惊醒，顶着黑眼圈排查服务器故障——这是十年前互联网公司运维的日常。而现在，程序员小王正敷着面膜刷剧，因为公司的系统全"搬"到了云上。"部署到云上"...
- php宝塔搭建部署thinkphp机械设备响应式企业网站php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的机械设备响应式企业网站php源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试了一下...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 用Steam启动Epic游戏会更快吗?（epic怎么用steam启动）
- Docker看这一篇入门就够了（dockerl）
- AYUI 炫丽PC开发UI框架2016年6月15日对外免费开发使用 [1]
- 别再说C#/C++套壳方案多了!Tauri这“借壳生蛋”你可能没看懂!
- OneCode 核心概念解析——Page(页面)
- React是最后的前端框架吗，为什么这么说的?
- 面试辅导(二):2025前端面试密码:用3个底层逻辑征服技术官
- 前端新星崛起!Astro框架能否终结React的霸主地位?
- 基于函数计算的 BFF 架构（基于函数计算的 bff 架构是什么）
- 谷歌 Prompt Engineering 白皮书:2025年 AI 提示词工程的 10 个技巧
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)