Bootstrap媒体查询及网格系统

最新推荐文章于 2024-08-29 12:53:22 发布

让我试试哈

最新推荐文章于 2024-08-29 12:53:22 发布

阅读量296

点赞数

分类专栏： boostrap学习文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_42822489/article/details/112860877

版权

boostrap学习专栏收录该内容

3 篇文章

订阅专栏

Bootstrap媒体查询及网格系统

前言
一、媒体查询的使用

文章目录

前言
一、媒体查询的使用

前言

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

提示：以下是本篇文章正文内容，下面案例可供参考。

一、媒体查询的使用

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
以上参考菜鸟教程，接下来对其加上自己的案例补充。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

以上的代码是加在style。
比如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
	@media screen and (min-width:600px) and (max-width:900px){
	  body {background-color:#000000;}
	}
	</style>
</head>
<body>

</body>
</html>