BootStrap(day02)

二、BootStrap

  1. 如何使用 Boot
  2. 全局样式
  3. 组件+Js插件
  4. 定制 Sass

https://www.bootcss.com/

库 与 框架的概念:
库: 是一个工具
框架: 框架是一个半成品的项目

  1. Boot 的使用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <link rel="stylesheet" href="../bootstrap-3.3.7/source/bootstrap.css">
        <script src="../bootstrap-3.3.7/source/jquery.min.js"></script>
        <script src="../bootstrap-3.3.7/source/popper.min.js"></script>
        <script src="../bootstrap-3.3.7/source/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
    
    </div>
    </body>
    </html>
    
  2. 全局 css 样式
    container: 定宽容器, 每种不同的分辨率下定义了写死的 max-width, 同时左右 15px 内边距, 水平居中

    container-fluid: 变宽容器, 根据不同分辨率的屏幕宽度永远是屏幕的 100%

    boot 支持 4 种屏幕 xl(超大屏)/lg(大屏)/md(中屏)/sm(小屏) 不支持 xs(超小屏)
    boot 中 1 个 rem 是 16px. boot 的 css reset 使用的是 normalize.css

① 按钮相关的 class
.btn: 基本类 定义了 行内块, 字号, 文本对齐, 边框过渡等
按钮颜色
.btn-danger: 红色
.btn-success: 绿色
.btn-warning: 黄色
.btn-info: 青色
.btn-primary: 蓝色
.btn-secondary: 灰色
.btn-dark: 深色
.btn-light: 浅色
不同边框的按钮:
.btn-outline-danger/success/warning/dark/info...
不同的按钮
.btn-lg: 大按钮
.btn-sm: 小按钮
.btn-block: 块级按钮
.btn-link: 连接

② 图片相关
.rounded : 添加圆角
.rounded-circle : 圆形
.img-thumbnail : 添加内边距和边框
.img-fluid : 响应式图片,图片可以缩放但是最大不能超过原始大小

③ 文字相关 class
.text-danger/warning/info..: 文本颜色
.h1~.h6: 文本字号和加粗
.text-uppercase/lowercase/capitalize: 文本大小写转换(大、小、首字母)
.text-left/right/center: 文本对齐
.text-*-left/right/center *:sm/md/lg 媒体查询
.text-justify: 两端对齐,注意,没有媒体查询

④ 列表相关
ul .list-unstyled: 去点, 左内边距清 0
.list-group: 列表组
li .list-group-item: 列表项,边框,首元素和尾元素的圆角
颜色 .list-group-item-danger/info/warning...
激活项: .active
禁用项: .disable

⑤ table 相关
.table 对 table 本身和 table 的后代布局
.table-bordered 为 table 本身和后代添加边框
.table-danger/warning/info...: 表格的背景色
.table-hover: 悬停效果的表格
.table-striped: 隔行变色
.table-responsive-*: *: sm/md/lg 响应式布局, 写在table 的父元素上

  1. 辅助类
    ① 边框
    .border-0: 去除边框

    .border-top/right/bottom/left-0: 去掉某一个方向的边框

    基本类 .border: 灰色实线边框
    .border-top/right/bottom/left: 单边的设置

    边框颜色 .border-danger/warning/success/info....

    ② 浮动
    .float-left/right/none

    .float-*-left/right/none *: sm/md/lg/xl

    .clearfix: 解决高度坍塌,写在父元素上

    ③ 显示
    .visible: 是 css 中的: visibility: visible;

    invisible: 是 css 中的: visibility: hidden;

    ④ 背景颜色
    .bg-danger/warning/success...

    ⑤ 圆角
    .rounded/.rounded-0
    .rounded-top/right/bottom/left

    ⑥ 尺寸
    w-25/50/75/100: width: 25%/50%/75%/100%; 其他自定义

    h-25/50/75/100: 同上

    mw-100/mh-100 max-width:100%; max-height: 100%;

    ⑦ 内外边距
    m / mt / mr / mb / ml / mx / my-*-auto / 0 / 1 / 2 / 3 / 4 / 5 外边距
    0: 0rem
    1: 0.25rem
    2: 0.5rem
    3: 1rem
    4: 1.5rem
    5: 3rem

    p / pt / pr / pb / pl / px / py-*-auto / 0 / 1 / 2 / 3 / 4 / 5 内边距
    *: sm / md / lg / xl

  2. __ 栅格布局 __

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值