bootstrap | 易学教程

bootstrap4.3
0) 介绍
html/css/js框架，方便创建一个响应式的，移动优先的网页
1. 无需编写大量的基础的css代码
2. 无需编写大量的基础的js代码
3. js依赖jQuery、popper（定位）
css布局
css基础样式
组件（结构，样式，功能）

如果编写H5页面，并且这网页在手机中打开 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

hello world
1. 导入依赖
cdn
本地
模块化（es6）
2. 应用
.btn
1. 布局(12栅格系统)
  浮动布局/伸缩盒布局/定位布局
  
  container
  在特定的屏幕都会有一个最大的宽度，一般不会占满整个屏幕
  container-fluid
  在任意屏幕下都会占满整个屏幕
  row
  行
  col
  列（极小屏中的列）
  实现响应式布局
  col 极小 [,576px]
  col-sm 小 [576px,768px]
  col-md 中 [768px,992px]
  col-lg 大 [992px,1200px]
  col-xl 极大 [1200px,]
  移动优先
  
  只有在大屏情况下一行显示两列
  border
  为盒子添加边框
  w-100
  换行后内容重组
  col-auto
  内容宽度自适应
  ml-auto
  margin-left:auto
  align-items-start、justify-content-start
  伸缩盒容器中元素的排列
  align-items: flex-start;
  no-gutters
  container-fluid
  width:100&;
  padding:0 15px;
  为了row可以占满整个屏幕
  margin:0 -15px;
  如果使用no-gutters表示margin:0 ;这样row左右两边就会出现空白
  order-1
  表示列的顺序，至少添加2个
  offert-3
  表示列的偏移
  嵌套关系
  row>col>row>col>row…
2. 工具样式
  1. colors
    背景：
    bg-primary bg-success bg-danger bg-info bg-warning bg-dark bg-light
    文本：
    text-primary text-success text-danger text-info text-warning text-dark text-light
  2. border
  3. display
    d-block
    d-none
    d-lg-block
    …
  4. shadow
    …
  ##bs的js依赖jQuery的js,bs的js是对jQuery进行了扩展
3. 内容
  1. reboot
    样式重置
  2. Tables
    table
    table-bordered
    table-hover
    table-dark、table-light、table-danger…
    table-sm
    table-responsive
4. 基础组件
  1. alert
    类：alert、alert-primary、alert-link、close、alert-dismissable
    属性：data-dismiss
    方法：
    $().alert();
    $().alert(“close”); $().remove()
    $().alert(“dispose”);
  2. button
    类：btn、btn-primary、btn-outline-primary、.btn-lg 、.btn-sm、.btn-block、active、
    按钮组：btn-group
    属性：disabled
  3. carousel
    旋转木马，直接复制粘贴代码即可
  4. modal
    类：modal-sm、modal-lg、modal-xl、
    .modal 容器
    .modal-dialog 模态框容器
    modal-content
    modal-header
    modal-body
    modal-footer
    属性：data-dismiss、 data-target
    方法：
    $().modal(“show”) display:block
    $().modal(“hide”) display:none
  5. toast
    类
    toast toast-header toast-body
    方法
    // 初始化toast
    $().toast({
    animation:boolean
    autohide:boolean
    delay:number
    })
    $().toast(“show”)
    $().toast(“hide”)
  6. 表单
    form-group
    form-control
    form-control-sm 、form-control-lg
  7. collapse
    切换元素的显示与隐藏
    类
    collapse
    方法
    $().collapse(“toggle”);
    $().collapse(“show”);
    $().collapse(“hide”);
5. 主题
  应用基础组件以及bs的样式完成一个半成品

来源：https://blog.csdn.net/jdrunk/article/details/100972311

标签

css

bootstrap响应式布局

css框架

bootstrap布局

css样式