bootstrap响应式布局

最新推荐文章于 2024-08-01 00:22:38 发布

穿越到未来calc

最新推荐文章于 2024-08-01 00:22:38 发布

阅读量1.5k

点赞数

分类专栏：前端代码文章标签：前端

本文链接：https://blog.csdn.net/qq_52179917/article/details/125853515

版权

前端代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了响应式布局的关键元素——container容器，并展示了不同屏幕尺寸下的宽度设置。同时，通过一个简单的响应式导航栏实例，阐述了如何实现布局的自适应。此外，还提及了Bootstrap这一快速开发框架，特别是其强大的栅格系统，用于创建灵活的响应式布局。

摘要由CSDN通过智能技术生成

响应式开发里面首先需要一个布局容器：class = "container"

布局container 容器：

            /* 超小屏幕下小于768 布局容器的宽度为100% */
			@media screen and (max-width: 767px) {
				.container{
					width: 100%;
				}
			}
			/* 小屏幕下，屏幕大于等于768 布局容器的宽度为750 */
			@media screen and (min-width: 768px) {
				.container{
					width: 750px;
				}
			}
			/* 中小屏幕下，大于等于992 是970*/
			@media screen and (min-width: 992px) {
				.container{
					width: 970px;
				}
			}
			/* 大屏幕下，大于等于1200 是1170*/
			@media screen and (min-width: 1200px) {
				.container{
					width: 1170px;
				}
			}

简单的响应式导航栏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			.container {
				width: 900px;
				margin: 0 auto;
			}
			.container ul li {
				float: left;
				width: 93.75px;
				height: 30px;
				background-color: #4abd18;
			}
			li {
				border:5px solid #bd88bc;
			}
			/*媒体查询**/
			@media screen and (max-width: 767px) {
				.container {
					width: 100%;
				}
				.container ul li {
					width: 33.33%;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul>
				<li>导航栏</li>
				<li>导航栏</li>
				<li>导航栏</li>
				<li>导航栏</li>
				<li>导航栏</li>
				<li>导航栏</li>
				<li>导航栏</li>
				<li>导航栏</li>
			</ul>
		</div>
	</body>
</html>