我这次来更新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>

Bootstarp5笔记的更多相关文章

git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕笔记http://www.cnbl ...
PHP-自定义模板-学习笔记
1. 开始这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
PHP-会员登录与注册例子解析-学习笔记
1.开始最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
NET Core-学习笔记（三）
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
2014年暑假c#学习笔记目录
2014年暑假c#学习笔记一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

7.golang语言学习，标识符的命名规范
1.凡是自己可以命名的都是标识符 2.命名规则 a.由26个英文字母,数字0-9,_组成 b.不能数字开头 c.严格区分大小写 d.不能包含空格 e.下划线"_"本身在go中是一个 ...
nginx的nginx.conf目录简单配置
我的nginx.conf是在 etc/nginx/目录下我是直接在http随便找了个地方添加如下代码的: server { listen 8066; server_name 192.168.0.2 ...
解决通配符的匹配很全面, 但无法找到元素 'aop:config' 的声明
这是因为在applicationContext.xml文件中没有添加对应的地址 http://www.springframework.org/schema/aop http://www.springf ...
Taro3 扫描不同二维码参数不同，但是热启动之后参数不变根据环境不同更换域名
热启动:先执行缓存的静态数据,然后再执行页面代码.比如右上角退出或者按home键错误用法:用的Taro3 react function函数,之前用的 Taro.getLaunchOptionsSyn ...
nodejs redis执行lua脚本
const Redis = require("ioredis"); const redis = new Redis({ port: 6300, // Redis port host ...
目前为止最完善专业的微信小程序商城
购买商业版(368元): http://market.zhenzikj.com/detail/82.html帮助文档:https://www.kancloud.cn/crmeb/crmeb/66242 ...
vue中sso登录使用VueKeycloak登录
一,先下载vuekeycloakjs npm install @dsb-norge/vue-keycloak-js --save 二,引入 import VueKeycloakJs from '@ds ...
记录一次网关负载流量不均匀 cpu使用率不均衡问题
网关负载流量不均匀 cpu使用率不均衡问题??? 1.压力机访问源有多少ip 有10个? 还是20个? 就是样本源不多的话,负载上hash的话就你可能不是真实的访问需求 ,你客户端就那么 ...
Chorme 兼容
Chorme自动更新,不知道什么时候版本就变了.之前好用的代码,突然不好用了. 启动时提示Only local connections are allowed 检查一下兼容性参照下文,下载对应的Dr ...
springboot启动图标banner
将springboot项目中的banner.txt文件替换成下面代码即可 ${AnsiColor.BRIGHT_YELLOW} ┏━┓ ┏━┓ ┏┛ ┻━━━━━┛ ┻┓ ┃ ┃ ┃ ━ ┃ ┃ ┳┛ ...

Bootstarp5笔记