• Bootstrap-4.3.1版本的使用方法


    1、Bootstrap有如下连网引用文件:

      bootstrap.css ( 未经压缩 )

      bootstrap.min.js( 压缩版,体积小,传输速度快 )

      bootstrap.js

      bootstrap.min.js

    以上引用文件均为4.3.1版,且bootstrap的使用依赖 jQuery ,故使用前需引入  jquery-3.4.1.js 文件,实例如下(引用的是本地下载文件):

      <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
      <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
      <script type="text/javascript" src="../js/bootstrap.js"></script>

    2、Bootstrap :用于开发响应式的移动优先网站,其提供了大量的组件,简化开发。

    以下是 bootstrap 提供的关于 布局、内容、工具、组件等用法的详细说明:

      注:以下均为bootstrap的类名,使用均是在<div class="container"></div>中的class内使用

    1)布局( Layout ) 

      注意:
      如果开发响应式网站,务必在head中添加如下代码
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      目的,使用相对单位解释px

      网格系统,容器/行/列。一行分为12列,成为12栅格系统。

    <!--
    container     容器,容器中包含多行;
    
    row            行;( 由于container具有padding,所有row中定义margin取值为负数,用于抵消父元素padding )
    
    col           列;
        col       特小屏    screen < 576px
        col-sm     小屏      576px < screen
        col-md     中屏      768px < screen
        col-lg     大屏      992px < screen
        col-xl     特大屏     1200px < screen
        注:以上列取值从 col-1 ~ col-12,一行12列 col-2 表示占两列;
        移动优先:
            默认体现移动端(极小屏)的样式,如果想要覆盖这些样式,那需要添加对应大屏样式
    
    px             左右内边距等于padding-left+padding-right;
    py             上下内边距等于padding-top+padding-bottom;
    pl             左内边距等于padding-left;
    pr             右内边距等于padding-right;
    pt             上内边距等于padding-top;
    pb             下内边距等于padding-bottom;
        注:以上内边距取值从 px-1 ~ px-5,其中px-1=0.25rem;px-2=0.5rem;px-3=1rem;px-4=1.5rem;px-5=3rem;
    
    align-items-start     伸缩盒垂直(纵向)向上排列
    align-items-center     伸缩盒垂直(纵向)居中排列
    align-items-end        伸缩盒垂直(纵向)向下排列
    
    justify-content-start     伸缩盒水平(横向)向左排列
    justify-content-center    伸缩盒水平(横向)居中排列
    justify-content-end       伸缩盒水平(横向)向右排列
    
    order-序号     排序,序号从1-12,表示当前块的一个序号
    
    offset-序号    偏移,序号从1-11,表示当前块向左或右偏移距离,1为一列的距离(均分为12列)
    
    ml-auto        自动左边距等于margin-left:auto;
    mr-auto        自动右边距等于margin-right:auto;
    -->

    2)内容( Content )

    <!--
    reboot        重置样式,即清除所有标签的默认样式( 一般不使用 )
    
    h1~h6         h1~h6标签(不直接使h1~h6标签)
    
    list-unstyled    清除列表样式(ul>li 标签前的小圆点等样式)
    
    img-fluid        图片宽度沾满父元素
    img-thumbnail    
    
    table                 表格样式
    table-dark            深色表格
    table-light            浅色表格
    thead-dark            深色表头
    thead-light            浅色表头
    table-striped        表格条纹线,分行底色阴影间隔
    table-bordered        表格边框线    
    table-hover            选中行,鼠标悬停被选中
    table-sm            表格整体变小
    table-success         表格绿色(成功色)
    table-danger         表格红色(危险色)
    table-info             表格浅蓝色(副色)    
    table-responsive     表格透明色
    table-primary         表格蓝色(主色)
    
    visible                显示
    invisible            隐藏
    
    text-left             文本居左
    text-center         文本居中
    text-right             文本居右
    text-sm-left         小屏文本居左
    text-md-left         中屏文本居左
    text-lg-left         大屏文本居左
    text-xl-left         特大屏文本居左
    text-truncate         文本内容单行显示且占满父元素,多余部分用省略号表示
    text-break            文本本内容自动换行显示
    text-lowercase         文本本内容不会自动换行显示,超出部分向外显示(略难看,一般不用)
    -->

    3)工具( Utilities )

    4)组件( Components )

  • 相关阅读:
    UIGestureRecognizer在多层视图中的触发问题
    mysql出现Waiting for table metadata lock的原因及解决方案
    SQL逆向工程
    自己总结的ruby on rails 查询方法
    hdu 1536 SG函数模板题
    spring 源码分析之BeanPostProcessor
    spring bean生命周期管理--转
    java.lang.Long cannot be cast to java.lang.Integer解决办法
    Mybatis之Oracle增删查改示例--转
    Anti-If: The missing patterns--转
  • 原文地址:https://www.cnblogs.com/lidyfamily/p/11502706.html
Copyright © 2020-2023  润新知