详解Bootstrap网格垂直和水平对齐方式

2024-08-23 10:17:17

1、Bootstrap网格布局

上一节我们介绍了Bootstrap中的网格，网格在网页布局中是一个重点和难点，布局是网页设计的起点和基础，一定要花功夫弄懂，最起码把我写的教程介绍的内容弄懂，因为我写的都是最常用的和最基础的。当然对于一个有一定基础的网页设计师，这些内容相信一看就懂，今天我们进一步学习网格布局。

本节内容涉及到通用类的弹性盒子（Flex）中的部分功能。

2、垂直对齐

2.1 row标签中设置垂直对齐

通过在row标签中添加align-items-start、align-items-center、align-items-end可以更改行在容器中的垂直对齐方式，以上三个标签分别为顶部对齐、居中对齐、底部对齐。以下是一段演示代码和效果图，代码中css代码设置背景色和间距，方便查看效果。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div class="container">

          <div class="row align-items-start">
            <div class="col"> </div>
            <div class="col"></div>
            <div class="col"></div>
          </div>

          <div class="row align-items-center">
            <div class="col"> </div>
            <div class="col"></div>
            <div class="col"></div>
          </div>

          <div class="row align-items-end">
            <div class="col"> </div>
            <div class="col"></div>
            <div class="col"></div>
          </div>

        </div>

     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

2.2 col标签中设置垂直对齐

通过在col标签中添加align-self-start、align-self-center、align-self-end可以更改列在行中的垂直对齐方式，以上三个标签分别为顶部对齐、居中对齐、底部对齐。以下是一段演示代码和效果图，代码中css代码设置背景色和间距，方便查看效果。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div class="container">

          <div class="row align-items-start">
            <div class="col  align-self-start"> </div>
            <div class="col align-self-center"></div>
            <div class="col align-self-end"></div>
          </div>

        </div>

     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3、水平对齐

3.1 row标签中设置垂直对齐

通过在row标签中添加justify-content-start、justify-content-center、justify-content-end、justify-content-around、justify-content-between、justify-content-evenly可以更改列在行中的水平对齐方式。以下是一段演示代码和效果图，代码中css代码设置背景色和间距，方便查看效果。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <style>
     .row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;}
      .col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div class="container">

          <div class="row justify-content-start">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-center">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-end">
            <div class="col-4"> </div>
## <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-around">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-between">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>

          <div class="row justify-content-evenly">
            <div class="col-4"> </div>
            <div class="col-4"></div>
            <div class="col-4"></div>
          </div>
        </div>

到此这篇关于详解Bootstrap网格垂直和水平对齐方式的文章就介绍到这了,更多相关Bootstrap网格垂直和水平对齐方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Bootstrap 网格系统布局详解

Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法. 一句话概括:网页设计中的网格用于组织内容,让网站易于浏览,并降低用户
第一次接触神奇的Bootstrap网格系统

本篇将主要介绍Bootstrap的网格系统. 网格系统的实现是通过定义容器大小,平分12份(或24份.32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统. Bootstrap中的网格系统就是将容器平分成12份. Bootstrap的网格系统用来布局,其实就是列的组合,一共有四种基本的用法: 1.列组合更改数字来合并列(原则:列总和数不能超12),例如: <!DOCTYPE HTML> <html> <head> <me
论Bootstrap3和Foundation5网格系统的异同

Bootstrap和Foundation是我最喜欢的两个前端框架,尤其是在快速开发网站的原型上.它们都提供了随时可用的组件,加快了我的工作流程.除了一些细小差别,在我看来它们大部分的基本特征都是类似. 在这篇文章里,我将介绍它们网格的基本构造.首先,我将会向你展示它们是如何构建的,描述它们的主要部件,以及它们对不同屏幕的大小表现出的差异.然后,我将通过一个真实例子的实践来帮助你增添知识. 让我们一起开始吧! 比较一:媒体查询的比较在分析Bootstrap和Foundation的栅格结构之前,让
Bootstrap网格系统详解

bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row)必须包含在容器(.container)中,以便其赋予合适的对齐方式和内距(padding) <div class="container"> <div class="row"></div> </div> 2.在行(.row
第四篇Bootstrap网格系统偏移列和嵌套列

偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div> <div>col2</div> </div> Class="col-sm-2 col-sm-offset-1"表示该列占两份,并且往右移动一份,看到的效果如下: Col-sm-offset-1表示右移一份.Col-sm-offset-2表示右移两份依次类推.Col-xs类不支持偏移列,但是它可以通过简单的使用一个空的单元格来达到效果.
Bootstrap网页布局网格的实现

目录 1.Bootstrap网格系统的工作原理 1.1 十二栅格系统 1.2 Bootstrap 网格系统标签 1.3 Bootstrap 网格系统规则 2.Bootstrap 网格系统中单元格宽度设置 2.1 默认等宽布局 2.2 设置每个列宽 2.3 可变宽度的列 2.4 自动换行的列 3.Bootstrap 网格响应式布局 3.1 什么是响应式布局 3.2 Bootstrap 网格系统屏幕大小划分 3.3 Bootstrap 网格响应式布局实例 3.4 如果你不想响应 1.Bootstra
BootStrap3学习笔记(一)之网格系统

如果显示网格,代码应类似这样: <div class="container"> <div class="row"> <div class="col-md-4"><p>Box 1</p></div> <div class="col-md-4"><p>Box 2</p></div> <div class=&
第三篇Bootstrap网格基础

Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里,可以是div,内容放置在列内,网页设计中的网格用于布局内容,让网站易于浏览,下面是一个用bootstrap网格布局的例子. <div> <div>col2</div> <div>col10</div> </div>
bootstrap网格系统使用方法解析

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份. 工作原理 1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: <div class="container"> <div class="row"&
详解Bootstrap网格垂直和水平对齐方式

目录 1.Bootstrap网格布局 2.垂直对齐 2.1 row标签中设置垂直对齐 2.2 col标签中设置垂直对齐 3.水平对齐 3.1 row标签中设置垂直对齐 1.Bootstrap网格布局上一节我们介绍了Bootstrap中的网格,网格在网页布局中是一个重点和难点,布局是网页设计的起点和基础,一定要花功夫弄懂,最起码把我写的教程介绍的内容弄懂,因为我写的都是最常用的和最基础的.当然对于一个有一定基础的网页设计师,这些内容相信一看就懂,今天我们进一步学习网格布局. 本节内容涉及到通用类
详解bootstrap用dropdown-menu实现上下文菜单

详解bootstrap用dropdown-menu实现上下文菜单写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处鼠标在别处点击后,该菜单消失实现方法: 在html中定义一个普通的没有触发条件的dropdown-menu,然后写这个menu的父容器的监听即可实现. 代码: <div id="settingInGraph"> <ul class="dropdown-menu" role="menu&
详解BootStrap中Affix控件的使用及保持布局的美观的方法

Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的开始的时候应用affix的元素的class中会自动添加affxi-top属性当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class
详解Bootstrap各式各样的按钮(推荐)

Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我
详解ubuntu安装CMake的几种方式

apt安装CMake sudo apt install cmake 这种方式安装方便,缺点是如果想要自己交叉编译Android平台的opencv会提示版本太低,因为ubuntu16.04源里的cmake版本只有3.5.1,而Android交叉编译工具链android.toolchain.cmake要求cmake版本最低是3.6.0 下载源码编译CMake 到cmake官网下载最新的cmake https://cmake.org/download/ 下载后解压,然后进入目录执行: ./bootst
详解IOS 单例的两种方式

详解IOS 单例的两种方式方法一: #pragma mark - #pragma mark sharedSingleton methods //单例函数 static RtDataModel *sharedSingletonManager = nil; + (RtDataModel *)sharedManager { @synchronized(self) { if (sharedSingletonManager == nil) { sharedSingletonManager = [[sel
详解vue 路由跳转四种方式 (带参数)

1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para
详解Java Callable接口实现多线程的方式

在Java 1.5以前,创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口.无论我们以怎样的形式实现多线程,都需要调用Thread类中的start方法去向操作系统请求io,cup等资源.因为线程run方法没有返回值,如果需要获取执行结果,就必须通过共享变量或者使用线程通信的方式来达到效果,这样使用起来就比较麻烦. 而自从Java 1.5开始,就提供了Callable和Future,通过它们可以在任务执行完毕之后得到任务执行结果. Callable和Future介
详解servlet调用的几种简单方式总结

servlet调用的几种简单方式这里总结的是我在学习web开发的过程中需要用到的几种比较常见的用于转发和调用servlet的方式,这些方式的使用率非常高.在网上总结了相关的方法,大多对于初学者不是特别的友好,自己总结了一下. 1.servlet直接转发到另一个servlet 我们在进行jsp页面点击按钮进行登录的时候,首先需要登录到进行登录检查的servlet,但是在下个jsp页面,我们需要那个页面通过servlet进行转发,所以需要从servlet直接跳转到另一个servlet,其实写法很简
详解C++ 中的三种继承方式

public 方式继承基类成员对派生类的可见性对派生类来说,基类的公有成员和保护成员可见,基类的公有成员和保护成员作为派生类的成员时,它们都保持原有的状态;基类的私有成员不可见,基类的私有成员仍然是私有的,派生类不可访问基类中的私有成员. 基类成员对派生类对象的可见性对派生类对象来说,基类的公有成员是可见的,其他成员是不可见的. 所以,在公有继承时,派生类的对象可以访问基类中的公有成员,派生类的成员函数可以访问基类中的公有成员和保护成员. 简单来说,派生类能访问基类的public, prote