web前端：bootstrap栅格系统：自适应多屏幕布局，手机设备、ipad、PC三端合一

最新推荐文章于 2024-03-30 16:12:01 发布
最新推荐文章于 2024-03-30 16:12:01 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 微信小程序 文章标签： css html js bootstrap css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37056888/article/details/112834199
版权

1.先看效果图

cevent
bootstrap
bootstrap
bootstrap

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;
    }
}

3.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>
cevent
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootStrap自适应如何使用
weixin_54048131的博客
10-23 700
【代码】bootStrap自适应如何使用。
【web前端】bootstrap自适应定制，拖拽布局，一键生成页面
04-10
这里将介绍整个guiplan开发工具的使用以及前端布局的基础教程。常用的基本操作，如div操作，文字操作，图片操作，组件操作，生成html网页，保存html，css代码。通过拖拽，点击，快捷键等方式轻松绘制想要的静态页面。利用bootstrap框架进行自适应的定制，以及常用弹性盒子布局方式。零基础即可学会网页绘制。软件自动生成的代码也可以手动修改，方便进一步学习与了解前端知识。生成的代码符合w3c规范，也可进行二次开发。这节课讲解的是基本布局教程，不涉及到vue交互。设计师与产品经理也可以用此软件开始制作原型。
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
09-02
主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
Bootstrap中自适应布局的一些设置 及 bootstrap辅助类文本背景不起作用的原因
最新发布
IT技术领域深耕10年+，北京大厂闯荡5年+
03-30 229
Boostrap本身就是一个响应式自适应的前端UI框架。使用栅格模式后，其自适应功能也能很好的运用。根据浏览器宽度的大小，Boostrap有四种栅栏类名提供使用，用法与Css样式表类名选择器样式调用是一样的：xs：col-xs-1 ~ col-xs-12，多列始终在一行内。sm：col-sm-1 ~ col-sm-12，多列在浏览器像素宽度大于等于768px时才在一行内。md：col-md-1 ~ col-md-12，多列在浏览器像素宽度大于等于992px时才在一行内。
非常好看的HTML5 Bootstrap搭建的后台管理系统模板
03-10
非常好看的HTML5 Bootstrap搭建的后台管理系统模板，是完整的一套，包括了登录，主页，菜单，各种表单样式 演示地址：http://usman.it/themes/charisma
HTML5基于Bootstrap UI后台管理系统
07-24
HTML5基于Bootstrap UI后台管理系统
Web前端基础：Bootstrap框架.pptx
05-06
;Bootstrap框架;前端开发是创建Web页面或app等前端界面的过程。 前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。 熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。;随着Web 越来越规范和标准的统一，Web组件化技术不断革新，移动端开发不断升华，出现了大量的开源前端框架： Bootstrap 主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。 jQuery jQuery 是一个JavaScript库。 jQuery 极大地简化了JavaScript编程。 VUE 一个构建数据驱动的 web 界面的渐进式框架。;Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产
前端开发常见的几种布局方式
weixin_65921319的博客
07-02 891
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比，而不是固定宽度。不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时展示，而且展示的方式像水流一样，一部分一部分的加载，静态的就是采用固定宽度。不管浏览器尺寸具体是多少，网页布局始终按照最初代码的布局来显示。
能获取到值的情况下，td中添加值只能用document.write (message)；填写
huxihua2006的博客
08-11 303
<!doctype html> Bootstrap 101 Template 生成销售订单展示 序号 返回信息 数据 是否成功 1 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
【Bootstrap】一个PC、平板、手机同时使用而且美观的登陆页面
编程记录，亲测有效
10-20 8964
Bootstrap如同前台框架，它已经布置好不少的CSS，前端开发的使用需要则直接调用即可。其网站的网址就是http://www.bootcss.com。使用Bootstrap能减少前端开发时候在CSS样子的布置时间 需要使用Bootstrap先在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用B
bootstrap响应式兼容PC和移动端图片无缝滚动效果demo
CodingNoob
09-15 6018
效果如图所示： js代码部分：/** * Created by Administrator on 2017/9/15. */(function(){ var firstDom = $("#zzScroll .item:last"); var scrollWidth = $("#zzScroll .item").innerWidth()+1; var scrollObj
bootstrap3.0教程之栅格系统原理(布局)
01-19
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列...
Bootstrap布局之栅格系统详解
11-25
概要，栅格系统针对pc,pad,移动端开发出响应式web页面，根据不同屏幕分辨率有针对不同的解决方法。 (0.1, 屏幕设备尺寸大于1200px 选择col-lg  (0.2. 屏幕设备尺寸在970px到1200px 选择col-md  (0.3. 屏幕设备尺寸...
Bootstrap响应式轮播图
qq_42779222的博客
06-01 1201
1.bootstrap响应式轮播图一般会准备俩套图：2000410（PC端） 和640340（移动端） ①大图在拉伸的时候，不做自适应变化，仅仅是俩边空白变小而已，而且需要居中显示 ②小图才需要自适应变化，随着屏幕而发生变化 2.具体的思路： ①大图用background来设置url、no-repeat、center、center，使其图片居中，再利用background-size 来控制其铺满全...
如果分别为移动端和PC端写一套HTML模板，也就是编写两套HTML模板，那么此时选择使用bootstrap，还有优点不？
昊虹AI笔记
09-01 334
如果分别为移动端和PC端写一套HTML模板，也就是编写两套HTML模板，那么此时选择使用bootstrap，还有优点不？
Bootstrap响应式布局原理
热门推荐
yihuoZhou的博客
04-05 2万+
Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。   栅格系统用于通过一系列的行（row）与列
h5-bootstrap开发移动端,电脑开发手机同步运行
请叫我欧皇！的博客
12-03 910
因为vscode同步开发pc和移动端在电脑的浏览器上看不是很适配啊,到手机上不同型号还是会有出入,所以想要在边开发,真机上可以看到效果---,方法如下1-必须保证手机和电脑在同一网段,也就是同一wifi下2-vscode中安装live server--->html文件通过右键的这个打开,打开后发现是这种格式的网址http://127.0.0.1:5502/index.html#3-我们找到右下键链接网络的小图标,之后右键点击,打开网络和Internet设置,打开后点击属性4-点击属性后下滑,找到电脑的ip地
【阿里百秀】一个简单的 bootstrap 响应式布局例子 兼容电脑、平板和手机
代码笔记
05-18 1024
【阿里百秀】一个简单bootstrap例子 兼容电脑、平板和手机
BootStrap实现网上商城首页的排版布局，可匹配不同尺寸的PC，平板，手机。
yuanzizhen0的博客
12-08 1495
商城首页                                                                                -->                                                                                           
bootstrap栅格系统、弹性盒子和组件布局网页的代码
07-10
当然，我可以为您提供一些使用Bootstrap栅格系统、弹性盒子和组件布局网页的代码示例。请注意，以下示例代码仅作参考，您可以根据自己的需求进行修改和扩展。 1. 使用Bootstrap栅格系统布局网页： ```html <!...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值