如何在bootstrap按钮的左侧放置Glypicon？

在bootstrap中，可以使用内置的Glyphicon图标来放置在按钮的左侧。以下是如何在bootstrap按钮的左侧放置Glyphicon的步骤：

首先，确保你已经引入了Bootstrap的CSS和JS文件到你的网页中。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

在按钮的HTML代码中，添加一个<span>元素作为图标的容器，并给它一个适当的类名。

<button type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-search"></span> 搜索
</button>

在这个例子中，我们使用了glyphicon glyphicon-search类来添加一个搜索图标。

如果你想要将图标放在按钮的右侧，只需将<span>元素放在按钮文字后面。

<button type="button" class="btn btn-primary">
  搜索 <span class="glyphicon glyphicon-search"></span>
</button>

这样，你就可以在bootstrap按钮的左侧或右侧放置Glyphicon图标了。

值得注意的是，以上的示例中使用的是Bootstrap 3版本的Glyphicon图标。如果你使用的是Bootstrap 4，它已经移除了Glyphicon图标，建议使用其他图标库如Font Awesome等来代替。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在bootstrap按钮的左侧放置Glypicon？

相关·内容

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐