Bootstrap的下载和使用
下载
下载:Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件
平时使用下载生产文件就可以,想观看源码如何书写可以下载源码
使用
- 可以使用官网自带的CDN资源链接到本地项目里,没有网络或较差网络不能使用,且在VS code中使用
open in brower
没有JS效果,使用open in live server
CSS,JS效果均无,可能是网络原因。 - 使用下载好的生产文件,需要将
bootstrap.min.css
和bootstrap.min.js
复制到项目文件夹。也可以复制bootstrap.css
和bootstrap.js
区别是min的体积更小,压缩为一行。复制完成后需要使用直接link即可。
Bootstrap内容
布局
- Breakponits(断点),Bootstrap 利用断点(Breakpoints)来确定响应式布局在设备或视口(viewport)大小变化时的行为,该宽度可自定义。该内容描绘了Bootstrap的几个视口宽度的范围。
- Container(容器),.container 类用于固定宽度并支持响应式布局的容器(版心居中)。.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。在官网有对应的表单观察区别 https://v5.bootcss.com/docs/layout/containers/
- grid(网格),可以实现在不同区域调用不同的类实现排列不同元素的效果,是将浏览器划分为12等分,调用
.col-sm-x
是指将一个元素看为x份。
.........
具体内容在官网查看
内容
- images(图片),通过 Bootstrap 所提供的
.img-fluid
类让图片支持响应式布局。其原理是将max-width: 100%;
和height: auto;
赋予图片,以便随父元素的宽度变化一起缩放。 - table(表格),Bootstrap5 通过
.table
类来设置基础表格的样式,也可设置颜色,:hover
属性......
.........
具体内容在官网查看
表单
提供各种表单样式:输入框,复选框,注册框.......
具体内容在官网查看
组件
- Breadcrumb(面包屑导航)
- Button(按钮)
- Carousel(轮播图)
- Navbar(导航栏)
........
都是具有js
和响应式效果的内容
助手
- Clearfix(清除浮动),通过添加 clearfix 工具类,可以快速轻松地清除容器中浮动的内容。
- Color and background(颜色和背景)
- Colored link(彩色链接),支持鼠标悬停状态的彩色链接。通过
.link-*
类可以为链接着色。与.text-*
类 不同的是,这些类支持:hover
和:focus
状态。 - Position(定位),利用这些工具类快速设置元素的位置。
实用设施
- API,实用程序API是一个基于Sass的工具,用于生成实用程序类。Sass是一种类似Less的快捷编写Css样式的工具。
- Display(属性),利用Bootstrap提供的 display 工具类可以快速改变组件的 display 属性等,并且支持响应式布局。还包括对一些常见值的支持,以及打印时用来控制 display 属性的一些额外工具类。
- Sizing(尺寸),利用宽度(width)和高度(height)相关的工具类来轻松实现对页面元素的高度和宽度的设定。你还可以使用工具类来设置相对于视口(viewport)的宽度和高度。
- Vertical alignment(纵向对齐),轻松更改内联(inline)、内联块(inline-block)、内联表格(inline-table)以及表格单元(table cell)元素的纵向对齐方式。
- Visibility(可见性),使用可见性工具类可以设置 HTML 元素的
visibility
(可见性)。这些工具类完全不会修改display
属性的值,并且不影响布局(设置了.invisible
类的页面元素仍然会占据页面上的空间 )
..........