创建一个带有 3 条水平虚线或线条的 Bootstrap 3 按钮

Question

如何创建一个 Bootstrap 3 按钮，其图标具有 3 条水平线/破折号作为典型的 Web 按钮设置。 ？

我找不到这样的 ico/glyphicon 那么我怎样才能用 css 做到这一点？

Answer 1

演示 - http://www.bootply.com/92Ka6oLOVO

您可以创建自己的图标

/* CSS used here will be applied after bootstrap.css */

.glyphicon-nav {
  width: 18px;
  padding: 8px 0;
  position: relative;
  display: inline-block;
}
.glyphicon-nav:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  top: 0px;
}
.glyphicon-nav:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0px;
  height: 2px;
  width: 100%;
  background: Red;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-nav" aria-hidden="true"></span> Setting
</button>

Answer 2

我从 http://getbootstrap.com/examples/navbar/复制了以下代码。

HTML：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

CSS：

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

显然上面我没有测试。通过研究我上面链接的页面，您将能够找到任何缺失的部分。

Answer 3

我认为你的意思是 Bootstrap 中出现在小型设备菜单上的符号？

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span></button>

所以按钮中有 3 个“图标栏”。

如果这不是您的意思，请查看 http://glyphicons.com/，在那里您会找到更多图标。

Answer 4

你是这个意思吗？

.navbar-toggler-icon {
   width:auto;
   height:auto;
}
.line { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border: 2px solid rgb(136, 133, 133);
    width: 35px;
  } 

 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
            <hr class="line">
            <hr class="line">
            <hr class="line">
          </button>