BootStrap-栅格系统

最新推荐文章于 2022-11-03 21:54:34 发布

guardwhy

最新推荐文章于 2022-11-03 21:54:34 发布

阅读量1.8k

点赞数 7

本文链接：https://blog.csdn.net/hxy1625309592/article/details/112169199

版权

本文详细介绍了Bootstrap的栅格系统，包括其响应式设计、移动设备优先的特点，以及如何通过行和列的组合创建页面布局。内容涵盖栅格系统的组成、两种容器类型、设备查询@media的使用、类样式名的解释，还有如何进行不同屏幕适配和控制显示隐藏的技巧。

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

1.1 栅格系统组成

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12格。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

1.2 两种容器

容器的类样式名	特点
container	固定宽度的容器，在不同的设备上宽度不同
container-fluid	始终占屏幕宽度的100%

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--网页编码的类型-->
  <meta charset="utf-8">
  <!--使用最新的支持H5浏览器内核来解析-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--
  视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

  <style type="text/css">
	div{
    
        border: 2px solid red;
		height: 100px;
	}
  </style>
  <title>容器创建</title>

  <!-- 导入文件：bootstrap.css -->
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
	container：不同的设备上有不同的固定宽度
  </div>
  <div class="container-fluid">
	container-fluid：100%宽度显示
  </div>
  <!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 -->
  <script src="../static/js/jquery-3.1.1.js"></script>
  <!-- 加载 Bootstrap的所有 JavaScript插件-->
  <script src="../static/js/bootstrap.min.js"></script>
</body>
</html>

执行结果

1.3 设备查询@media

通过不同的设备类型和条件定义样式表规则。设备查询让CSS可以更精确作用于不同的设备类型和同一设备的不同条件。设备查询的大部分特性都接受min和max用于表达“大于或等于”和“小于或等于”。打开文件：bootstrap.css，可以看到以下代码：

.container {
   
  padding-right: 15px;  内右边距
  padding-left: 15px;   内左边距
  margin-right: auto;   块级元素居中
  margin-left: auto;

最低0.47元/天解锁文章

guardwhy

关注

7
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫