DataTables pagination style doesn't styled as bootstrap theme

I try to use DataTables on my Web. I'm using bootstrap version 3.3.6 from here: http://getbootstrap.com/

I'm using DataTables example from here: https://datatables.net/examples/styling/bootstrap.html

This is what I expected:

But this is what I get:

Here is my code:

<head>
 <!-- Bootstrap -->
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.css" rel="stylesheet">
 <!-- Bootstrap theme -->
 <link href="css/bootstrap-theme.css" rel="stylesheet">
 <!-- Datatable css -->
 <link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
 <link href="css/jquery.dataTables.min.css" rel="stylesheet">
 <!-- Custom styles for this template -->
 <link href="theme.css" rel="stylesheet">
</head>
<body>
 <!-- some other stuff and html code here -->

 <!-- and, at the end of page, I have: -->
 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/docs.min.js"></script> 
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="js/ie10-viewport-bug-workaround.js"></script>
 <script src="js/jquery-1.12.0.min.js"></script>
 <script src="js/dataTables.bootstrap.min.js"></script>
 <script src="js/jquery.dataTables.min.js"></script>
 <script>
  $(document).ready(function() {
   $('#example').DataTable();
      } );
 </script>
</body>

Did I missed something? I've tried to compare my code and example code from example here: https://datatables.net/examples/styling/bootstrap.html

but still no found any different

edit: I add theme.css to my page, it only like this:

body {
  padding-top: 70px;
  padding-bottom: 30px;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}