Question

如何创建一个带有3个水平线/短划线图标的bootstrap 3按钮作为设置的典型web按钮。？

我找不到这样的ico / glyphicon所以我怎么能用css做呢？

Answer 1

您可以创建自己的图标

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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中的符号在一个小设备上为menue提供赞美？

<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/，在那里您会找到更多图标。

创建一个带有3个水平破折号或线条的bootstrap 3按钮

3 个答案: