気になる

アフェリエイト旅行

自動車

家庭菜園

« PHPをお勉強中 おすすめサイト | トップページ | エクスプローラーのお気に入りに、好きなファイルorフォルダを登録する »

2018/03/09

Bootstrap 4 の ハンバーガー

カスタムの作り方が掲載されてました
なるほど・・svgなわけなんですね。f(^^;)

使い方はこんな感じなんですね。

background-image: url('data:image/svg+xml;charset=utf8,') ふむふむ。w

サンプルでは綺麗なピンクでした♪

HTMLの中の
button の所に クラスでcustom-togglerを追加しておいて

<html>
<button class="navbar-toggler custom-toggler"
</html>

CSS側で
クラスでcustom-toggler の中身を設定

<style>

    .custom-toggler.navbar-toggler {
    border-color: rgb(255,102,203);
}
.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.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

</style>

では、ブルーで使いたいときは・・
↓色の数値を変更するだけでOK。素晴らしい!


<style>

    .custom-toggler.navbar-toggler {
    border-color: rgb(15, 15, 250);
}
.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(15, 15, 250, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

</style>

ん?IEだけちゃんと見えて、他はやっぱり真っ白。。。。

« PHPをお勉強中 おすすめサイト | トップページ | エクスプローラーのお気に入りに、好きなファイルorフォルダを登録する »

お勉強」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/114130/66476516

この記事へのトラックバック一覧です: Bootstrap 4 の ハンバーガー:

« PHPをお勉強中 おすすめサイト | トップページ | エクスプローラーのお気に入りに、好きなファイルorフォルダを登録する »

google検索

  • Google


    このブログを検索
    ウェブ全体から検索

カテゴリー

ニュース

  • 日経平均(長期)

    株価ミニチャートのブログパーツ
  • 経済指標(発表と内容)へのリンク
    http://jp.investing.com/economic-calendar/
  • 経済指標
  • . . .
  • 日経平均チャート
    by 株価チャート「ストチャ」
  • 株指標
2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30