zoukankan      html  css  js  c++  java
  • 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 可以省略溢出;

  • 相关阅读:
    springboot1.x+dubbo案例
    dubbo相关的博文
    druid监控配置
    Tomcat启动报错整理
    Hibernate @OneToMany等注解设置查询过滤条件等
    异常处理
    复杂的xml转化为java实体
    简单Java类与XML之间的转换
    mysql errno 150
    JdbcTemplate进行查询
  • 原文地址:https://www.cnblogs.com/seeding/p/15349229.html
Copyright © 2011-2022 走看看