Bootstrap4.x学习笔记【三】

　　　　　　　　　　栅格对齐与排列

一、栅格对齐

1.栅格系统中的行，可以进行垂直对齐操作。

  样式(作用域行间)
居顶(默认) .align-items-start
居中 .align-items-center
居底 .align-items-end

 

2.栅格系统中的列来说，也有三种垂直居中的方法

  样式(作用域列间)
居顶(默认) .align-self-start
居中 .align-self-center
居底 .align-self-end

 

3.不足 100%填充的行实现水平对齐方式

  样式(作用域行间)
居左(默认) .justify-content-start
居中 .justify-content-center
居右 .justify-content-end
间隔相等(分散) .justify-content-around
两端对齐(分散) .justify-content-between

4.举例展示

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>栅格对齐与排列</title>

	<!-- 引入Bootstrap CSS -->
	<link rel="stylesheet" href="../css/bootstrap.css">

	<!-- 移动设备优先 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<style>
		.row {
			height: 100px;
			margin: 20px 0;
			border: dashed 1px red;
		}
		.c {
			height: 30px;
			border: solid 1px blue;
		}
	</style>
</head>
<body>
	
<div class="container">
	<div class="row align-items-center">
		<div class="c col align-self-start">第一列</div>
		<div class="c col align-self-center">第二列</div>
		<div class="c col align-self-end">第三列</div>
	</div>

	<div class="row align-items-end">
		<div class="c col">第一列</div>
		<div class="c col">第二列</div>
		<div class="c col">第三列</div>
	</div>

	<div class="row justify-content-center">
		<div class="c col-3">第一列</div>
		<div class="c col-3">第二列</div>
		<div class="c col-3">第三列</div>
	</div>

	<div class="row justify-content-end">
		<div class="c col-3">第一列</div>
		<div class="c col-3">第二列</div>
		<div class="c col-3">第三列</div>
	</div>

	<div class="row justify-content-around">
		<div class="c col-3">第一列</div>
		<div class="c col-3">第二列</div>
		<div class="c col-3">第三列</div>
	</div>

	<div class="row justify-content-between">
		<div class="c col-3">第一列</div>
		<div class="c col-3">第二列</div>
		<div class="c col-3">第三列</div>
	</div>
</div>

<br/>



<!-- 引入jQuery文件 -->
<script src="../js/jquery-3.5.1.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>

 

　　

 

二、栅格排列

栅格的列可以排序，使用.order-N，N 最大值为 12

<div class="container">
    <!-- 给一个三列的行的第一列排到最后 -->
    <div class="row">
        <div class="c col-3 order-3">第一列</div>
        <div class="c col-3 order-1">第二列</div>
        <div class="c col-3 order-2">第三列</div>
    </div>

    <!-- 使用.order-first，强行设置列为第一列，而.order-last 为最后一列 -->
    <div class="row">
        <div class="c col-3 order-last">第一列</div>
        <div class="c col-3">第二列</div>
        <div class="c col-3 order-first">第三列</div>
    </div>

    <!-- 使用.offset-N 或.offset-*-N 来设置列的偏移量，1 表示一个栅格列 -->
    <div class="row">
        <div class="c col-3 offset-1">第一列</div>
        <div class="c col-3">第二列</div>
        <div class="c col-3 offset-2">第三列</div>
    </div>

    <!-- 使用.ml-N 或.mr-N 来微调列距离，使用.ml-auto 和.mr-auto 来左右对齐 -->
    <div class="row">
        <div class="c col-3">第一列</div>
        <div class="c col-3 ml-2">第二列</div>
        <div class="c col-3 ml-auto">第三列</div>
    </div>

</div>

posted @ 2020-07-17 10:31  小风车吱呀转  阅读(243)  评论(0)    收藏  举报