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

  • 2019 年 03 月 30 日
  • 773
  • 304 字
  • 2 条评论

本教程仅介绍在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。

版权属于:BertWaver

本文链接:https://ixfish.cn/index.php/archives/48/



—— 收到 2 条评论 ——

    2019 年 05 月 04 日 16:02

    为什么我的输出来是原封不动的代码~

      2019 年 05 月 17 日 17:04

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

      代码内容

      而不是直接复制粘贴。

OωO
|