今天教大家用bootstrap给你的文章中插入一个漂亮的按钮

5

很多时候,程序自带的按钮我们并不是很喜欢,比如说,小编用的是新版的WordPress5.2,虽然说有按钮功能,但是并不尽人意,不管是功能上,还是搭配上,总有缺憾。

当然每个人的需求不一样,但毕竟,通过一些方法,去添加一个按钮总是好的。添加按钮的方法有很多,比如直接用图片做一个,还有用CSS调用的,当然还有用html还有JS的。反正我找来找去都很麻烦。

1.首先我们需要建立一个区块,这里以WordPress举例

这样以后每次需要用到这个按钮的时候,我们只需要调用这个可重用模块就好了。比如说我们想创建一个如下按钮。

那么我们就新建一个HTML模块,或在编辑页面中,将以下代码插入进去,这样,你就可以获得一个简单的按钮了。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div style="text-align: center;"><a class="btn btn-danger" href="" target="_blank" role=" button" rel="noopener noreferrer">立即前往免费下载</a></div>

其实使用bootstrap还有很多按钮样式。不仅仅是小编上面展示的那种。

2.bootstrap按钮样式

这款按钮有很多款颜色可以选择,只需要添加对应的代码就可以。但我们值得注意的是,毕竟我们添加按钮的时候是需要添加自己的超链接或其他自定义链接。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

上面的代码只是有一个样式而已,实际的功能也只是展示,我们需要增加必要的功能,比如说添加链接和新窗口打开。

<a class="btn btn-danger" href="" target="_blank" role=" button" rel="noopener noreferrer">立即前往免费下载</a>

我们可以看到按钮的代码样式发生了一些变化,如果您想改变其中的颜色,只需要替换class后面的内容即可。当然,还有很多其他的样式,例如大小之类的。后续咱们在讨论。

用bootstrap给你的文章中插入一个漂亮的按钮

发表意见

Please enter your comment!
Please enter your name here