学习记录-bootstrap-排版_bootstrap 如何排版-优快云博客

本文链接：https://blog.youkuaiyun.com/sinbowper/article/details/146473771

bootstrap排版

标题
段落
图片
表格
按钮

阶段案例

在这里插入图片描述

案例实现步骤

1. 准备阶段

了解bootstrap排版的基础知识

标题

类名设置	效果
.h1/2/3/4/5/6	得到标题效果
.small	当font-weight为400时，small类中字体大小为父元素标签的百分十八十
.display-num	num为1-6，标题更大，更醒目

段落

类名设置	效果
.lead	段落突出显示
.mark/.del/.s/.ins/.u/.strong/.em	分别给文本设置对应的样式
abbr	缩略语标签
.text-end/center/start	文本右中左对齐
.blockquote	引用文本内容
code	允许在网页上显示行内代码
pre	允许在网页上显示代码块

图片

类名设置	效果
.img-fluid	添加图片响应式，等同于{max-width:100%;height:auto;}
.img-thumbnail	图片缩略图效果，等同于给图片加一个1px的虚线边框和圆角
.float-start/center/end	通过浮动实现图片对齐
.text-start/center/end	通过text实现图片对齐
.d-block/inline-block/inline	改变元素的display样式
.mx-auto	可以实现块级元素的居中对齐
.rounded	图片圆角效果
.rounded-circle	图片椭圆形效果

表格

类名设置	效果
.table	优化了默认的表格样式
.table-borderless/border	设置表格边框的出现和消失
.table-striped	设置条纹状的表格
.table-hover	设置鼠标悬停样式(设置在表格类名上，悬停样式变为active)
.table-light/dark…:	设置鼠标背景样式风格

按钮

类名设置	效果
.btn-light/dark	改变按钮背景颜色

2. 布局分析

该案例分为上下两个部分，头部为5个按钮，大小为内容填充，第一个把后面4个用.me-auto推到右面，按钮用btn-颜色来设置颜色，再设置mt上边距。下部分为表格，使用.table优化表格样式，表头thead有背景色.btn-active，表格上设置了鼠标悬停效果.table-hover，再设置mt上边距

  <div class="container-fliuid">
    <div class="d-flex justify-content-left mt-5">
      <div class="me-auto"><button type="button" class="btn btn-dark text-white">网站后台人员管理系统</button></div>
      <div><button class="btn btn-dark text-white">新增</button></div>
      <div><button class="btn btn-info">删除</button></div>
      <div><button class="btn btn-light">编辑</button></div>
      <div><button class="btn btn-dark text-white">角色授权</button></div>
    </div>
    <table class="table mt-5 table-hover">
      <thead class="table-active">
        <tr>
          <th> <input type="checkbox"></th>
          <th>角色编号</th>
          <th>角色名称</th>
          <th>创建时间</th>
          <th>角色描述</th>
        </tr>
      </thead>
      <tbody class="table-hover">
        <tr>
          <td><input type="checkbox"></td>
          <td>100001</td>
          <td>系统管理员</td>
          <td>2020-10-20</td>
          <td>张三</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>100002</td>
          <td>普通用户</td>
          <td>2020-10-20</td>
          <td>李四</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>100003</td>
          <td>VIP会员</td>
          <td>2020-10-20</td>
          <td>王五</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>100004</td>
          <td>超级VIP会员</td>
          <td>2020-10-20</td>
          <td>赵六</td>
        </tr>
      </tbody>
    </table>
  </div>