关于Bootstrap button的设置

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
博主在该网站(http://www.runoob.com/bootstrap/bootstrap-tutorial.html) 进行Bootstrap的学习。
博主想要在自己开发的Cesium页面上方添加一系列的button以便日后的其他自定义功能的关联,如下图所示。

在这里插入图片描述
最前方的button是用于显示和隐藏后面的按钮组的,代码如下

<button id="btnTest" type="button" class="btn btn-dark btn-sm" style="position:absolute; z-index: 1000; left:20%; top:1%; width:30px; height:30px;" onclick="doHide();"></button>
  <div id="divTest" class="btn-group btn-group-justified" style="display: none; position:absolute; z-index: 9999; left:23%; top:1%; width:80px; height:30px;">
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <div class="btn-group">
      <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">
      Unused <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" style="background:black;">
        <li><a href="#">#</a></li>
        <li><a href="#">#</a></li>
      </ul>
    </div>
  </div>


 function doHide(){
          var oDiv = document.getElementById("divTest");
          var oButton = document.getElementById("btnTest")
          if (oDiv.style.display == "none"){
            oDiv.style.display = "";
          }else {
            oDiv.style.display = "none";
          }
        }

在博主完成这些后想在最前方的按钮里添加bootstrap自带的字体图标(Glyphicons),比较了一下教程网页字体图标需要所引用的Bootstrap版本代码和博主之前引用过的版本号不同,博主之前引用的是4.3.1版本,但在教程网站里引用的是3.3.7版本,博主最初没去引用3.3.7版本的,运行后发现图标无法显示,而引用3.3.7的版本后才能显示

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

博主就去Bootstrap的官网查询了一下,发现原来Bootstrap 4版本已经不支持glyphicon格式的图标了。
于是博主顺着官网的推荐使用了Font Awesome的文字图标(https://fontawesome.com/) 进行引用。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190320171938841.png
可以发现添加了图标后会变得更加美观。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值