Bootstrap布局（一）

我是一颗好李子

已于 2022-09-29 16:41:04 修改

阅读量2.8k

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap 前端

于 2022-09-29 13:01:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_69034993/article/details/127104521

版权

Bootstrap 专栏收录该内容

9 篇文章

订阅专栏

Bootstrap Web前端框架技术

1、视口

视口（Viewport）最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。

视口主要包括布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。

视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。

①布局视口：

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

布局视口的默认宽度一般是768px、980px或1024px等（取决于不同移动端设备的设置），这个宽度并不适合在手机屏幕中展示。

当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。

②视觉视口:

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。

③理想视口：

理想视口是指对设备来讲最理想的视口尺寸。

采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。在开发中，为了实现理想视口，需要给移动端页面添加<meta>标签配置视口，通知浏览器来进行处理。

2、利用浏览器模拟手机屏幕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用浏览器模拟手机屏幕</title>
		<style type="text/css">
			.title{
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="title">
			小猪佩奇
		</div>
		<img src="img/pic1.jpg"/>
	</body>
</html>

结果图：

3、利用<meta>标签设置视口

在传统的PC端网页开发中，并没有使用过meta标签来设置视口，此时浏览器会按照默认的布局视口宽度来显示网页。如果希望网页在浏览器中以理想视口的形式呈现，就需要利用<meta>标签设置视口。

在<meta>标签中，将name属性设为viewport，即可设置视口。

在<meta>标签的基本语法中，将<meta>标签的content属性的值设置为“width=device-width”表示通知浏览器，布局视口的宽度应该与设备的宽度一致，示例代码如下：

<meta name="viewport" content="width=device-width">

将这串代码加入上面小猪佩奇的代码中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用浏览器模拟手机屏幕</title>
        <meta name="viewport" content="width=device-width">
		<style type="text/css">
			.title{
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="title">
			小猪佩奇
		</div>
		<img src="img/pic1.jpg"/>
	</body>
</html>

4、媒体查询

CSS的Media Query媒体查询（也称为媒介查询）用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。媒体查询由媒体类型和条件表达式组成。常用的媒体查询属性如下。

设备宽高： device-width、device-height。

渲染窗口的宽和高：width、height。

设备的手持方向：orientation。

设备的分辨率：resolution。

媒体查询的使用方法有两种，即内联式和外联式。下面利用媒体查询实现当文档宽度大于640px 时，对CSS样式进行修改。

内联式：内联式是直接在CSS中使用。

<style>
  @media screen and (min-width:640px){
    css属性: css属性
  }</style>

外联式：外联式是作为单独的CSS文件从外部引入的

<link href="style.css" media="screen and (min-width:640px)" ref="stylesheet">

例1：如果屏幕宽度小于 640 像素则修改背景颜色为浅蓝色

<style>
  @media screen and (max-width:640px){
     body {
        background-color:lightblue;
    }
  }</style>

例2：当设备小于575px时颜色为黄绿色，在575px到768px之间时是灰色，大于768px时为浅黄色，在992px到1200px之间时是绿色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			@media screen and (max-width:575px ) {
				.container{
					width: 100%;
					background: greenyellow;
				}
			}
			@media screen and (min-width:575px ) {
				.container{
					width: 100%;
					background: gray;
				}
			}
			@media screen and (min-width: 768px) {
				.container{
					width: 100%;
					background: lightgoldenrodyellow;
				}
			}
			@media screen and (min-width:992px ) {
				.container{
					width: 960px;
				}
			}
			@media screen and (min-width: 1200px) {
				.container{
					width: 1140px;
					background: green;
				}
			}
			.container{
				height: 50px;
				/*background: #ddd;*/
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="container">
			布局容器
		</div>
	</body>
</html>

5、响应式栅格系统

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.row{
				width: 100%;
			}
			.row:after{
				clear: left;
				content: '';
				display: table;
			}
			[class^='col']{
				float: left;
				background-color: #e0e0e0;
			}
			.col1{
				width: 25%;
			}
			.col2{
				width: 50%;
			}
			@media screen and (max-width:768px ) {
				.row{
					width: 100%;
				}
				[class^='col']{
					float: none;
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="row">
			<header>页头</header>
		</div><br />
		<div class="row">
			<nav class="col1">导航</nav>
			<nav class="col2">主要内容</nav>
			<nav class="col1">侧边栏</nav>
		</div>
		<div class="row">
			<footer>页尾</footer>
		</div><br />
	</body>
</html>

结果图：

浏览器窗口大于768px时，导航、主要内容和侧边栏3个模块呈横向排列。

浏览器窗口小于或等于768px时，导航、主要内容和侧边栏3个模块呈纵向排列。

6、Bootstrap布局容器概念

类名	超小设备<576px	平板≥576px	桌面显示器≥768px	大桌面显示器≥992px	超大桌面显示器≥1200px
.container	100%	540px	720px	960px	1140px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-xl	100%	100%	100%	100%	1140px
.container-fluid	100%	100%	100%	100%	100%

container类：

Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。

根据屏幕宽度的不同，利用媒体查询设定固定的宽度，当浏览器改变大小时，页面会呈现阶段性的变化。

.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px。

container-fluid类：

Bootstrap 4中的.container-ﬂuid类是一种占据全部视口的容器。不管屏幕宽度是多少，始终保持100%的宽度。当一个元素需要始终横跨整个视口时，可以使用.container-ﬂuid类

container-sm， container-md， container-lg， container-xl类：

是Bootstrap 4.4中新增的功能，可以允许指定一个100%宽度的类，直到达到指定的端点为止。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>容器比较</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container border py-2 bg-light">
			container容器
		</div>
		<div class="container-fluid border py-2 bg-light">
			container-fluid容器
		</div>
		<div class="container-sm border py-2 bg-light">
			container-sm容器
		</div>
		<div class="container-md border py-2 bg-light">
			container-md容器
		</div>
		<div class="container-lg border py-2 bg-light">
			container-lg容器
		</div>
		<div class="container-xl border py-2 bg-light">
			container-xl容器
		</div>
	</body>
</html>

结果图：