如何使Bootstrap-4与php和html一起使用?

时间:2019-01-09 15:15:21

标签: bootstrap-4

我下载了Bootstrap 4,以便在某个站点上将其替换为Bootstrap 3,但似乎无法正常运行。在3下效果很好。

<header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><i class="fa fa-user"></i></a>
    </div>
    <ul class="nav navbar-nav ">
      <li><a href="/">About</a></li>
      <li><a href="/pages/school/courses.php">Blog</a></li>
      <li><a href="/pages/cubing/cubing.php">Reviews</a></li>
            <li><a href="/pages/cubing/cubing.php">Cubing</a></li>
            <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">More
        <ul class="dropdown-menu">
          <li><a href="#">1</a></li>
          <li><a href="#">-Attacks</a></li>
          <li><a href="#">Cubify</a></li>
        </ul>
            </li>
    </ul>
  </div>
</nav>

1 个答案:

答案 0 :(得分:0)

我还不能添加评论(信誉不够),所以我将在这里进行。

除了Bootstrap类可能已更改的事实之外,就像@Rob所说的那样,您的标记是错误的。 要了解您是HTML的初学者,请从此处开始。它说明了HTML页面的最基本设置。 https://www.w3schools.com/html/html_intro.asp

例如,缺少

您的 head 标签。它不会以<head>开头或以</head>结尾。 链接标签应该位于的部分。 您使用的<header>标签应放在 body 标签中。

作为测试,这行得通吗?假设您发布的内容与您的网站完全相同。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">

</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><i class="fa fa-user"></i></a>
    </div>
    <ul class="nav navbar-nav ">
      <li><a href="/">About</a></li>
      <li><a href="/pages/school/courses.php">Blog</a></li>
      <li><a href="/pages/cubing/cubing.php">Reviews</a></li>
            <li><a href="/pages/cubing/cubing.php">Cubing</a></li>
            <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">More
        <ul class="dropdown-menu">
          <li><a href="#">1</a></li>
          <li><a href="#">-Attacks</a></li>
          <li><a href="#">Cubify</a></li>
        </ul>
            </li>
    </ul>
  </div>
</nav>

</body>
</html>