Bootstrap 3 Datatable Styling in Asp.Net irgendwie überschrieben

Question

Nur versuchen, das Bootstrap 3 Theme für Databases (https://datatables.net/examples/styling/bootstrap.html) auf einer neuen Asp.Net MVC-Anwendung zu funktionieren, und ich denke, Stile werden irgendwie überschrieben.

Von dem, was ich auf dieser Seite verstehen Ich brauche die bootstrap.min.css-Datei und die dataTable.bootstrap.min.css Datei aufzunehmen, die ich hier in meinem Bundle Config,

getan haben

public class BundleConfig 
{ 
    // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862 
    public static void RegisterBundles(BundleCollection bundles) 
    { 
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-1.10.2.js")); 

     bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.validate*")); 

     // Use the development version of Modernizr to develop with and learn from. Then, when you're 
     // ready for production, use the build tool at https://modernizr.com to pick only the tests you need. 
     bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        "~/Scripts/modernizr-*")); 

     bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.js", 
        "~/Scripts/respond.js", 
        "~/Scripts/DataTables/jquery.dataTables.js")); 

     bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css", 
        "~/Content/site.css", 
        "~/Content/DataTables/css/jquery.dataTables.css", 
        "~/Content/DataTables/css/dataTables.bootstrap.css")); 
    } 
} 

Ich habe verschiedene Dinge gelesen, ich habe versucht, die "~/Content/DataTables/css/jquery.dataTables.css" aus meinem CSS-Bundle zu entfernen, da dies ebenfalls zu einem Konflikt zu führen scheint. Das hat aber auch nichts für mich getan. Die Datentabelle Initialisierung funktioniert gut und ich diese,

Sie können seine erzählen versuchen, das Bootstrap-Styling mit den Symbolen in Konflikt anzuwenden. Aber ich kann nicht sagen, warum das Styling nicht automatisch anwendet.

Hier ist meine Tabelle Setup

<table class="table" id="anthony-transactions"> 
<thead> 
    <tr> 
     <th></th> 
     <th>Description</th> 
     <th>Amount</th> 
     <th>Type</th> 
     <th>Date</th> 
     <th></th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      <div class="btn btn-default"> 
       Edit 
      </div> 
     </td> 
     <td>May 2017 | Wellness Summit</td> 
     <td> 
      <span class="text-success"> 
       +$10.00 
      </span> 
     </td> 
     <td>Amazon</td> 
     <td>6/7/2017</td> 
     <td> 
      <div class="btn btn-danger"> 
       Delete 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="btn btn-default"> 
       Edit 
      </div> 
     </td> 
     <td>Stanford Research Study</td> 
     <td> 
      <span class="text-success"> 
       +$15.00 
      </span> 
     </td> 
     <td>Amazon</td> 
     <td>6/10/2017</td> 
     <td> 
      <div class="btn btn-danger"> 
       Delete 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="btn btn-default"> 
       Edit 
      </div> 
     </td> 
     <td>Steam Game</td> 
     <td> 
      <span class="text-danger"> 
       -$10.00 
      </span> 
     </td> 
     <td>Game</td> 
     <td>6/1/2017</td> 
     <td> 
      <div class="btn btn-danger"> 
       Delete 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="btn btn-default"> 
       Edit 
      </div> 
     </td> 
     <td>Century Link Stream Service</td> 
     <td> 
      <span class="text-success"> 
       +$100.00 
      </span> 
     </td> 
     <td>Visa</td> 
     <td>6/1/2017</td> 
     <td> 
      <div class="btn btn-danger"> 
       Delete 
      </div> 
     </td> 
    </tr> 
</tbody> 

Und Initialisierungsscript,

@section Scripts{ 
<script> 
    $(document).ready(function() { 
     $("#anthony-transactions").DataTable(); 
    }); 
</script> 
} 

Ich suche diesen Stil Blick zu bekommen und aus dem Thema fühlen, wo man sehen kann Die Seitenaufteilung, die Suche und die Dropdown-Liste der Ergebnisse pro Seite werden ebenfalls formatiert,

Answer 1

war nie in der Lage, die Minutien von zu isolieren, was schiefgeht, aber ich hatte Datentabellen durch meine Nuget Paketmanager installiert, damit ich die Selbstinstallation nur zurückgespult und entfernt, und es tat mir nur die benötigten Dateien zu installieren und sie zu bündeln und es schien gut zu funktionieren.

Answer 2

Klicken Sie mit der rechten Maustaste auf das Symbol und wählen Sie aus dem Kontextmenü inspect Element, das die Entwicklerkonsole in Ihrem Browser öffnet. Das Symbol im Beispiel wird durch Bootstraps mit :: after verwendet. Sobald Sie das Element auf der rechten Seite des Fensters überprüft haben, sehen Sie die Style-Sheet-Regeln. Hier werden Sie wahrscheinlich feststellen, dass eine andere CSS-Regel angewendet wird, die zu Konflikten zwischen den Symbolen führt. Die Regel, die Konflikte verursacht, hat einen Hyperlink zu dem Dokument, das die CSS und die Zeilennummer der Regel enthält, die den Konflikt verursacht.

Auch die Tabelle im Beispiel hat auf sie angewendete Formularklassen "Tabelle Tabelle-Gestreifte Tabelle-Umrandete Datentabelle", in der die Tabelle in Ihrem Markup auf "Tabelle" angewendet hat.

Interessanter diese Tabelle hat eines der Symbole in der Kopfzeile https://datatables.net/examples/styling/bootstrap.html und diese Tabelle hat die anderen https://datatables.net/examples/basic_init/table_sorting.html

Die erste Tabelle

table.dataTable thead .sorting::after { 
opacity: 0.2; 
content: "\e150"; 

in /css/dataTables.bootstrap.min.css definiert}

Das zweite Beispiel definiert in /css/jquery.dataTables.min.css:

table.dataTable thead .sorting { 
background-image: url("../images/sort_both.png"); 

}

Diese Regeln kollidieren und beide Stylesheets führen zu den beiden Symbolen, die Sie sehen.