Bootstarp5笔记
我这次来更新Bootstarp5的相关知识啦!
一、安装教程
1、在官网下载相应版本
官网地址:getbootstrap.com
我下载的是Bootstarp5版本
2、点击下载之后,会得到一个压缩文件
将其放置到相应的文件夹里面,便于使用
二、相关了解
根据菜鸟教程可知,在使用Bootstarp5时,需要使用 HTML5 文件类型,所以需要添加 HTML5 doctype 声明
声明,对应编码如下:(在头部进行相关声明)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
三、容器类
Bootstarp5需要一个容器元素来包裹网站的内容
可以有以下两个容器:
.container类用于固定宽度并支持响应式布局的容器
.container-fluid类用于 100% 宽度,占据全部视口(viewport)的容器
.container类
.container 类用于创建固定宽度的响应式页面
max-width <!--宽度会根据屏幕大小自由调整-->
.container-fluid类
.container-fluid 类用于创建一个全屏幕尺寸的容器,容器始终跨越整个屏幕宽度(width 始终为 100%)
容器内边距
p-5 pt-5 <!--都可以用来表示容器内边距-->
<div class="container pt-5">
<h1>
我的Bootstarp5的实例
</h1>
</div>
容器的边框和颜色
bg<!--即background文本框底色-->
text<!--即文本的颜色-->
<div class="container p-5 bg-dark text-white">
<h1>
我是一只小小小小鸟
</h1>
</div>
<!--primary代表蓝色-->
响应式容器
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>