Прихлоп 4 многорядный navbar с большой брендинг


Я веб ASP.NET форм приложение, с помощью, впервые, ушко 4 в качестве основы адаптивного дизайна.

Я построил 2 строки заголовка навигации с большим брендинг слева, где брендинг охватывает оба ряда. Обратите внимание, я еще не решила на размещение меню, который является, почему вы видите меню слева и справа от каждого бара. Я надеюсь, что этот код может быть рассмотрен для соответствующего использования классов начальной загрузки и т. д. Это загрузочный 4, хотя я украла некоторые технологии glyphicons с помощью Bootstrap 3, так как они не появляются, чтобы быть включено больше. Я чувствую, что может быть применена обивка и ширина неэффективно. Хотя это, кажется, визуально делать то, что я хочу, я не могу помочь, но чувствую, что я более-с помощью классов на протяжении HTML-код.

Я знаю нескольких крупных бренд мульти примеры строк для загрузки, но многие из них чувствовал себя немного неуклюжим, или не дать мне макет я был после.

Я поместил этот код на перо здесь, и HTML/CSS под.

HTML-код:

<header>

  <div id="app-header" class="p-0 m-0 mb-2">

    <nav class="app-headerrow navbar navbar-expand-md navbar-dark bg-dark pt-0 pb-0">

      <!-- Big Brand -->
      <div class="flex-column pb-1">
        <div class="flex-row pb-0">
          <a id="lnkApp" class="navbar-brand navbar-bigbrand align-bottom p-0" href="../../Default.aspx"><img id="imgApp" src="../../App_Themes/Default/img/app/applogo.png" />Big Brand</a>
        </div>
        <div class="flex-row" style="line-height: 1rem">
          <span class="navbar-text small p-0">My Application</span>
        </div>
      </div>
      <!-- End Big Brand -->

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

      <div class="container flex-md-column w-100 align-items-stretch ml-0 mr-0 pl-0 pr-0" style="max-width:none;">

        <!-- Row 1 -->
        <div class="collapse navbar-collapse flex-row notextwrap-all" id="navbarCollapse">

          <!-- Left -->
          <ul class="navbar-nav noflexwrap">
            <li class="nav-item d-md-none">
              <span class="navbar-text"><i class="glyphicon glyphicon-user mr-2"></i>
                                IHA\chaj17
                            </span>
            </li>
            <li class="nav-item active">
              <a href="../../MasterUserControls/#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link disabled">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>

          <!-- Right -->
          <ul class="navbar-nav nav ml-auto noflexwrap">
            <li class="nav-item active ">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 1</a>
            </li>
            <li class="nav-item mr-2">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 2</a>
            </li>
            <li class="nav-item d-none d-md-flex">
              <span class="navbar-text"><i class="glyphicon glyphicon-user mr-2"></i>Domain\User</span>
            </li>
          </ul>
        </div>

        <!-- Row 2 -->
        <div class="collapse navbar-collapse flex-row notextwrap-all pt-0 pb-2" id="navbarCollapseBottom">

          <!-- Left -->
          <ul class="navbar-nav mr-auto noflexwrap">
            <li class="nav-item active">
              <a href="../../MasterUserControls/#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link">Link</a>
            </li>
            <li class="nav-item">
              <a href="../../MasterUserControls/#" class="nav-link disabled">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown02">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>

          <!-- Right -->
          <ul class="navbar-nav nav ml-auto noflexwrap">
            <li class="nav-item active">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 1</a>
            </li>
            <li class="nav-item mr-4">
              <a href="../../MasterUserControls/#" class="nav-link">Right Menu 2</a>
            </li>
          </ul>
          <div id="app-search" class="input-group noflexwrap">
            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
            <div class="input-group-append">
              <button class="btn btn-success" type="button"><i class="glyphicon glyphicon-search"></i></button>
            </div>
          </div>
        </div>

      </div>
    </nav>
  </div>

</header>

Дополнительные CSS:

#app-search
{
    max-width:200px;
}

#app-search input
{
    background-color:#e1e1e1;
    border:none;
    line-height:1.20rem;
}

#app-search input,
#app-search button
{
    height:2rem;
}
#app-search button
{
    padding-top:.2rem;
}

.noflexwrap
{
    flex-wrap:nowrap !important;
}

.noflexwrap-all,
.noflexwrap-all *
{
    flex-wrap:nowrap !important;
}
.notextwrap
{
    white-space:nowrap !important;
}

.notextwrap-all,
.notextwrap-all *
{
    white-space:nowrap !important;
}

<p data-height="413" data-theme-id="0" data-slug-hash="EEoNPm" data-default-tab="result" data-user="jerchap" data-embed-version="2" data-pen-title="EEoNPm" class="codepen">See the Pen <a href="https://codepen.io/jerchap/pen/EEoNPm/">EEoNPm</a> by Jeremy (<a href="https://codepen.io/jerchap">@jerchap</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



2584
2
задан 28 марта 2018 в 12:03 Источник Поделиться
Комментарии