Web前端必学框架Bootstrap5

https://www.bilibili.com/video/BV1Ez4y1q7oA/?spm_id_from=333.337.search-card.all.click

Web前端必学框架Bootstrap5完整版从零入门到精通到实战(HTML/CSS/Bootstrap5/Vue/JS/零基础入门)S0051

v3学过x v4没学旧中不学 v5学

P1 01_Bootstrap 简介

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML,CSS和JavaScript,yTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应.Bootstrap将HTML,CSS和JavaScript封装成一个个功能组件,用起来简洁灵活,使得 Web 开发更加快捷。一Bootstrap5目前是Bootstrap的最新版本,利用提供的Sass变量和大量mixin、响应式栅格系统、可扩展的预制组件、基于jQuery的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app.

P2 02_Bootstrap5安装

https://v5.bootcss.com/docs/getting-started/download/

下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹,只要把html与Bootstrap文件夹放在一起,然后用相对路径引用bootstrap.bundle.min.js和 bootstrap.min.css文件即可

P3 03_Bootstrap5容器

Bootstrap5 容器
容器是Bootstrap一个基本的构建块,它包含、填充和对齐给定设备或视口中的内容。
Bootstrap 需要一个容器元素来包裹网站的内容我们可以使用以下两个容器类:
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid类用于100%宽度,占据全部视口(viewport)的容器。
固定宽度
.container类用于创建固定宽度的响应式页面。
注意:宽度(max-width)会根据屏幕宽度同比例放大或缩小。

超小屏幕
小屏幕
中等屏幕
大屏幕
特大屏幕
超级大屏幕

P4 04_Bootstrap5 网格

Bootstrap5 网格系统
Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
我们也可以根据自己的需要,定义列数。Bootstrap 5的网格系统是响应式的,列会根据屏幕大小自动重新排列。请确保每一行中列的总和等于或小于 12

Bootstrap 5网格系统有以下6个类:
.col-针对所有设备。
.col-sm-平板-屏幕宽度等于或大于576px
.col-md-桌面显示器-屏幕宽度等于或大于768px
.col-lg-大桌面显示器-屏幕宽度等于或大于992px
.col-xl-特大桌面显示器-屏幕宽度等于或大于1200px
.col-xxl-超大桌面显示器-屏幕宽度等于或大于1400px。

要进行栅格系统操作,首先就要创建栅格系统的容器。
“container"和"row"共同组成栅格容器,"row”代表的就是一行。
创建栅格容器后,设置名为col-md-1的div,当尾数为1时,表示每个div的宽度占1/12,所以每行最多可以放置12个子div。
如果超过12个,则会在下一行显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap5</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-6">1</div>
            <div class="col-6">2</div>
        </div>
    </div>
</body>
<script src="./js/bootstrap.bundle.min.js"></script>
</html>

P5 05_Bootstrap5不等宽响应式列
P6 06_Bootstrap5网格嵌套列

P7 07_Bootstrap5网格偏移列

偏移列
列偏移是通过类名(offset--)来设置的。第一个星号()可以是 sm,md,Ig,xl,表示屏幕设备类型,第二个星号()可以是 1 到 11的数字。

    <div class="container">
        <div class="row">
            <div class="col-2" style="background-color: red;">1</div>
            <div class="col-2 offset-2" style="background-color: blue;">2</div>
        </div>
    </div>

P8 08_Bootstrap5 网格列顺序

列顺序
通过类(.order)来控制内容的可视顺序。这些类是响应式的,因此可以配合网格类使用。如(.order-md-1.order-md-3)

想改变 都要设置order-* 才可以

    <div class="container">
        <div class="row">
            <div class="col-2 order-2" style="background-color: red;">1</div>
            <div class="col-2 order-1" style="background-color: blue;">2</div>
        </div>
    </div>

P9 09_Bootstrap5网格排序规则

order-1 1-5有效

order-first order-last

first last 排序优先高于数字和默认排序的

P10 10_Bootstrap5排版标题

Bootstrap5排版
Bootstrap 5默认的font-size为16px,line-height为1.5。默认的font-family为"Helvetica Neue",Helvetica,Arial,sans-serif。此外,所有的

元素 margin-top:0、margin-bottom:1rem(16px)。

可以使用类.h1-.h6来设置标题

Display标题类
Bootstrap5还提供了使标题更突出的类,当我们需要标题突出时可以使用这些标题类。突出标题以更大的字体显示,并且会对其进行加粗。

display-1 到 display-4

使用类突出显示段落
还可以通过在段落上添加类,lead来突出段落。

也可以添加类.small指定更小文本(为父元素的 85%)

我们可以使用带有类.text-muted class的标签来显示更小且颜色更浅的文本。

P11 11_文本对齐截取_

文本对齐
可以使用文本对齐类轻松地将文本左对齐、右对齐和居中对齐。

.text-start text-center text-end

.text-md-center

文本转换
可以将文本转换为小写、大写、设定单词首字母大写
.text-lowercase:设定文本小写
.text-uppercase:设定文本大写
.text-capitalize:设定单词首字母大写

截断长文本
对于较长的文本,可以使用类.text-truncate用省略号截断文本。在一行中显示一段文本但没有足够的可用空间时,它特别有用。省略号

P12_12_文本大小行高粗体_

文本换行和溢出
通过类名(.text-wrap)可以设置文字在超过盒子宽度时自动换行
通过类名(.text-nowrap)可以阻止文字的换行,此时文字会溢出盒子

文本大小
BootStrap5默认字体初始大小为16px
在BootStrap5中将文本大小分为了六类,分别对应标题的h1-h6
添加类名.fs-或添加类名 h(*号为1-6的数值)

字体粗细及斜体
在BootStrap5中将字体的粗细分为了5类.fw-bolder(bolder).fw-bold(700).fw-normal(400).fw-light(300).fw-lighter(lighter)
斜体 则是通过类名(.fst-italic)来控制 而通过类名(.fst-normal)也可以取消斜体

行高(行距)
BootStrap5默认字体初始行高为1.5(
在BootStrap5中将行高分为了4种.Ih-1(1rem).Ih-sm(1.25rem).Ih-base(1.5rem).Ih-Ig(2rem)

P13 13_Bootstrap5颜色

Bootstrap5 颜色
Bootstrap 5 提供了一些有代表意义的颜色类:.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger,text-secondary,.text-dark,.text-body(默认颜色,为黑色)、.text-light.text-white,

可以设置文本颜色透明度为 50%,使用.text-black-50 或.text-white-50 类

P14 14_颜色颜色类_

bg-primary success info warning danger secondary dark light

P15 15_Bootstrap列表

需要从列表项中删除默认样式,可以通过简单地将类.list-unstyled应用到相应的

posted @   KooTeam  阅读(397)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示