bootstrap连接数据库实现分页

Bootstrap本身并不提供连接数据库的功能，但是可以使用一些其他的工具和技术来实现连接数据库并实现分页功能。以下是一些常用的方法：

1. 使用服务器端脚本语言如PHP、Node.js等连接数据库，查询数据并生成分页HTML代码。然后将生成的HTML代码嵌入到Bootstrap页面中。例如，使用PHP和MySQL实现分页：

<?php
// 连接MySQL数据库
$mysqli = new mysqli("localhost", "username", "password", "database");

// 查询数据
$result = $mysqli->query("SELECT COUNT(*) FROM mytable");
$row = $result->fetch_assoc();
$total = $row['COUNT(*)']; // 数据总数

$pagesize = 10; // 每页显示的记录数
$pagecount = ceil($total / $pagesize); // 总页数

if (!isset($_GET['page'])) {
    $page = 1;
} else {
    $page = intval($_GET['page']);
}

$start = ($page - 1) * $pagesize; // 当前页的起始记录

$result = $mysqli->query("SELECT * FROM mytable LIMIT $start, $pagesize");

// 生成分页HTML代码
$html = '<ul class="pagination">';
if ($page > 1) {
    $html .= '<li class="page-item"><a class="page-link" href="?page='.($page-1).'">上一页</a></li>';
} else {
    $html .= '<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>';
}
for ($i = 1; $i <= $pagecount; $i++) {
    if ($i == $page) {
        $html .= '<li class="page-item active"><a class="page-link" href="#">'.$i.'</a></li>';
    } else {
        $html .= '<li class="page-item"><a class="page-link" href="?page='.$i.'">'.$i.'</a></li>';
    }
}
if ($page < $pagecount) {
    $html .= '<li class="page-item"><a class="page-link" href="?page='.($page+1).'">下一页</a></li>';
} else {
    $html .= '<li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>';
}
$html .= '</ul>';

// 输出表格和分页
echo '<table class="table">';
echo '<thead><tr><th>ID</th><th>Name</th></tr></thead>';
echo '<tbody>';
while ($row = $result->fetch_assoc()) {
    echo '<tr><td>'.$row['id'].'</td><td>'.$row['name'].'</td></tr>';
}
echo '</tbody>';
echo '</table>';
echo $html;

// 关闭数据库连接
$mysqli->close();
?>

2. 使用JavaScript框架如AngularJS、React等连接数据库并生成分页HTML代码。这种方法通常需要编写一些JavaScript代码、HTML模板和服务器端API接口来实现。例如，使用AngularJS和Node.js实现分页：

<div ng-app="myApp" ng-controller="myCtrl">
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in data">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
  <ul class="pagination">
    <li ng-class="{disabled: page == 1}"><a href="#" ng-click="prev()">上一页</a></li>
    <li ng-class="{active: p == page}" ng-repeat="p in pages"><a href="#" ng-click="goto(p)">{{p}}</a></li>
    <li ng-class="{disabled: page == pageCount}"><a href="#" ng-click="next()">下一页</a></li>
  </ul>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.7.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.pageSize = 10;
  $scope.pageCount = 0;
  $scope.page = 1;
  $scope.pages = [];

  $scope.loadData = function() {
    var start = ($scope.page - 1) * $scope.pageSize;
    $http.get('/api/data?start=' + start + '&pagesize=' + $scope.pageSize)
      .then(function(response) {
        $scope.data = response.data;
      });
  };

  $scope.loadPage = function(page) {
    if (page < 1 || page > $scope.pageCount) {
      return;
    }
    $scope.page = page;
    $scope.loadData();
  };

  $scope.prev = function() {
    $scope.loadPage($scope.page - 1);
  };

  $scope.next = function() {
    $scope.loadPage($scope.page + 1);
  };

  $scope.goto = function(page) {
    $scope.loadPage(page);
  };

  $http.get('/api/count')
    .then(function(response) {
      $scope.pageCount = Math.ceil(response.data / $scope.pageSize);
      $scope.pages = [];
      for (var i = 1; i <= $scope.pageCount; i++) {
        $scope.pages.push(i);
      }
      $scope.loadData();
    });
});
</script>

在上面的示例中，`$http`服务用于连接Node.js服务器端API接口获取数据和总记录数。服务器端API接口可以使用Express框架编写。