Question

我正在使用Bootstrap CSS和JS，但是页面上没有任何显示。这是源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <title>Chat @ null</title>
        <link href="bootstrap.css" rel="stylesheet"/>
        <script src="bootstrap.js">
    </head>
    <body>
        <div class='d-flex btn-group'>
            <a href='#' class='btn btn-primary w-100'>Hello</a>
            <a href='#' class='btn btn-success w-100'>Welcome</a>
            <a href='#' class='btn btn-danger w-100'>CSS</a>
            <a href='#' class='btn btn-primary w-100'>BootStrap</a>
        </div>
        <div class='alert alert-success alert-dismissible'>
            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
            <strong>Success!</strong> This alert box could indicate a successful or positive action.
        </div>
    </body>
</html>

Answer 1

尝试以下。存在语法错误。

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <title>Chat @ null</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class='d-flex btn-group'>
            <a href='#' class='btn btn-primary w-100'>Hello</a>
            <a href='#' class='btn btn-success w-100'>Welcome</a>
            <a href='#' class='btn btn-danger w-100'>CSS</a>
            <a href='#' class='btn btn-primary w-100'>BootStrap</a>
        </div>
        <div class='alert alert-success alert-dismissible'>
            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
            <strong>Success!</strong> This alert box could indicate a successful or positive action.
        </div>
    </body>
</html>

Answer 2

您只需要关闭<script>标签，将<script src="bootstrap.js">更改为<script src="bootstrap.js"></script>

Answer 3

因为文件未正确包含！..为css和js提供正确的路径..或改用CDN

<!DOCTYPE html>
<html>

<head>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>Chat @ null</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>    
   <body>
      <div class = 'd-flex btn-group' >
      <a href = '#'
    class = 'btn btn-primary w-100' > Hello </a>
     <a href = '#'
    class = 'btn btn-success w-100' > Welcome </a> <a href = '#'
    class = 'btn btn-danger w-100' > CSS </a> <a href = '#'
    class = 'btn btn-primary w-100' > BootStrap </a> </div> <div class = 'alert alert-success alert-dismissible' >
      <a href = '#'
    class='close'
    data-dismiss = 'alert'
    aria-label = 'close' >&times; </a> <strong > Success! < /strong> This alert box could indicate a successful or positive action. </div> </body> </html>

Answer 4

您需要正确设置代码格式，然后先结束脚本标签

尝试以下代码

<!DOCTYPE html>
<html>

<head>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>Chat @ null</title>
  <link href="bootstrap.css" rel="stylesheet" />
  <script src="bootstrap.js"></script>
  
</head> 
<body>
      <div class="d-flex btn-group">
        <a href="#" class="btn btn-primary w-100">Hello</a> 
        <a href = "#" class = "btn btn-success w-100">Welcome</a>
        
      </div>  
      <div class = "alert alert-success alert-dismissible">
        <a href = "#" class = "close" data-dismiss = "alert" aria-label="close"> & times; </a> <strong> Success! </strong> This alert box could indicate a successful or positive action.
      </div> 
  </body> 
</html>

Answer 5

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <title>Chat @ null</title>
		  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class='d-flex btn-group'>
            <a href='#' class='btn btn-primary w-100'>Hello</a>
            <a href='#' class='btn btn-success w-100'>Welcome</a>
            <a href='#' class='btn btn-danger w-100'>CSS</a>
            <a href='#' class='btn btn-primary w-100'>BootStrap</a>
        </div>
        <div class='alert alert-success alert-dismissible'>
            <a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
            <strong>Success!</strong> This alert box could indicate a successful or positive action.
        </div>
    </body>
</html>

HTML页面什么也没显示

5 个答案: