当前位置 : 主页 > 网页制作 > Bootstarp >

bootstrap文档第二遍&小结

来源:互联网 收集:自由互联 发布时间:2021-06-12
$格系统 .row .col .col .col 自适应栅格三等分 .row .col .col .col .col 自适应栅格四等分 .row .justify-content-center/start/end .col .col 格整体居行的中/左/右 .row .justify-content-around/between .col .col 格分别居

$格系统

.row > .col .col .col 自适应栅格三等分
.row > .col .col .col .col 自适应栅格四等分

.row .justify-content-center/start/end >.col .col 格整体居行的中/左/右
.row .justify-content-around/between >.col .col 格分别居行的两边,自适应/非自适应

.row .align-self-start/center/end > .col .col 格整体居列的上/中/下

.row > .col-md-8 .col-xs-6 + .col-md-4 .col-xs-6 当页面宽>768px,格8,4分 当页面宽>576px&&<768px,格6,6分

.offset-md-4 右偏移4格

mr-auto 右侧边距自适应 mr-1/2/3/4/5

$内容

主副标题.png

段落中字体好看一些而已.png

名人名言用得到.png

-ul

  • .list-unstyled 去除ul的样式

  • .list-inline > .list-inline-item 列表内容在一行内对齐显示,而不是呈几列显示

  • .row/.form-inline > .col-md-3 + .col-md-9 左3右9可用于表单格式

-码

在网页中显示代码.png

-图片

  • .img-thumbnail 图片外加边框
  • .img-rounded 图片更加圆润

-表格

  • .table-striped 斑马条纹
  • .table-bordered 表格加上边框
  • .table-hover 鼠标移入效果
  • .table-dark/light/primary/secondary/active/danger/info/waring/success 表格背景:暗、亮、主要、次要、选中。。。。。
  • .bg-tansparent 清除背景颜色
  • .table-sm 表格更紧凑
  • .caption 表格标题

$组件

-警告弹框

  • .alert alert-danger/...

    -徽章

  • .badge badge-danger/...
  • .badge-pill

    -层级目录

    注意:bs4里的层级目录有默认的灰色背景,可以通过 .bg-tansparent 清除背景色
    层级目录样式图.png
    层级目录样式.png

-按钮/按钮组

  • .btn
  • .btn-primary/danger... (btn-secondary取代了btn-default)
  • .btn-outline-primary/danger... 按钮边框颜色
  • .btn-lg/sm 按钮大小
  • .btn-block 块级按钮(占整行)
  • .btn-group 按钮组
  • .btn-group-vertical 按钮组垂直放置
  • .aria-disabled="false"/"true" 激活/禁用

-卡片(3.0里的面板 很多样式,具体看bs官网文档)

  • .card
  • .card > .card-img-top +( .card-body >.card-title + .card-subtitle + .card-text + .card-link)

-轮播图

.carousel

-折叠(坍方)

折叠大致样式.png

-下拉菜单

style="min-width:100%",下拉框大小自适应

-表单(形式)

  • .form-group
  • .form-control-file
  • .form-inline

-超大屏幕

-列表组

  • .list-group > .list-group-item
  • .list-group-flush 删除列表组的左右边框
  • .list-group-item-danger/waring/.....列表组背景

-模态框(语气)

-导航栏

-分页

  • ul>li>a
  • .pagination > .page-item > .page-link
  • .pagination-sm 小型号的分页
  • .pagination + .justify-content-end 分页整体居右

    -弹出框

    弹出框.png

-进度条

  • .progress

-滚动监听scroll

-提示信息

和弹出框相似,知识不需要点击

$实用工具(公用事业)

-边框

  • .border 为元素设置边框
  • .border-top/right/bottom/left 边框1.png
  • .border-0 清除元素边框
  • .border-top/right/bottom/left-0边框2.png
  • .border-danger/waring/... 设置边框颜色

    -边角

  • .rounded
  • .rounded-top/right/bottom/left/circle/0边角.png

    -浮动&清除浮动

  • .float-left/right/none
  • .clearfix

    -关闭图标

  • .close
  • .aria-hidden="true"关闭图标.png

    -颜色

  • .text-muted /dark /white /light /danger /waring /info /success /primary /secondary

    -显示与隐藏

  • .d-none /inline /inline-block /block /table /table-cell /table-row /flex /inline-flex
  • .d-xs/sm/md/lg/xl-none 当屏幕宽度在xs/sm/md/lg/xl时,元素隐藏
  • .d-xs/sm/md/lg/xl-block 当屏幕宽度在xs/sm/md/lg/xl时,元素显示

这里要考虑到事件冒泡的因素,如 .d-sm-block,指的是从sm冒泡往上都是显示状态。再如.d-none .d-md-block .d-lg-none指全局隐藏,md往上显示,lg往上隐藏,综合过后就是只有md显示
显示隐藏具体分析.png

-音频,视频等嵌入

  • 16by9 指16:9视频嵌入.png

-弹性flex(柔性)

内容较多,查文档

  • .d-flex
  • .d-inline-flex
  • .flex-row 行内水平(左边起)
  • .flex-row-reverse 行内水平反向(右边起)
  • .flex-column 垂直列
  • .flex-column-reverse 反向垂直列
  • .flex-wrap 包裹

-位置

  • .fixed-top/bottom

-尺寸sizing

  • .w-80 宽度80%
  • .mw-100 最大宽度100%
  • .h-75 高度75%
  • .mh-100% 最大高度100%

-间距

  • .mr-1 右外边距margin-right:$spacer*0.25
  • .pl-5 左内边距padding-left:$spacer*3
  • .px-3 左右内边距
  • .my-4 上下外边距
  • .my-auto 垂直居中(在div中只有唯一当前元素情况下可用)
  • .mx-auto 水平居中(在div中只有唯一当前元素情况下可用)
  • .mr-auto 右外边距自适应(这个可用于将右侧元素挤到最右边)

-文本

  • .text-left/center/right 文本靠左/居中/对齐
    -.text-lowercase/uppercase 字母统一修改成小写/大写
  • .font-weight-bold/normal/light 加粗/正常/轻量
  • .font-italic 斜体

-垂直对齐

  • .align-baseline/top/middle/bottom
  • .align-text-top/bottom垂直对齐.png
网友评论