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>
posted @ 2022-07-27 20:31  yesyes1  阅读(63)  评论(0编辑  收藏  举报