卡通纸条网页风格CSS源码及使用教程

in 技术教程 with 2 comments

本教程仅介绍在Typecho博客中的使用教程,使用其他系统的dalao请自行琢磨,实在不行请在评论区留言,谢谢支持!

本页将此CSS源码引用后,效果如下。

1.文字效果
"本教程仅介绍在Typecho博客中的使用教程,使用其他系统的dalao请自行琢磨,实在不行请在评论区留言,谢谢支持!"

2.卡片+按钮

Bert Waver
Hello World!

3.进度条

4.勋章

Cool Hot

5.折叠

有容乃大。

由于风格基于bootstrap4,更多玩法请参考教程文档


使用教程

1.在指定位置引入bootstrap4以及风格文件。如果你只想在一个文章或界面使用的话,请在编辑器顶部添加以下内容。

请!把!我!去掉
<html>
<head>
  <link rel="stylesheet" href="https://blog.5socool.cn/thecss/bootstrap.min.css">
  <link rel="stylesheet" href="https://blog.5socool.cn/thecss/_bootswatch.scss">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
</html>
请!把!我!去掉

效果图如下:
请输入图片描述

2.同理,如果想要风格在全站生效,就在你使用的主题文件中<head>标签内添加以下内容:

  <link rel="stylesheet" href="https://blog.5socool.cn/thecss/bootstrap.min.css">
  <link rel="stylesheet" href="https://blog.5socool.cn/thecss/_bootswatch.scss">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

3.保存更改,下面是使用方法:
依照原有的方法直接编写文章或页面即可。除文字外,其他内容(例如卡片/按钮)请这样写:::

请!去!掉!我
bootstrap4语法
请!去!掉!我
点此免费入门bootstrap4。
Responses
  1. 为什么我的输出来是原封不动的代码~

    Reply
    1. @大包

      typecho1.1对markdown做了调整。代码需要这样输入才会生效

      !!!
      代码内容
      !!!

      而不是直接复制粘贴。

      Reply