Bootstrap使用总结

Bootstrap的下载和使用

中文官网

下载

下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

平时使用下载生产文件就可以，想观看源码如何书写可以下载源码

使用

1. 可以使用官网自带的CDN资源链接到本地项目里，没有网络或较差网络不能使用，且在VS code中使用open in brower没有JS效果，使用open in live server CSS，JS效果均无，可能是网络原因。
2. 使用下载好的生产文件，需要将bootstrap.min.css和bootstrap.min.js复制到项目文件夹。也可以复制bootstrap.css和bootstrap.js区别是min的体积更小，压缩为一行。复制完成后需要使用直接link即可。

Bootstrap内容

布局

1. Breakponits（断点），Bootstrap 利用断点（Breakpoints）来确定响应式布局在设备或视口（viewport）大小变化时的行为，该宽度可自定义。该内容描绘了Bootstrap的几个视口宽度的范围。
2. Container（容器），.container 类用于固定宽度并支持响应式布局的容器（版心居中）。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。在官网有对应的表单观察区别 https://v5.bootcss.com/docs/layout/containers/
3. grid（网格），可以实现在不同区域调用不同的类实现排列不同元素的效果，是将浏览器划分为12等分，调用.col-sm-x是指将一个元素看为x份。

…

具体内容在官网查看

内容

1. images（图片），通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素的宽度变化一起缩放。
2. table（表格），Bootstrap5 通过 .table 类来设置基础表格的样式，也可设置颜色，:hover属性…

…

具体内容在官网查看

表单

提供各种表单样式：输入框，复选框，注册框…

具体内容在官网查看

组件

1. Breadcrumb（面包屑导航）
2. Button（按钮）
3. Carousel（轮播图）
4. Navbar（导航栏）

…

都是具有js和响应式效果的内容

助手

1. Clearfix（清除浮动），通过添加 clearfix 工具类，可以快速轻松地清除容器中浮动的内容。
2. Color and background（颜色和背景）
3. Colored link（彩色链接），支持鼠标悬停状态的彩色链接。通过 .link-* 类可以为链接着色。与 .text-* 类 不同的是，这些类支持 :hover 和 :focus 状态。
4. Position（定位），利用这些工具类快速设置元素的位置。

实用设施

1. API，实用程序API是一个基于Sass的工具，用于生成实用程序类。Sass是一种类似Less的快捷编写Css样式的工具。
2. Display（属性），利用Bootstrap提供的 display 工具类可以快速改变组件的 display 属性等，并且支持响应式布局。还包括对一些常见值的支持，以及打印时用来控制 display 属性的一些额外工具类。
3. Sizing（尺寸），利用宽度（width）和高度（height）相关的工具类来轻松实现对页面元素的高度和宽度的设定。你还可以使用工具类来设置相对于视口（viewport）的宽度和高度。
4. Vertical alignment（纵向对齐），轻松更改内联（inline）、内联块（inline-block）、内联表格（inline-table）以及表格单元（table cell）元素的纵向对齐方式。
5. Visibility（可见性），使用可见性工具类可以设置 HTML 元素的 visibility （可见性）。这些工具类完全不会修改 display 属性的值，并且不影响布局（设置了 .invisible 类的页面元素仍然会占据页面上的空间 ）

…