学习记录-bootstrap-布局

bootstrap布局

1. 布局
2. 网格
3. 其他

阶段案例

案例实现步骤

1. 准备阶段

了解bootstrap布局的基础知识

1. 布局

类名设置	效果
.container	版心居中，存在响应式
.container-fluid	充满宽度
.pt-数字	增加padding-top
.container-sm/md/lg/xl/xxl	当页面宽度为特定大小时，元素宽度变为特定大小

2. 网格（以下可以混合嵌套搭配）

类名设置	效果
.col-	栅格化
.row>.col	有几个col就有几个等宽列
.row>.col-数字	自定义列宽，一共12份(如果相加大于12，则多的会到新行上
row>col-sm-auto	根据内容调整列宽
.row>.w-100	放入col之间，分割等宽列
.g-0	删除列内边距
.order-first	将列放到最前面
.order-last	将列放到最后面
.offset-md-数字	列偏移(12份中的一份)

3. 其他

类名设置	效果
.bg-light/dark/primary	增加背景颜色
.border	增加边框
.text-颜色	设置文字颜色

2. 布局分析

头部为充满宽度，背景色为primary，文字颜色为white
内容背景色为dark，包括左和右部分，左部分占比三分之二，其内部两列各占一半，背景色primary，右部背景色为light

		<div class="container-fluid header bg-primary text-white pt-3" style="text-align: center;">
    <h3>传统文化</h3>
  </div>
  <div class="container-fluid text-white">
    <div class="row">
      <div class="col-8 bg-dark text-white" style="text-align: center;">
        <h3>古诗两首</h3>
        <div class="row text-white bg-primary">
          <div class="col">
            <p>窗前明月光，疑是地上霜。</p>
            <p>举头望明月，低头思故乡。</p>
          </div>
          <div class="col">
            <p>春眠不觉晓，处处闻啼鸟。</p>
            <p>夜来风雨声，花落知多少。</p>
          </div>
        </div>
      </div>
      <div class="col bg-light text-dark">
        <p>好雨知时节，当春乃发生。</p>
        <p>此时此地好，知何似在人间。</p>
        <p>浊酒杯中酒，独倾杯中人。</p>
        <p>不知何时已，此恨何时休。</p>
      </div>
    </div>
  </div>

小结

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