学习记录-bootstrap-排版

bootstrap排版

  1. 标题
  2. 段落
  3. 图片
  4. 表格
  5. 按钮

阶段案例

在这里插入图片描述

案例实现步骤

1. 准备阶段

了解bootstrap排版的基础知识

  1. 标题
类名设置效果
.h1/2/3/4/5/6得到标题效果
.small当font-weight为400时,small类中字体大小为父元素标签的百分十八十
.display-numnum为1-6,标题更大,更醒目
  1. 段落
类名设置效果
.lead段落突出显示
.mark/.del/.s/.ins/.u/.strong/.em分别给文本设置对应的样式
abbr缩略语标签
.text-end/center/start文本右中左对齐
.blockquote引用文本内容
code允许在网页上显示行内代码
pre允许在网页上显示代码块
  1. 图片
类名设置效果
.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图片椭圆形效果
  1. 表格
类名设置效果
.table优化了默认的表格样式
.table-borderless/border设置表格边框的出现和消失
.table-striped设置条纹状的表格
.table-hover设置鼠标悬停样式(设置在表格类名上,悬停样式变为active)
.table-light/dark…:设置鼠标背景样式风格
  1. 按钮
类名设置效果
.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>

小结

接下来我将继续阅读《Bootstrap 5x 从入门到实战》这本书籍,学习bootstrap方面的知识,持续更新。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值