我这次来更新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笔记的更多相关文章

  1. git-简单流程（学习笔记）

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. NET Core-学习笔记（三）

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  10. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. Java基础——（综合练习）买飞机票和找素数

    package com.zhao.test; import java.util.Scanner; public class Test14 { /* 需求:机票价格按照淡季旺季.头等舱和经济舱收费. 输 ...

  2. centos-7部署kafka-v2.13.3.0.1集群

    1.部署测试机器规划 ip         kafka 版本   zookeeper 版本 192.168.113.132        v2.13.3.0.1 v3.6.3 192.168.113. ...

  3. 问题：PHP扩展功能，去掉分号';'没有用，是怎么回事？（已解决）

    1. 环境:win10的操作系统,IIS的服务器. 2. 问题描述:PHP要开启访问MYSQL的模块mysqli,我打开配置文件,去掉相关扩展模块前面的分号';',然后重启服务器,但是无效 ~~ 3. ...

  4. logic and control

    logic and control 程序的本质 Programs = Data Structures + Algorithms Algorithm = Logic + Control CPU 的构成 ...

  5. FastReport报表金额数字转大写问题

    在使用FastReport报表打印的时候涉及到财务结算金额时,会用到大写,系统保存的都为数字,将数字转换为大写没有默认的系统内置函数,经过查阅资料,可通过对FastReport的页面设计代码修改实现: ...

  6. 每日一题_1_x^n

    函数头为double power(double x,int n).在主函数中输入x.n并调用该函数求 (函数定义在主函数后面,在调用前做函数声明) 输出x^n 1 #define _CRT_SECUR ...

  7. 第10章 带有依赖注入的服务配置（ASP.NET Core in Action, 2nd Edition）

    第2部分 构建完整的应用程序 我们在第一部分中讨论了很多内容.您看到了ASP.NET Core应用程序是如何由中间件组成的,我们主要关注RazorPages框架.您了解了如何使用Razor语法构建传统 ...

  8. P1413 坚果保龄球

    P1413 坚果保龄球 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 大家可以发现这里的坚果其实是火爆辣椒2333,那么我们要尽量多消灭僵尸,就需要在僵尸位于1列时在放置(ans+ ...

  9. 对css及css3的大致整理（查漏补缺）

  10. Sublime Text3汉化好的绿色免安装版使用和破解教程+下载链接

    这个资源是我从官网上面下载好的Sublime Text3绿色版,然后通过网上的教程汉化之后再压缩的.理论上下载完之后,解压就可以用了,不过由于是绿色版,可能需要调一下默认打开方式.才好直接双击打开.绿 ...