20200819戚权

知识点BootStrap

容器:

​ 注意:boot默认只支持4个屏幕尺寸 xl lg md sm 不支持xs,boot中默认1个rem是16px。boot的css reset使用的方案是normalize.css

  1. .container:定宽容器,左右内边距15px,水平居中,每种不同分辨率下有不同的最大宽度(max-width)
  2. .container: 变宽容器,宽度永远是父级的100%

按钮相关的class:

  1. btn 按钮的基本类:对按钮的设置:行内块,文本字体的设置,伪类的设置一共42行
  2. 按钮颜色:
    • .btn-danger 红色
    • .btn-warning 黄色
    • .btn-success 绿色
    • .btn-primary 亮蓝
    • .btn-secondary 浅灰
    • .btn-info藏蓝
    • .btn-dark 黑色
    • .btn-light白色,浅色
  3. 带边框(镂空)按钮:
    • .btn-outline-success 绿色边框按钮
    • .btn-outline-danger 红色边框按钮
  4. 按钮大小:
    • .btn-sm 小按钮
    • .btn-lg 大按钮
  5. 特殊按钮:
    • .btn-block 块级按钮
    • .btn-link 链接按钮
  6. 激活或禁用按钮:
    • .active类设置按钮是可用的
    • disabled属性可以设置按钮是不可点击的

图片相关的class

  1. 。rounded 0.25rem(4px)的圆角
  2. 。rounded-circle 50%的圆角
  3. img-thumbnail省略图,有白色内边距和和灰色边框的图片
  4. img-fluid 相应式图片,图片可以等比缩放,但是最大不能超过自己原始大小
  5. 图片对齐方式
    • 。float-left类设置图片左对齐
    • 。float-right类来设置图片右对齐

文字相关的class

  1. 字体颜色
    • 。text-danger 红色字体
    • 。text-success绿色字体
  2. 字体大小写
    • 。text-uppercase 英文字母大写
    • 。text-lowercase英语字母小写
    • 。text-capitalize首字母大写

BootStrap使用

  1. 引入jquery
  2. 引入popper
  3. 引入boot

容器:container,container-fluid

注意:我们写的左右boot都要写在容器中

引入:

link 引入css文件

script 引入js文件

使用前提

  1. html5
  2. 设置视口
  3. 注意:boot依赖于jquery

css样式修改

  1. 如果我们能够保障这个样式在页面中只使用一次,那么就可以直接修改原类名 .btn .btn-success…
  2. 我们添加一个新的类名进行修改

标签

评论

this is is footer