web-dev-qa-db-ja.com

モバイルビューのBootstrap Navbarトグルボタンにテキストヒントを追加

一部のテストでは、モバイルデバイスの折りたたみ可能なメニューの「ハンバーガー」ボタンがユーザーにとって謎であることが示されています。モバイルで見られるように、Bootstrapメニューボタンの横に「メニュー」という単語を追加したいと思います。 -見る。

詳細については、この記事をチェックしてください： 'ハンバーガーはあなたにとって悪いです'： http://mor10.com/hamburger-bad/

基本的なBootstrapコード：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <!-- Represents navbar collapsed menu on smaller screens -->
  <span class="sr-only">Toggle navigation</span>
    <!-- 3 horizontal lines on small screen nav button -->
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

そこで、モバイルのアイコンの横に「MENU」という単語を追加したいと思います。私は話していることのモックアップを作成しましたが、それを投稿するのに十分な評判がSOにありません。

ここでそれをチェックしてください： https://imgur.com/M7hGS7F

  • 参考までに、これはモックアップです。実際のBootstrapページにはMENUテキストが含まれていません。そうでない場合は、ソースを確認するだけです。

含める方法についての情報を提供できれば、（A）ボタンの横にテキストを入力し、（B）ボタンの一部としてクリックできるので、すばらしいでしょう。このソリューションにご協力いただき、ありがとうございます。

htmltwitter-bootstrapjquery-mobilemobileuser-experience
12
sinisterOrange

Fontawesomeを使うのが一番いいと思います。

fontawesomeへの参照を含めるだけで（ http://fortawesome.github.io/Font-Awesome/get-started/ を参照）、バーアイコンを使用します（ http：// fortawesome .github.io/Font-Awesome/icon/bars / ）

したがって、コードはsthに見えます。そのように：

<head>
   [...]
   <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   [...]
</head>
<body>

[...]

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <!-- Represents navbar collapsed menu on smaller screens -->
    <span class="sr-only">Toggle navigation</span>
    <i class="fa fa-bars" aria-hidden="true"></i> Menu
</button>

バーアイコンを大きくする必要がある場合は、fa-lgまたは http://fortawesome.github.io/Font-Awesome/examples/ にある他のクラスをアイコンに追加するだけです。

7
nozzleman

HTML

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Menu</span>
    <div class="button-bars">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
</button>

CSS

.navbar-toggle .button-label {
    display: inline-block;
    float: left;
    font-weight: bold;
    line-height: 14px;
    padding-right: 10px;
}
.button-bars {
    display: inline-block;
    float: left;
}
4
Mohammad Dayeh

同じ問題がありましたが、fontawesomeを追加する気がしませんでした。

これが私の解決策です（HTMLとLESS）：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Meny</span>
    <div class="button-hamburger">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </div>
</button>

もっと少なく：

button {

    .button-label {
        display: table-cell;
        vertical-align: middle;
        font-weight: 700;
        padding-right: 3px;
    }

    .button-hamburger {
        display: table-cell;
        padding: 8px;
        border: 1px solid #333;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;

        .icon-bar {
            background: #333;
        }
    }
}
.navbar-toggle {
    border: none;
    padding: 0;
}

警告：私はこれを最後にテストしただけですChromeおよびIE 11。他にATMを設定していません。

1
yacuzo