Bootstrap 对齐和排列

对齐与排列

==============================================
row样式
居左(默认) .justify-content-start
居中 .justify-content-center
居右 .justify-content-end
间隔相等(分散) .justify-content-around
两端对齐(分散) .justify-content-between
col列样式
居顶(默认) .align-items-start
居中 .align-items-center
居底 .align-items-end
栅格的列可以排序,使用.order-N,N 最大值为 12;
使用.order-first,强行设置列为第一列,而.order-last 为最后一列;
使用.offset-N 或.offset-*-N 来设置列的偏移量,1 表示一个栅格
使用.ml-N 或.mr-N 来微调列距离,使用.ml-auto 和.mr-auto 来左右

内容排版

==============================================

一、标题类

1、使用<h1>~<h6>可以创建不同尺寸的标题文字;
2、如果是使用其它元素标签,比如<p>或<div>,调用.h1~6 同样实现大标
3、通过.text-muted 样式,构建大标题的附属小标题;
4、还有一种更大型,更加醒目的标题方式:.display-1~4;

二、文本类

1、想要指定一些段落中重要的内容,可以使用.lead 强调;
2、比较常用的文本内联元素,来自 HTML5
3、也可以使用.mark,.small 等方式实现同样元素的效果;
4、使用.title 样式和<abbr>缩略语给文本做提示;
5、使用 Blockquote 设置来源备注或引用;
6、使用.blockquote-footer 设置底部备注来源;
7、可以对内容进行居中对齐.text-center 或居右对齐.text-right;

三、列表类

1、使用.list-unstyled 样式,可以将列表初始化
2、使用.list-inline 和.list-inline-item 结合实现多列并排列表;
3、使用 dl、dt 和 dd 可以实现水平描述,使用.text-truncate 可以省略溢出;

原文地址:https://www.cnblogs.com/seeding/p/15349229.html