• Web前端快速开发 Bootstrap 响应式UI框架

    文章目录

    前言

    本文讲解了Bootstrap 响应式UI框架 的基本使用与规则，如果本文对你所帮助，请三连支持博主，先赞后看养成习惯。

    在这里插入图片描述

    以下是本篇文章正文内容，下面案例可供参考

    Bootstrap介绍

    在这里插入图片描述

    顾名思义 就是一套架构，它有一套完整的网页功能解决方案，而且控制权在框架本身，有预定的样式库、组件库和插件。使用者必须按照框架所规定的规则来开发。

    Bootstrap 是基于HTML CSS Javascript 的框架，用于开发响应式布局，移动设备有限的web项目，它简单灵活，使得web 开发更加快捷。

    因为它本身已经提供了一套页面样式和功能，所以适合没有设计师的团队。

    它框架里包含了自定义的jQuery插件，所以功能上是依赖jquery 插件的，且它整个框架的底层原理是利用Less和Sass。其中bootstrap3是基于Less，bootstrap4是基于Sass。

    bootstrap一般用于后台管理界面。如果想在互联网层面用作用户交互，样式还是有点保守的。所以前台一般需要ui设计师来设计，前端工程师来实现。但后台管理界面对样式的需求就没有这么高了，使用bootstrap可以很快的完成页面布局，关键是不难看！所以bootstrap简直就是后台程序员都福音，至于3和4没必要纠结，毕竟这个场景是够用就行

    中文官网：

    https://www.bootcss.com/

    Bootstrap3

    Bootstrap 响应式UI框架

    想要去快速开发页面，最好的解决办法是使用UI框架即提供了一套UI设计好的样式且带有很多功能的各种插件。

    1. 自己装修 就是使用媒体查询media 即原生响应式。

    2. 请装修公司 Bootstrap框架

    使用

    生产环境：指上线的项目，上线项目为了提高网站访问速度，尽量使用压缩文件。

    源码：当时去封装框架的时候使用的底层代码，可以帮助开发者更好的理解，一般本地开发下载该源码

    Sass：针对于Sass 项目

    创建HTML骨架结构(一般在编辑器里创建html模板)

    
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap模板title>
    <link href="css/bootstrap.css" rel="stylesheet">

    
    
    
  head>
  <body>
  

    
    <script src="js/jquery-1.11.1.min.js">script>
    
    <script src="js/bootstrap.js">script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    Hbulider 创建html模板

    1 新建html文件，选择自定义模板
    在这里插入图片描述

    2 跳转到编辑器设置模板的位置

    在这里插入图片描述

    3 在该html 文件夹里新建一个html文件，命名为bootstrap.html，打开该文件把上述HTML骨架结构复制进去，注意css 文件和 js 文件的路径，保存。

    4 验证模板是否创建好
    请添加图片描述

    回到HbuliderX编辑器，新建html文件，发现选择模板里多出刚刚创建的bootstrap模板，选择该模板即可。

    布局容器

    bootstrap 需要为页面内容和栅格系统包裹一个容器，它已经预先定义好了这个类，叫.container

    1. container类
      • 响应式布局的容器 固定宽度
      • 大屏（>=1200px） 宽度定位1170px
      • 中屏（>=992px） 宽度定位970px
      • 小屏（>=768px） 宽度定位750px
      • 超小屏（<768px） 宽度100%
    2. container-fulid类
      • 流式布局容器 百分百宽度
      • 占据全部视口（viewport）的容器
      • 适合单独做移动端开发

    栅格系统

    1. ”grid systems “ 又叫 网格系统 ，意为将页面布局划分成等宽的列，通过列数的定义来模块化页面布局。

    2. 随着屏幕或视口尺寸的增加，系统自动分为最多12列

    3. container 宽度是固定的，但是不同的屏幕下，container宽度不同，但我们仍然container等分成12等份

    4. 栅格参数:

    在这里插入图片描述
    栅格系统用法

    (1) 行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

    (2) 通过“行（row）”在水平方向创建一组“列（column）”，且内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

    (3) 列是通过指定1到12的值来表示其跨越的范围，即列数之和不能超过总份数12份。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

    (4) 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列，如果一“行（row）”中包含了的“列（column）”小于等于 12，则依次从左向右排列。

    (5) 可同时指定多个设备的类名，如：class=”col-lg-2 col-md-6”

    (6) 移动设备优先，xs 默认 占12份，没有指定设备类前缀，继承方式为 xs>sm>md>lg

    响应式工具类

    针对不同屏幕尺寸隐藏或显示页面内容

    ​ visible-* ： 只对* 可见
    ​ hidden-* ： 只对* 隐藏

    1. 显示系列

    visible-xs/sm/md/lg

    1. 隐藏系列

    hidden-xs/sm/md/lg

    1. 指定元素类型系列

    visible-xs/sm/md/lg-block/inline/inline-block

    在这里插入图片描述

    bootstrap4

    在这里插入图片描述
    特点：

    • 新增网格层适配了移动端；
    • 全面引入ES6新特性（重写所有JavaScript插件）；
    • css文件减少了至少40%；
    • 所有文档都用Markdown编辑器重写；
    • Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。

    在这里插入图片描述

    bootstrap5

    Bootstrap 5（当前的主要版本，于 2021 年 5 月发布）带来了大量的变化和改进，包括添加新组件、新类、旧组件的新样式、更新的浏览器支持、删除一些旧组件，以及更多。

    变化的内容

    1. jQuery不再是一个依赖项

    2. 浏览器支持更改

      在 v4 之前，Bootstrap 曾经支持 Internet Explorer (IE) 10 和 11。从 Bootstrap 5 开始，对 IE 的支持已完全取消。因此，如果您的网站需要支持 IE，则在迁移到 v5 时可能应该小心。

      浏览器支持的其他变化包括：

      • Firefox和Chrome现在从60版开始支持
      • Safari和iOS支持现在从版本12开始
      • Android浏览器和WebView支持现在从版本6开始

    3. 数据属性的更改

      组件的数据属性现在以 data-bs 开头，以方便命名Bootstrap属性

    4. Bootstrap 5 为库带来了一些新组件

      （1）Accordion 手风琴

      （2）Offcanvas 重叠侧边栏

      （3）Floating Label 浮动标签

  • 相关阅读:
    FAST-LIO,FAST-LIO2与FASTER-LIO
    C# FileSystemWatcher 多文件夹、多文件类型文件监控增加、修改、重命名和删除实例
    [附源码]java毕业设计-室内田径馆预约管理系统
    511. 游戏玩法分析 I
    事务的传播机制
    java-python高校大学教室管理系统
    EFCore高级Saas系统下单DbContext如何支持不同数据库的迁移
    Python之基本扩展模块
    存储区域网络（SAN）之FC-SAN和IP-SAN的比较
    指令跳转：原来if...else就是goto
  • 原文地址：https://blog.csdn.net/weixin_71170351/article/details/126431253