winney

It is never too old to learn.

0%
winney

Bootstrap5

Bootstrap3与Bootstrap4的区别

Bootstrap3 Bootstrap4
Less Sass
4种栅格类 5种栅格类
使用px为单位 使用rem和em为单位(除部分margin和padding使用px)
使用push和pull向左右移动 偏移列通过offset-类设置
使用float的布局方式 选择弹性盒模型(flexbox)
  • Bootstrap4中的栅格系统可以不用添加指定的列数 如row 里面有2个col 会任何尺寸下均分row
  • Bootstrap3只有4种栅格类 分别为(col-xs特小,col-sm小,col-md,中col-lg大)
  • Bootstrap4有5种栅格类,(col-特小,col-sm-小,col-md-中,col-lg-大,col-xl-超大)
  • Bootstrap4设置列偏移时通过 offset-sm-4,而Bootstrap3通过col-sm-offset-4
  • Bootstrap4增加了响应式容器如 container-sm ,container-md….,当小于屏幕尺寸小于栅格类时会占满整个屏幕

Bootstrap4与Bootstrap5之间的区别

Bootstrap5删除的一些类是:

  • 表格-行
  • 表格-内联
  • 清单-内联
  • 卡-甲板

一些添加的类:

  • gx-*(类控制水平/列装订线的宽度)
  • gy-*(类控制垂直/行装订线的宽度)
  • g-*(类控制水平和垂直装订线的宽度)
  • 行cols自动

日期插件

文档

demo

github——存在安全缺陷组件的影响

CDN

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- bootstrap样式表 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 时间选择器样式表 -->
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">


<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- bootstrap脚本 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 时间选择器前置脚本 -->
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>

<!-- 时间选择器核心脚本 -->
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

Bootstrap Table

bootstrapTable的使用及表格的导出

Bootstrap Modal

Bootstrap 模态框(Modal)插件

第26节 Bootstrap5模态弹框Modal组件用法

一、添加文章版权声明功能

打开博客目录下的主题配置文件(/themes/next/_config.yml),找到Declare license on posts 标签,进行配置:

1
2
3
4
5
# Declare license on posts
post_copyright:
enable: true #激活版权声明模块
license: CC BY-NC-SA 3.0 #版权许可协议
license_url: https://winney07.github.io/ #声明的文章的可点击链接(域名)

配置完后,执行以下命令,在浏览器中访问,效果如图所示:
版本声明设置

二、设置favicon图标

1、选择一个favicon制作网站完成制作,例如:比特虫 ,制作一个16*16,一个32*32的;
2、两个不同尺寸大小的文件,重名为favicon-16x16-next.pngfavicon-32x32-next.png
2、将重命名的两个图片文件放到博客目录下的themes/next/source/images中(覆盖原来的两个默认的)
如图所示:
设置favicon图标

三、添加头像

1、把想要设置的头像图片放到hexo/themes/next/source/images目录下;
2、在hexo/themes/next/layout/_macro目录中找到sidebar.swig文件;
3、在sidebar.swig文件中找到类名为:site-overview-wrap sidebar-panel sidebar-panel-activesection标签,进行如图所示的修改:
添加头像
效果如图所示:(若想去掉边框,可以根据头像标签的类名,全局搜索,找到对应的样式进行修改)
修改头像样式

四、添加友情链接

打开主题配置文件(/themes/next/_config.yml),找到以下内容进行修改:

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: 友情链接
# links_layout: block //块状显示(选择了行内显示,这个要注释掉,不然会报错)
links_layout: inline //行内显示
links:
小超: https://www.xiaochao.me/
Github: https://www.github.com

如图所示:
添加友情链接

五、调整hexo页面宽度

博客在浏览器上的留白太多,因此想增加文章的宽度。

打开/Hexo/themes/hexo-theme-next/source//css/_variables/custom.styl 添加两行代码即可:

1
2
$main-desktop = 1400px 
$content-desktop = 1100px

1、新建一篇文章

(1)在hexo博客目录下,进入Git Bash命令窗口中,输入以下命令:

1
hexo new "在这里"

(2)在博客目录下的/source/_posts/ 文件夹下,可以看到已经生成了标题为(在这里.md)的博客文件:
如图所示:
生成的博客文件
(3)在(在这里.md)文件中编辑自己的博客文章即可。
注意:Hexo 发布的文章是 Markdown 格式的文件, Markdown 基本语法的网址:点这里前往

2、给文章添加分类和标签

(1) 在(在这里.md)文件中设置tagscategories属性:

1
2
3
4
5
6
title: 在这里
date: 2018-08-02 11:41:10
tags:
- 博客 //多个标签可以这样添加
- hexo
categories: web前端

如图所示:
博客文章-基本设置

3、启动服务器,本地测试

1
hexo s

如图所示:
查看博客文章

4、添加“阅读全文”按钮

方法一:在文章任意你想添加的位置添加<!--more-->即可

1
<!--more-->        

例如:
在这里.md里面的内容是:

1
2
3
4
5
6
7
8
9
10
11
---
title: 在这里
date: 2018-08-02 11:41:10
tags:
- 博客
- hexo
categories: web前端
---
javascript是一门充满活力、简单易用的语言,又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者,如果没有认真学习的话,也无法真正理解它们,这就是javascript的矛盾之处。由于javascript不必理解就可以使用,因此通常来说很难真正理解语言本身,这就是我们面临的挑战。不满足于只是让代码正常工作,而是想要弄清楚为什么,勇于挑战这条崎岖颠簸的少有人走的路,拥抱整个javascript
<!--more-->
后面的内容在首页不显示,只显示到<!--more-->这里

在页面中显示的效果是:
阅读全文按钮-更多
方法二:设置首页文章以摘要形式显示,打开主题配置文件,找到auto_excerpt进行修改:

1
2
3
auto_excerpt:
enable: true
length: 150

其中length代表显示摘要的截取字符长度。
注:这两种方法,在博客首页显示的效果不一样,根据自己的需要,选择自己喜欢的方法

5、在博文中添加图片

方法一:
(1)在hexo目录下,安装插件:

1
npm install hexo-asset-image --save

(2)在hexo\source 目录下新建一个img文件夹,把图片放置在里面;
(3)在xxx.md文件中引用图片:

1
![header]( img/header.jpg)

方法二:
(1)在全局配置文件(hexo/_config.yml)中将post_asset_folder设置为true
(2)创建文章(在创建的时候,会在hexo/source/_post目录下,生成一个XXX.md文件和一个XXX的文件夹):

1
hexo new "XXX"

(3)把XXX这个博文需要展示的图片放在XXX文件夹目录下;
(4)在XXX.md文件中引入图片的方式:

1
{% asset_img example.jpg This is an example image %}

6、发布到Github上

(1)发表的文章在本地预览无误后,在 Git Bash 命令窗口执行以下命令:

1
hexo clean && hexo g && hexo d

(2)在浏览器,访问自己的博客域名,即可看到刚 发布的文章