专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

web前端:bootstrap栅格系统:自适应多屏幕布局

ins518 2024-11-22 15:46:44 技术文章 7 ℃ 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;
    }
}

12345678910111213141516171819202122232425

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>

私信了解、获取更多学习资料！！！yidao~~

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表