web-dev-qa-db-ja.com

ブートストラップ4ハンバーガートグルカラーの変更

私は、画面が992px未満のときにHamburgerが追加されたブートストラップWebサイトを持っています。 HamBurgerのコードはこんな感じです

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

HamBurgerボタンの色を変える可能性はありますか？

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
62
Rehan

Bootstrap 4のnavbar-toggler-icon（ハンバーグ）はSVGのbackground-imageを使用します。トグルアイコン画像には2つの「バージョン」があります。 1つは明るいナビゲーション用、もう1つは暗いナビゲーション用です。

  • 暗い背景で明るい/白いトグラーにnavbar-darkを使う
  • 明るい背景に濃い/灰色のトグラーにはnavbar-lightを使う
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

したがって、トグル画像の色を他の色に変更したい場合は、アイコンをカスタマイズできます。たとえば、ここではRGB値をピンク（255,102,203）に設定します。 SVGデータのstroke='rgba(255,102,203, 0.5)'値に注目してください。

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

デモ http://www.codeply.com/go/4FdZGlPMNV

OFC、別のライブラリのアイコンを使用するための別のオプション、つまりFont Awesomeなど.

Bootstrap 4.0.0をアップデートします。

Bootstrap 4 Beta以降、navbar-inverseは、より明るい背景色のナビゲーションバーで使用して、より明るいリンクとトグル色を生成するためのnavbar-darkになりました。

Bootstrap 4 Navbarの色を変更する方法

130
Zim

単にデフォルトのアイコンスパンで "i"タグのfont-awesomeを使用して、CSSで追加されたアイコンの色を変更してください。

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon"></i>
</span>

.fa.fa-navicon {
  color:white;
}
22
Amirreza Mohammadi

_variables.scssでsassバージョンのブートストラップを使用している場合は、$navbar-inverse-toggler-bgまたは$navbar-light-toggler-bgでトグルボタンの色とスタイルを変更できます。

Htmlでは、使用したいバージョンに応じてnavbar-inverseまたはnavbar-lightを使用する必要があります。

1
nedeco

編集：私の悪い！私の答えでは、アイコンはトグラーとして振る舞うことはありません 実際には、折りたたまれていなくても表示されます...まだ検索中...

これはうまくいくでしょう：

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

私の答えで提案されているトリックは、navbar-togglerを古典的なボタンクラスbtnに置き換えて、そして先に答えたようにアイコンフォントを使うことです。

<button class="navbar-toggler">をキープすると、ボタンは「変な」形になります。

この githubへの投稿 で述べたように、ブートストラップはいくつかの "cssトリック"を使っているので、ユーザーはフォントに頼る必要はありません。

そのため、アイコンフォントを使用したい場合は、ボタンに"navbar-toggler"クラスを使用しないでください。

乾杯。

1
stockersky

別の方法として、別のアイコンを使用して、いつでも簡単な回避策を試すことができます。次に例を示します。

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

ref： https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

ref： https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

それで、あなたは彼らの色とサイズを完全にコントロールすることができます：

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

enter image description here

（ 適用されたボタンのスタイルはクイックテスト用です ）：

0
Igor Parra

あなたは非常に簡単な方法でのみCSSでトグルボタンを作成することができます、SVGまたは... foramtのフォントを使用する必要はありません。

あなたのボタン： 

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

あなたのボタンスタイル： 

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

あなたの横線スタイル： 

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

デモ 

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}
<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>
0
Ghafor Sabury

nav要素にクラスnavbar-darkまたはnavbar-lightを挿入するだけです。

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
0
Thái An Nguyễn

カスタムハンバーガーナビゲーションの最適なソリューションを確認してください。

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

デモ画像

0
habibullah khan