bootstrap--1

Container容器

  

    bootstrap包含了一个强大的移动优先的网络系统，基于一个12列的布局

 

col-xl-3  其中的3代表占 3列  一行可以放4个 

超过12列 则会自动换行

中间字母的含义：

 例如：xl 当分辨率大于1200px可以同一行显示，小于1200则换行输出，如下图

 

 

 如果中间的部分什么也不写，则在范围内，始终在同一行显示

等宽布局

单独只写  .col  会进行等宽布局（且一行可以大于12列）

想要换行可以 写多个 “row” 块

可变宽度的弹性空间

根据内容填空大小

垂直对齐

在row上面加： .align-items-start/centre/end

在col上面加： .align-self-start/centre/end

水平对齐

在row上面加  justify-content-start/center/end/around（等距）/between（左右对齐）

等距：

between:

 间隙沟槽清除

在row上面加no-gutters：

没有加之前 会有间隙，加之后会消除

class顺序重定义

用order-num排序：

 

用 order-first可直接变为第一个---和 order  - （-1）一个效果

 列偏移  

用 offset-num（数字代表偏移的格子）

 

 文本内联元素

<p><del>删除线</del></p>

<p><s>删除线</s><p>

<p><ins>下划线</ins><p>

<p><u> 下划线</u><p>

abbr缩略语

 class="initialism"------字体大写

blockqquote 来源备注与引用

 

 

 列表样式初始化

 list-style:none  ----->去掉li前面的符号

 

分行或者单行多列并排显示

多列放在同一行显示：

 

dl表格式水平描述