Как мне создать навигационную панель, подобную приведенной ниже (ссылка) на сайте - PullRequest
Новая
       21

Как мне создать навигационную панель, подобную приведенной ниже (ссылка) на сайте

0 голосов
/ 05 июня 2018

В настоящее время я обновляю свой старый интерфейс php min-project с нуля и переделываю его заново. Я хочу создать свой navbar, как показано на сайте ниже (ссылка), любые предложения будут полезны. Спасибо.

ссылка

1 Ответ

0 голосов
/ 06 июня 2018

Ниже приведен пример того, как сделать нечто подобное, используя довольно стандартные компоненты и классы Bootstrap 4: 

<div class="container">
  <div class="text-center m-5">
    <div class="h1">Lorem Ipsum</div>
    <p class="lead text-muted">Lorem ipsum dolor sit imet</p>
  </div>
  <ul class="nav nav-pills nav-fill justify-content-center mb-5">
    <li class="nav-item">
      <a class="nav-link bg-secondary text-white rounded-0" href="#link1">Link 1</a>
    </li>
    <li class="nav-item ml-3">
      <a class="nav-link bg-secondary text-white rounded-0" href="#link2">Link 2</a>
    </li>
    <li class="nav-item ml-3">
      <a class="nav-link bg-secondary text-white rounded-0" href="#">Link 3</a>
    </li>
  </ul>
  <div class="card w-100 rounded-0 mb-3" id="link1">
    <div class="card-body">
      <h5 class="card-title">Link 1</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
  <div class="card w-100 rounded-0" id="link2">
    <div class="card-body">
      <h5 class="card-title">Link 2</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/qKNZpP

Как уже упоминалось в @mlegg, вы, вероятно, не должныне рассчитывайте, что люди здесь делают работу за вас.Я бы посоветовал посвятить некоторое время изучению того, как использовать Bootstrap, или нанять разработчика внешнего интерфейса, чтобы помочь вам.

...