Question

目前我正在从头开始升级旧的php min-project前端并重新设计它，我想设计我的导航栏，如下面的网站（链接）任何的意见都将会有帮助谢谢。

Answer 1

下面是如何使用非常标准的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或聘请前端开发人员来帮助你。

如何创建如下（链接）网站的导航栏

1 个答案: