我正在使用 Bootstrap 和 jQuery 数据表插件。现在它同时显示了默认样式和 Bootstrap 样式。例如，分页显示默认分页按钮内的 Bootstrap 按钮。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link href="./libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./libs/bootstrap/css/jumbotron-narrow.css" rel="stylesheet">
<link href="./libs/css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
</head>
<body>
<dir class="container">
<div class="col-md-12">
<h2>Catàleg de peticions</h2>
</div>
<div class="col-md-12">
<div class="col-md-3">
<a href="create.php" class=" btn btn-default action-btn">Nou registre</a>
</div>
<div class="col-md-3">
<button class="btn btn-default action-btn" id="edit-btn">Editar Registre</button>
</div>
<div class="col-md-3">
<button class="btn btn-default action-btn" id="edit-tree-btn">Editar Arbre</button>
<!--a href="create.php?edit-tree=true" class="btn btn-default" id="edit-btn">Editar Arbre</a>-->
</div>
<div class="col-md-3">
<button class="btn btn-default action-btn" id="delete-btn">Eliminar</button>
</div>
<div class="col-md-3">
<a href="gestioci/" class="btn btn-default action-btn">Associar CI</a>
</div>
<div class="col-md-3">
<a href="download.php" download="cataleg_peticions.csv" class="btn btn-default action-btn">Exportar</a>
</div>
<div class="col-md-3">
<button class="btn btn-default action-btn" id="backup-btn">Backup</button>
</div>
<div class="col-md-3">
<button class="btn btn-default action-btn" id="restore-backup-btn">Restaurar Backup</button>
</div>
</div>
<div class="col-md-12" style="margin-top: 10px">
<form action="load_csv.php" method="post" enctype="multipart/form-data" id="upload-form">
<div class="col-md-6">
<input type="file" name="csv-file" id="csv-file">
</div>
<div class="col-md-3 offset-md-6">
<input class="btn btn-default" type="submit" name="submit" value="Importar">
</div>
</form>
</div>
</dir>
<table class="table-bordered table-hover table-fixed" id="mytable">
<thead>
<tr>
<th>Confimar</th>
<th>Árbol Completo</th>
<th>Títol</th>
<th>Descripció</th>
<th>Code</th>
<th>Parent Code</th>
</tr>
</thead>
<?php
if ($stmt = sqlsrv_query($conn,$query)) {
while($tmp = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_NUMERIC)) {
echo setTableFile($tmp);
}
}
?>
</tr>
</table>
</div>
<script src="./libs/jquery-3.2.1.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="./libs/script.js"></script>
</body>
</html>
我认为脚本顺序是正确的。可能是什么问题呢？我是否必须在数据表上设置一些内容才能使用 Bootstrap ？
最佳答案
尝试用这些链接替换 bootstrap 和 datatables css:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css
这些是此处示例中给出的样式表:https://datatables.net/examples/styling/bootstrap.html
它看起来也像(在示例中)
的链接src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
必须在之前引用
src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js">
还有
通过查看您的代码，您缺少了 <tbody>在你的标记中标记。 This is essential对于数据表。您的标记/PHP 应如下所示:
<table class="table-bordered table-hover table-fixed" id="mytable">
<thead>
<tr>
<th>Confimar</th>
<th>Árbol Completo</th>
<th>Títol</th>
<th>Descripció</th>
<th>Code</th>
<th>Parent Code</th>
</tr>
</thead>
<tbody>
<?php
if ($stmt = sqlsrv_query($conn,$query))
{
while($tmp = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_NUMERIC))
{
//remember to echo out a row for each line returned in the loop
echo '<tr>';
echo setTableFile($tmp);
echo '</tr>'
}
}
?>
</tbody>
</table>
关于jquery - Bootstrap 数据表样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46524946/