• bootstrap前端开发框架

    目录

    1. bootstrap 简介

    1.1 优点

    1.2 版本

    2. bootstrap 使用

    2.1 引入相关样式文件

    3.布局容器

    3.1 container 类

    3.1.1 containner类

    3.1.2 contain-fluid 类

    4. 栅格系统（网格系统）

    4.1 网格系统的使用

    4.1.1 栅格选项参数

     4.1.2 列嵌套

    4.2 列偏移

    4.3 列排序

    4.4 响应式工具

    1. bootstrap 简介

    bootstrap 来自Twitter （推特），他是基于HTML、CSS、JavaScript的，使web开发更加快捷

    Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

    1.1 优点

    • 标准化的html+css编码规范
    • 提供一套简洁、直观的组件
    • 不断迭代更新

    1.2 版本

    3.x.x：放弃ie6-7，对ie8支持但界面效果不好，偏向于开发响应式、移动设备优先的web项目

    4.x.x： 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器，Bootstrap.min.css 的体积减少了40%以上。

    5.x.x：最新版，最新稳定版本浏览器，但不支持 Internet Explorer 11 及以下版本，主要区别在于 Bootstrap5 不再依赖 jQuery，使用了原生的 JavaScript

    2. bootstrap 使用

    1. 创建文件夹结构
    2. 创建html骨架结构
    3. 引入相关的样式文件
    4. 书写内容

    2.1 引入相关样式文件

    1. <!-- 新 Bootstrap5 核心 CSS 文件 -->
    2. <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    3.  
    4. <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    5. <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    6.  
    7. <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    8. <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    3.布局容器

    3.1 container 类

    bootstrap 为页面内容和栅格系统包裹的一个.container容器，.container 类用于固定宽度并支持响应式布局的容器

    3.1.1 containner类

     注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

    3.1.2 contain-fluid 类

    .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，适合单独做移动端开发

    4. 栅格系统（网格系统）

    网格系统会随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

    bootstrap 里面contain宽度是固定的，但是不同屏幕下，contain的宽度不同

    4.1 网格系统的使用

    4.1.1 栅格选项参数

    参数通过行和列的组合来创建页面布局

    • 行row必须放在contain 布局容器里面
    • 实现列的划分，给列添加类前缀
    • 如果孩子的份数相加等于12，则孩子占满contain的宽度
    • 如果孩子份数相加小于12，则不会占慢宽度
    • 如果孩子份数大于12，则多出的列数会另起一行显示
    • 可以同时为一列指定多个设备的类名，以便划分不同的份数，如 col-lg-3 col-sm-3
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    10.     <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    11. </head>
    12. <style>
    13.     .row div {
    14.         border: 1px solid red;
    15.     }
    16. </style>
    17.  
    18. <body>
    19.     <div class="container">
    20.         <div class="row">
    21.             <div class="col-xxl-3">1</div>
    22.             <div class="col-xxl-3">1</div>
    23.             <div class="col-xxl-3">1</div>
    24.             <div class="col-xxl-3">1</div>
    25.         </div>
    26.         <div class="row">
    27.             <div class="col-lg-2">2</div>
    28.             <div class="col-lg-2">2</div>
    29.             <div class="col-lg-2">2</div>
    30.         </div>
    31.         <div class="row">
    32.             <div class="col-lg-2">2</div>
    33.             <div class="col-lg-2">2</div>
    34.             <div class="col-lg-2">2</div>
    35.             <div class="col-lg-7">2</div>
    36.         </div>
    37.     </div>
    38. </body>
    39.  
    40. </html>

    效果：

     4.1.2 列嵌套

    栅格系统将内容再次嵌套，可以使用一个新的.row元素，和一系列.col-cm-*元素

    加row可以取消父元素的padding值，高度和父级一样

    4.2 列偏移

    使用 offset-md-*类可以将列向右侧偏移，实际是使用*选择去为当前元素添加左侧的边距

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    10.     <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    11.     <style>
    12.         .col-sm-4 {
    13.             background-color: yellow;
    14.         }
    15.     </style>
    16. </head>
    17.  
    18. <body>
    19.     <!-- 列偏移 -->
    20.     <div class="container">
    21.         <div class="row">
    22.             <div class="col-sm-4">1</div>
    23.             <div class="col-sm-4 offset-sm-4">2</div>
    24.         </div>
    25.     </div>
    26. </body>
    27.  
    28. </html>

    一个盒子，也可以用列偏移实现水平居中的效果

    4.3 列排序

    .col-md-push-* 向左拉

    .col-md-pull-* 向右推

    上面两个类可以改变列的顺序

    4.4 响应式工具

    .d-*-none 类  为元素添加类 d-none，将在所有设备中隐藏该元素如 .d-sm-none

    当设置了小屏幕隐藏之后，默认小屏幕以及之上的所有屏幕都会默认隐藏。所以添加d-*-block进行显示操作

  • 相关阅读:
    MyBatis——源码解析MyBatis框架底层的执行原理
    11.3 - 三级模式/两级映像 11.4 - 数据库管理系统 11.5 - 完整性约束 11.6 - 分布式数据库 11.7 - DBA
    Java也能做OCR！SpringBoot 整合 Tess4J 实现图片文字识别
    链表
    STM32：TIM通道输入捕获
    SpringCloud-3-基础工程构建
    Java 基于 SPringBoot 的幼儿园管理系统，附源码、数据库
    [深入研究4G/5G/6G专题-47]: 5G Link Adaption链路自适应-3-下行链路自适应DLLA-PDSCH信道
    Promise的链式调用
    Python数据分析—Pandas可视化
  • 原文地址：https://blog.csdn.net/weixin_49555741/article/details/124972312